EaseMap.js

• OOP + Class 编程范式

• TypeScript开发

• 一套 Interfacce 实现 Openlayer, Cesium 图层加载,图层操作

• 地图类 基于Abstract类开发, 未来可支持更多类型的 地图库.

地图开发的现状

• 地图服务多种格式 - 对于非地图开发者,仅仅凭官网的加载范例,完全解决不了需求问题

• 地图服务各类格式参数不一致 - rest,wms,wmts 在二维，三维配置的参数均不一样.

• 二三维需独立开发 - 开发了二维,项目要三维, 又得重新开发 三维的地图.

• 二三维 API不统一 - 就算对二维有一些经验, 三维的开发依旧受阻,国内文档较少, StackOverflow 和 Github Issue 的解决方案较多

• geojson 数据量大 - 一旦涉及到超大量点,多面数据 或 线有形状等需求时,性能将会是一个巨大的挑战

EaseMap.js 解决了什么问题

• 一个方法即可加载地图服务

  • 我们针对 市面上的 IServer, GeoServer,Arcgis的服务, 均封装了实现方法, 并优化了参数配置.

• 一个属性即可实现二三维联动

  • 框架可支持 纯二维，纯三维, 二三维,不再需要二次开发三维 或 二维。

• 一套 API 实现二三维操作

  • 我们将根据当前维度 自动选择对应策略: 全幅, 绘制, 卷帘等

• 多种监听方式

  • 框架里提供了 观察者模式 和 发布订阅模式 两种通信机制: 监听图层改变,监听地图点击 等

• 完善的优化方案

  • 异形线(提供了 三角形, 矩形， 半圆等形状可直接使用),在大数据量下采用了 时间分片 + Webworker异步计算 的加载方式, 可稳定帧数,
  • 对于不需要编辑的对象, 我们用 Primitive 替换了 Cesium 里的Entity, 利用 Primitive 可直接使用 GPU + 一张合成层的特性
  • 我们重构了三维的绘制, 满足了绘图时可贴地和不贴地需求( 2022/07/27 官网的依旧是腾空绘制,不过绘制完毕之后可贴地)

EaseMap.js如何使用

依赖引入

由于依赖window 上的 Openlayer 与 Cesium,根据项目需求，我们要提前引入js和css(easeMap/public)

<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.baseUrl %>/Cesium/widgets/widgets.css"></link>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.baseUrl %>/openlayer/css/ol.css"></link>
<script src="<%= htmlWebpackPlugin.options.baseUrl %>/openlayer/ol-6.4.3.js"></script>
<script src="<%= htmlWebpackPlugin.options.baseUrl %>/openlayer/iclient-openlayers.min.js"></script>
<script src="<%= htmlWebpackPlugin.options.baseUrl %>/Cesium/Cesium.js"></script>

EaseMap 引入

EaseMap 产物为 UMD 格式, 所以可以通过以下方式引入

import 引入

import EaseMap from '{path}/easeMap'
const EaseMapInstance = new EaseMap(options)
...

script 标签引入

<script src="{path}/easeMap/index.js"></script>
<script>
    const easeMapInstance = new window.EaseMap(option)
    ...
</script>  

require 方式引入

require(['{path}/easeMap/index.js'],function(EaseMap){
  const easeMapInstance = new EaseMap(option)
  ...
})

创建实例

根据 option 参数创建实例, 由于TypeScript的 .d.ts加持, option 可直接查看其参数

// 生成地图组件基本配置
export interface baseOptions {
id: string; // container
onlyMode?: '2D' | '3D' // 是否只显示二维或三维
defaultMode?: '2D' | '3D' // 默认显示几维,
olConfig?: {      // ol 配置
controls?: Array<controlType>
},
cesiumConfig?: {   // cesium 配置
terrainUrl?: string;
[propName: string]: any
}
}

例子:
  const easeMapInst = new EaseMap({id: 'yourDomBoxId'})
  ...

地图方法

https://www.yuque.com/condee/mq1nfu/xr6h8d