polestar-gis
v0.1.39
Published
极星地图
Readme
polestar-gis 使用文档
1文档概述
1.1目的
使用 polestar 能快速上手，不用老是看源码，让项目能快速有效进行。
1.2 开发环境
vue3、vite、ts、git、cesium
2 快速上手
**2.**1 拷贝 SDK 到项目中
2.2修改 html 页面 head 增加静态资源引入
2.3增加 DIV 展示容器
2.4 创建地图对象
2.5 完成集成
3 基础
3.1 基础类
BaseClass 是所有类的基类，所有类都继承于 BaseClass，BaseClass 提供了一些通用的方法和基础属性，具体如下：
| 属性名称 | 类型 | 描述信息 | | -------- | ----------- | ---------------------------------------------------------------------------- | | id | string | - | | name | string | - | | type | string | 类型 | | map | PolestarMap | 所属地图 | | status | string | 状态 primeval: 初始, added: 已添加到地图, removed: 已移除, destroyed: 已销毁 | | -------- | ----------- | ---------------------------------------------------------------------------- |
| 方法名称 | 参数 | 描述信息 | | ------------------- | ------------------- | ---------------------- | | addEventListener | eventType, function | 绑定指定类型事件监听器 | | removeEventListener | eventType, function | 解除指定类型事件监听器 | | on | eventType, function | 同 addEventListener | | off | eventType, function | 同 removeEventListener | | once | eventType, function | 绑定指定类型事件监听器 | | clearEventListeners | - | 清除所有事件监听器 | | triggerEvent | eventType, args | 触发指定类型事件 | | ------------------- | -------- | ---------------------- |
3.2 地图图层
BaseLayer 是所有图层的基类，所有图层都继承于 BaseLayer，BaseLayer 提供承载了图层的基础属性，具体如下：
| 属性名称 | 类型 | 描述信息
| options | object | 构造函数参数 |
| group | GroupLayer | 所属分组 |
| show | boolean | 是否显示 |
| ---- | ------- | ------- |
ImageryLayer 是所有影像图层的基类，所有影像图层都继承于 ImageryLayer | 方法名称 | 参数 | 描述信息 | | addTo | PolestarMap|GroupLayer | 添加至 Map 或分组 | | -------- | ---- | -------- |
3.3 相机及视角
3.4 事件机制
polestar 内 map、GraphicLayer、entity 支持事件的绑定、解绑、触发等统一的事件机制，事件类型参考下表：
| 属性名称 | 类型 | 描述信息 | | --------------- | ------ | ----------------------------------------------------- | | click | string | 左键单击 鼠标事件 | | leftDown | string | 左键鼠标按下 鼠标事件 | | leftUp | string | 左键鼠标按下后释放 鼠标事件 | | leftDoubleClick | string | 左键鼠标双击事件 | | rightClick | string | 右键单击 鼠标事件 | | rightDown | string | 右键鼠标按下 鼠标事件 | | rightUp | string | 右键鼠标按下后释放 鼠标事件 | | middleDown | string | 中键鼠标按下 鼠标事件 | | middleUp | string | 中键鼠标按下后释放 鼠标事件 | | middleClick | string | 中键单击 鼠标事件 | | wheel | string | 鼠标滚轮滚动 鼠标事件 | | mouseMove | string | 鼠标移动 鼠标事件 | | load | string | 完成加载，执行所有内部处理后 | | clickGraphic | string | 左键单击到矢量或模型数据时 鼠标事件 | | clickMap | string | 左键单击地图空白（未单击到矢量或模型数据）时 鼠标事件 | | cameraMoveEnd | string | 相机移动完成后 场景事件 | | mouseOver | string | 鼠标移入 鼠标事件 | | mouseOut | string | 鼠标移出 鼠标事件 | | editRemovePoint | string | 编辑删除了点 标绘事件 | | editStart | string | 开始编辑 标绘事件 | | editStop | string | 停止编辑 标绘事件 | | editMovePoint | string | 编辑修改了点（LEFT_UP）标绘事件 | | removeGraphic | string | 移除矢量数据时[图层上监听时使用] |
3.4.1 事件的相关类
事件方法中使用到所有支持的事件类型，都统一定义在上表中。在每个对应类的 API 中都会说明当前类所支持的事件类型，具体参阅各类的 API 文档。
事件订阅
通过 obj.on(types, fn) 或者 obj.addEventListener(types, fn) 方法订阅事件， 参数如下：
/** * 绑定指定类型事件监听器, * 支持在监听中调用 event.stopPropagation(); 阻止事件冒泡 * * @param {cesiumEvent|string} types 事件类型 * @param {Function} fn 绑定的监听器回调方法 * @return {BaseClass} 当前对象本身,可以链式调用 * */ on(types, fn); addEventListener(types, fn); // 只执行一次 once(types, fn);事件取消订阅
通过 obj.off(types, fn) 或者 obj.removeEventListener(types, fn) 方法订阅事件， 参数如下：
/** * 绑定指定类型事件监听器, * 支持在监听中调用 event.stopPropagation(); 阻止事件冒泡 * * @param {cesiumEvent|string} types 事件类型 * @param {Function} fn 绑定的监听器回调方法 * @return {BaseClass} 当前对象本身,可以链式调用 * */ off(types, fn); removeEventListener(types, fn); // 清除所有事件订阅 clearEventListeners();使用实例
下面，我们以 map 对象为例，绑定一个事件做示例：
function map_loadHandler(event) { console.log("地图加载完成", event); } // on绑定事件 map.on(cesiumEvent.load, map_loadHandler); // off移除事件 map.off(cesiumEvent.load, map_loadHandler);
3.4.2map 类的事件
目前 Map 支持的事件类型如下：
| 属性名称 | 类型 | 描述信息 | | --------------- | ------ | ----------------------------------------------------- | | click | string | 左键单击 鼠标事件 | | leftDown | string | 左键鼠标按下 鼠标事件 | | leftUp | string | 左键鼠标按下后释放 鼠标事件 | | leftDoubleClick | string | 左键鼠标双击事件 | | rightClick | string | 右键单击 鼠标事件 | | rightDown | string | 右键鼠标按下 鼠标事件 | | rightUp | string | 右键鼠标按下后释放 鼠标事件 | | middleDown | string | 中键鼠标按下 鼠标事件 | | middleUp | string | 中键鼠标按下后释放 鼠标事件 | | middleClick | string | 中键单击 鼠标事件 | | wheel | string | 鼠标滚轮滚动 鼠标事件 | | mouseMove | string | 鼠标移动 鼠标事件 | | load | string | 地图完成加载，执行所有内部处理后 | | clickGraphic | string | 左键单击到矢量或模型数据时 鼠标事件 | | clickMap | string | 左键单击地图空白（未单击到矢量或模型数据）时 鼠标事件 | | cameraMoveEnd | string | 相机移动完成后 场景事件 | | mouseOver | string | 鼠标移入 鼠标事件 | | mouseOut | string | 鼠标移出 鼠标事件 |
3.4.3 图层类的事件
图层类型可以绑定多种事件，我们以最常用的 GraphicLayer 图层为例：
| 属性名称 | 类型 | 描述信息 | | --------------- | ------ | ----------------- | | click | string | 左键单击 鼠标事件 | | leftDoubleClick | string | 左键鼠标双击事件 | | rightClick | string | 右键单击 鼠标事件 | | middleClick | string | 中键单击 鼠标事件 | | mouseMove | string | 鼠标移动 鼠标事件 | | mouseOver | string | 鼠标移入 鼠标事件 | | mouseOut | string | 鼠标移出 鼠标事件 |
3.4.4 矢量数据类的事件
目前 Entity 矢量数据支持的事件类型如下：
| 属性名称 | 类型 | 描述信息 | | --------------- | ------ | -------------------------------- | | click | string | 左键单击 鼠标事件 | | leftDoubleClick | string | 左键鼠标双击事件 | | rightClick | string | 右键单击 鼠标事件 | | middleClick | string | 中键单击 鼠标事件 | | mouseMove | string | 鼠标移动 鼠标事件 | | mouseOver | string | 鼠标移入 鼠标事件 | | mouseOut | string | 鼠标移出 鼠标事件 | | editRemovePoint | string | 编辑删除了点 标绘事件 | | editStart | string | 开始编辑 标绘事件 | | editStop | string | 停止编辑 标绘事件 | | editMovePoint | string | 编辑修改了点（LEFT_UP）标绘事件 | | removeGraphic | string | 移除矢量数据时[图层上监听时使用] |