-
OOP + Class 编程范式
-
TypeScript开发
-
一套 Interfacce 实现 Openlayer, Cesium 图层加载,图层操作
-
地图类 基于Abstract类开发, 未来可支持更多类型的 地图库.
-
地图服务多种格式 - 对于非地图开发者,仅仅凭官网的加载范例,完全解决不了需求问题
-
地图服务各类格式参数不一致 - rest,wms,wmts 在二维,三维配置的参数均不一样.
-
二三维需独立开发 - 开发了二维,项目要三维, 又得重新开发 三维的地图.
-
二三维 API不统一 - 就算对二维有一些经验, 三维的开发依旧受阻,国内文档较少, StackOverflow 和 Github Issue 的解决方案较多
-
geojson 数据量大 - 一旦涉及到超大量点,多面数据 或 线有形状等需求时,性能将会是一个巨大的挑战
-
- 我们针对 市面上的 IServer, GeoServer,Arcgis的服务, 均封装了实现方法, 并优化了参数配置.
-
- 框架可支持 纯二维,纯三维, 二三维,不再需要二次开发三维 或 二维。
-
- 我们将根据当前维度 自动选择对应策略: 全幅, 绘制, 卷帘等
-
- 框架里提供了 观察者模式 和 发布订阅模式 两种通信机制: 监听图层改变,监听地图点击 等
-
- 异形线(提供了 三角形, 矩形, 半圆等形状可直接使用),在大数据量下采用了 时间分片 + Webworker异步计算 的加载方式, 可稳定帧数,
- 对于不需要编辑的对象, 我们用 Primitive 替换了 Cesium 里的Entity, 利用 Primitive 可直接使用 GPU + 一张合成层的特性
- 我们重构了三维的绘制, 满足了绘图时可贴地和不贴地需求( 2022/07/27 官网的依旧是腾空绘制,不过绘制完毕之后可贴地)
由于依赖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 产物为 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