OpenLayers3自定义编译

简介: 自定义编译背景OpenLayers3地图开发库功能非常强大,所以有个问题,就是它非常的大。体积大一向吃了很多亏,比如百度“适合移动端的js地图库”,很多人都会向你推荐Leaflet,原因是小巧。

自定义编译背景

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


相关文章
|
编解码 程序员 atlas
Unity 之 图集属性详解和代码示例 -- 拓展一键自动打包图集工具
图集只是当所有给低昂的纹理需要相同的着色器时采用的一种方法,如果一些纹理需要通过着色器应用独立的图形效果,它们就必须分离到自己的材质中,并在单独的组中打图集。
1425 0
Unity 之 图集属性详解和代码示例 -- 拓展一键自动打包图集工具
|
5月前
|
算法 图形学
Unity——DOTween插件使用方法简介
Unity——DOTween插件使用方法简介
246 0
|
11月前
|
JavaScript 前端开发 C++
JavaScript 调用 C++/Qt 工程(附有代码 + demo)
JavaScript 调用 C++/Qt 工程(附有代码 + demo)
|
存储 JSON API
Qt开发技术:Qt的动态静态插件框架介绍和Demo
Qt开发技术:Qt的动态静态插件框架介绍和Demo
Qt开发技术:Qt的动态静态插件框架介绍和Demo
PyQt5 图形界面 - Qt Designer创建qrc资源文件引用图片资源实例演示,QTextBrower组件引用图片资源方法展示
PyQt5 图形界面 - Qt Designer创建qrc资源文件引用图片资源实例演示,QTextBrower组件引用图片资源方法展示
351 0
PyQt5 图形界面 - Qt Designer创建qrc资源文件引用图片资源实例演示,QTextBrower组件引用图片资源方法展示
|
XML 程序员 C语言
Qt编写控件属性设计器1-加载插件
一、前言 加载插件是整个属性设计器的第一步要打通的功能,插件中的控件都加载不了,后面就别搞别玩下去了没法玩的,要从一个动态库中加载出来控件,肯定需要用到反射机制,以前做.NET开发的时候就觉得反射这个东西相当强大,居然可以读取DLL加载出来控件,现在用Qt,发现Qt也有反射机制,也许这东东可能各大.
1009 0
|
JavaScript 开发者 索引
高自定义的小程序 UI 组件库 wuss-weapp
如何使用 方法一 [推荐] (通过npm安装依赖并在小程序构建npm模块) 通过使用shell命令或git定位到当前小程序开发目录,然后使用npm或者yarn安装依赖。npm install --production wuss-weapp 或者 当依赖安装完成后即可在微信小程序开发者工具里点击 [工具] => [构建npm],此时若出现弹窗则记得吧 “使用npm模块” 勾上,若无弹窗则待构建完成后在详情里面手动勾上 “使用npm模块”。
2129 0
openlayers加载动态ArcGIS服务
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82853801 openlaye...
1927 0
openlayers5之加载KML数据
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/81989496 openlayer...
1395 0