OpenLayers3自定义编译

2022-05-08 04:45:51

自定义编译背景

OpenLayers3地图开发库功能非常强大，所以有个问题，就是它非常的大。体积大一向吃了很多亏，比如百度“适合移动端的js地图库”，很多人都会向你推荐Leaflet，原因是小巧。这正是冤枉啊，岂不知道ol3重新的，是要加强对移动端的支持啊，所有，没有mousemove之类的事件，定义为pointemove事件啊，这是为了pc与移动端都能使用啊，我们再也不能忽视ol3开发者们的良苦用心。其次由于很多webgis只使用了ol3部分功能，用不到其所有的库，那么遵照“按需加载”原则，是否可以只将项目中引用到的ol3依赖库重新编译出来？这当然是可以的，而且自定义编译一定是个瘦身的过程，那么究竟如何操作，请看以下步骤。

自定义编译步骤

安装nodejs

windows安装后一路next，linux其他参考官网。
安装完成，在Node.js command prompt控制台中输入

node -v

打印nodejs安装版本号，确定环境具备。

下载OpenLayers3

在Node.js command prompt控制台中，比如选择在E盘下载：

$ cd e:
$ e:
$ mkdir openlayers3 --新建一个文件夹
$ npm install openlayers --下载ol

等待npm下载完成。

选择依赖的包

仔细看下面的例子

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  controls: ol.control.defaults({
    attributionOptions: {
      collapsible: false
    }
  }),
  view: new ol.View({
    center: [0, 0],
    zoom: 4
  })
});

简例中使用了ol.Map,ol.View,ol.control.defaults,ol.layer.Tile,ol.source.OSM，那么我们就抽取使用的库，自定义一个json文件ol-custom.json，放到openlayers/node_modules/openlayers/build中，内容如下：

{
  "exports": [
    "ol.Map",
    "ol.View",
    "ol.control.defaults",
    "ol.layer.Tile",
    "ol.source.OSM"
  ],
  "compile": {
    "externs": [
      "externs/oli.js",
      "externs/olx.js"
    ],
    "define": [
      "goog.DEBUG=false"
    ],
    "extra_annotation_name": [
      "api", "observable"
    ],
    "compilation_level": "ADVANCED",
    "manage_closure_dependencies": true
  }
}

自定义打包

$ cd openlayers/node_modules/openlayers
$ node tasks/build.js build/ol-custom.json build/ol-custom.js

在build中可以看到打包后的文件大小。

自定义参数说明

exports:程序中使用到的包。
externs:依赖的外部的一些包，oli.js，olx.js是OpenLayers 3 API的外部文件，在自定义编译时，这两个文件始终是需要的。 "externs/proj4js.js","externs/tilejson.js","externs/topojson.js"等等如果在代码开发中使用到了，需要在externs加进来。
define：设置一些常量为false，这样的话，编译的包会更小。比如默认情况下，ol3的三种渲染形式，以及所有的layer类型都会打包进来，但是，我们只需要一种渲染，一种图层类型，本定义便是为此而生。"compilation_level": "ADVANCED"模式，会将默认的没用上的渲染和图层类型移除，所以可以设置以下常量为false：

      "ol.ENABLE_DOM=false",
      "ol.ENABLE_WEBGL=false",
      "ol.ENABLE_PROJ4JS=false",
      "ol.ENABLE_IMAGE=false",
      "ol.ENABLE_VECTOR=false",

然后运行脚本编译。
其他编译选项:manage_closure_dependencies始终是需要的。

码农公寓