OpenLayers3自定义编译

自定义编译背景

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始终是需要的。


You may also like...