openlayers3 自定義打包

2021-07-25 22:33:31 字數 967 閱讀 3675

首先放乙個啟發我的文章:
ol有很多庫,有時候我們只需要部分,比如map,view.layer等。如果把整個檔案都引入專案,有些浪費資源且檔案過大,與最小化的思路相違。這時候就需要單獨打包這些內容,這也是這邊記錄的主要內容,如何自定義打包我們需要的庫?

build資料夾是在npm中安裝openlayers的時候自帶的,裡面那些配置檔案是必須的。所以沒有build的旁友們要注意一下你的****。
3.配置

}

4.npm執行:

cd ./node_modules/openlayers

node tasks/build.js build/ol-custom.json build/ol-custom.js

此時在build資料夾下會出現ol-custom.js的檔案。這個檔案就是我們自定義的打包檔案。

關於配置

可以看下ol的官方文件:

更多

使用上述配置打包的結果是經過混淆和壓縮的,也就是說你new map 後,無法找到map.addlayer方法。這就需要不混淆打包,更改配置即可實現:

}

之試了很久都沒找到如何不混淆打包,但是看了官方的文件,說如果不配置其他項就可以實現不混淆打包。看來英語還是很有必要的,不然根本沒法解決這個問題。

另外」exports」: [「「], 這裡代表全部打包,如果想固定打某些庫,可以像下面那樣配置:

"exports": [

"ol.map",

"ol.view",

"ol.control.defaults",

"ol.layer.tile",

"ol.source.osm"

],

Openlayers 3載入XYZ示例

openlayers3中有個ol.source.xyz類,可以載入tile瓦片圖層,本文只是做個說明,介紹如何識別以及如何正確載入這些圖層。明顯的名稱.png arcserver切片.png 這是arcserver的切片,感覺xyz不明顯,但是組織形式也和xyz是一樣的,其實,稍微想想,除了名字不一...

使用OPENLAYERS 3 顯示聚合資料

使用openlayers 3 地圖元件比較容易解決這個問題,關鍵是 ol.source.cluster 物件,這個物件有兩個引數,乙個是聚合距離,乙個是原始的點資料。片段如下 1 初始化ol3 map物件 this.ol2d new ol.map view new ol.view 2 準備json資...

OpenLayers 3 之 動態點擴散效果

當某個地方發生一些事情之後,如果我們新增乙個靜態點在地圖上,並不能引起注意,那我們可以放置乙個動態的點,類似於在水中投入乙個石頭,水波擴散的效果,象徵發生的事件有一定的影響區域,那麼,我們如何利用 openlayers3 做出這樣的效果呢?我們要實現的效果如下圖,之前雅安發生過 我們在雅安放置乙個這...