|
|
@@ -7,9 +7,8 @@
|
|
|
|
|
|
/* 引入Cesium */
|
|
|
import * as Cesium from 'cesium';
|
|
|
-import {
|
|
|
- type
|
|
|
-} from 'jquery';
|
|
|
+/* 引入地理工具箱 */
|
|
|
+import * as turf from '@turf/turf'
|
|
|
|
|
|
/* 扩展 Cesium.GroundPrimitive 给其添加objId属性*/
|
|
|
|
|
|
@@ -30,6 +29,42 @@ Cesium.Primitive.prototype.getUseGeometry = function() {
|
|
|
return this._useGeometry;
|
|
|
}
|
|
|
|
|
|
+/* 扩展Cesium.Entity 为其添加类型属性 用来标识该点属于可编辑点*/
|
|
|
+
|
|
|
+/**
|
|
|
+ * 设置编辑点类型
|
|
|
+ * @param {options} options 配置项
|
|
|
+ * @param {SketchViewModel.SketchEditType} options.type 类型
|
|
|
+ * @param {Number} options.index 索引
|
|
|
+ */
|
|
|
+Cesium.Entity.prototype.setEditType = function(options) {
|
|
|
+ this._editType = options;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取编辑点类型
|
|
|
+ * @return {SketchViewModel.SketchEditType} 编辑点类型
|
|
|
+ */
|
|
|
+Cesium.Entity.prototype.getEditType = function() {
|
|
|
+ return this._editType;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 设置实体挂接的数据类型
|
|
|
+ * @param {SketchViewModel.SketchEntityType} entityType 实体挂接的数据类型
|
|
|
+ */
|
|
|
+Cesium.Entity.prototype.setEntityType = function(entityType) {
|
|
|
+ this._entityType = entityType;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取实体挂接的数据类型
|
|
|
+ * @@return {SketchViewModel.SketchEntityType} 实体挂接的数据类型
|
|
|
+ */
|
|
|
+Cesium.Entity.prototype.getEntityType = function(entityType) {
|
|
|
+ return this._entityType;
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
* 类
|
|
|
*/
|
|
|
@@ -1788,6 +1823,30 @@ Object.assign(SketchViewModel.prototype, {
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
+ * 注册鼠标左键按下事件
|
|
|
+ * @param {Cesium.ScreenSpaceEventHandler} handler 事件句柄
|
|
|
+ * @param {Function} callChange 回调callChange(event)
|
|
|
+ */
|
|
|
+ _registerLeftDownEvent: function(handler, callChange) {
|
|
|
+ if (!handler) return;
|
|
|
+ handler.setInputAction(function(event) {
|
|
|
+ if (callChange) callChange(event);
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 注册鼠标左键抬起事件
|
|
|
+ * @param {Cesium.ScreenSpaceEventHandler} handler 事件句柄
|
|
|
+ * @param {Function} callChange 回调callChange(event)
|
|
|
+ */
|
|
|
+ _registerLeftUpEvent: function(handler, callChange) {
|
|
|
+ if (!handler) return;
|
|
|
+ handler.setInputAction(function(event) {
|
|
|
+ if (callChange) callChange(event);
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_UP);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
* 清除事件
|
|
|
* @param {Cesium.ScreenSpaceEventHandler} handler
|
|
|
*/
|
|
|
@@ -2614,6 +2673,7 @@ Object.assign(SketchViewModel.prototype, {
|
|
|
*/
|
|
|
sketchClear: function() {
|
|
|
this._clear(true);
|
|
|
+ this._clearEditPoint();
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -2624,6 +2684,548 @@ Object.assign(SketchViewModel.prototype, {
|
|
|
}
|
|
|
})
|
|
|
|
|
|
+/**
|
|
|
+ * 鼠标跟随标签相关
|
|
|
+ */
|
|
|
+Object.assign(SketchViewModel.prototype, {
|
|
|
+ /**
|
|
|
+ * 提示标签初始化
|
|
|
+ * @param {String} text 显示的文本内容
|
|
|
+ * @param {JSON} mousePosition 鼠标位置
|
|
|
+ */
|
|
|
+ _tooltipInit: function(text, mousePosition) {
|
|
|
+ let _self = this;
|
|
|
+ this._tooltipId = 'tooltipSketchmodel';
|
|
|
+ let tooltipObj = document.getElementById(this._tooltipId);
|
|
|
+ if (tooltipObj === null) {
|
|
|
+ tooltipObj = document.createElement('div');
|
|
|
+ tooltipObj.id = this._tooltipId;
|
|
|
+ document.body.appendChild(tooltipObj);
|
|
|
+ let divStyle = '';
|
|
|
+ divStyle += "top: 30px;";
|
|
|
+ divStyle += "left: 30px;";
|
|
|
+ divStyle += "position: absolute;";
|
|
|
+ divStyle += "display: flex;";
|
|
|
+ divStyle += "align-items: center;";
|
|
|
+ divStyle += "width: 12x0px;";
|
|
|
+ divStyle += "height: auto;";
|
|
|
+ divStyle += "background-color: rgba(0, 0, 0, 0.65);";
|
|
|
+ divStyle += "border-radius: 5px;";
|
|
|
+ divStyle += "color: rgb(255, 255, 255);";
|
|
|
+ divStyle += "font-size: 12px;";
|
|
|
+ divStyle += "font-family: 'Alimama_ShuHeiTi_Bold';";
|
|
|
+ divStyle += "padding: 8px;";
|
|
|
+ divStyle += "border:solid 1px rgb(255,0,0);";
|
|
|
+ tooltipObj.setAttribute('style', divStyle);
|
|
|
+ }
|
|
|
+ if (text != undefined) tooltipObj.innerHTML = text;
|
|
|
+ if (mousePosition === undefined) {
|
|
|
+ /* 挂接鼠标移动事件 */
|
|
|
+ document.onmousemove = function(event) {
|
|
|
+ tooltipObj.style.left = (event.clientX + 10) + 'px';
|
|
|
+ tooltipObj.style.top = (event.clientY - tooltipObj.offsetHeight / 2) + 'px';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ tooltipObj.style.left = (mousePosition.x + 10) + 'px';
|
|
|
+ tooltipObj.style.top = (mousePosition.y - tooltipObj.offsetHeight / 2) + 'px';
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 移除提示标签
|
|
|
+ */
|
|
|
+ _tooltipRemove: function() {
|
|
|
+ let tooltipObj = document.getElementById(this._tooltipId);
|
|
|
+ if (tooltipObj != null) {
|
|
|
+ document.body.removeChild(tooltipObj);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 设置提示标签文本
|
|
|
+ * @param {String} text 文本
|
|
|
+ * @param {JSON} mousePosition 鼠标位置
|
|
|
+ */
|
|
|
+ _tooltipSetText: function(text, mousePosition) {
|
|
|
+ let tooltipObj = document.getElementById(this._tooltipId);
|
|
|
+ if (tooltipObj != null) {
|
|
|
+ if (text != undefined) tooltipObj.innerHTML = text;
|
|
|
+ if (mousePosition != undefined) {
|
|
|
+ tooltipObj.style.left = (mousePosition.x + 10) + 'px';
|
|
|
+ tooltipObj.style.top = (mousePosition.y - tooltipObj.offsetHeight / 2) + 'px';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 设置鼠标为十字样式
|
|
|
+ */
|
|
|
+ _setMousePointerStyle: function() {
|
|
|
+ document.querySelector('body').style.cursor = 'crosshair';
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 恢复鼠标指针为默认样式
|
|
|
+ */
|
|
|
+ _setMouseDefaultStyle: function() {
|
|
|
+ document.querySelector('body').style.cursor = 'default';
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+/* 绘制编辑图形相关 */
|
|
|
+Object.assign(SketchViewModel.prototype, {
|
|
|
+ /**
|
|
|
+ * 绘制线工具
|
|
|
+ * @param {Object} handler 事件句柄
|
|
|
+ * @param {JSON} options 配置项
|
|
|
+ * @param {Function} [options.onAdded(cPoints,gPoints)] 添加回调 可选
|
|
|
+ * @param {Function} [options.onMoving(cPoint)] 移动回调 可选
|
|
|
+ * @param {Function} [options.onUndo()] 撤销回调 可选
|
|
|
+ * @param {Function} [options.onComplete(cPoints,gPoints)] 完成回调 可选
|
|
|
+ * @param {Function} [options.onError(message)] 错误回调 可选
|
|
|
+ */
|
|
|
+ _sketchDrawEditPolyline(handler, options) {
|
|
|
+ let _self = this;
|
|
|
+ /* 注册鼠标左键点击事件 */
|
|
|
+ this._registerLeftClickEvent(handler, function(event) {
|
|
|
+ /* 识别屏幕位置 */
|
|
|
+ let loc = _self._transfromFromScreenPoint(event.position);
|
|
|
+ if (!Cesium.defined(loc.sLocation)) return;
|
|
|
+ /* 绘制点 */
|
|
|
+ if (_self._isDrawPoint) {
|
|
|
+ _self._createPoint(loc.sLocation, _self._lineLabel);
|
|
|
+ }
|
|
|
+ /* 第一点击的时候绘制线 */
|
|
|
+ if (_self._sketchTempPoints.length === 0) {
|
|
|
+ _self._createTempPolyline();
|
|
|
+ _self._sketchTempPoints.push(loc.sLocation.clone());
|
|
|
+ }
|
|
|
+ _self._sketchTempPoints.push(loc.sLocation);
|
|
|
+ /* 存储正式绘制点集合 */
|
|
|
+ _self._sketchPoints.push(loc.sLocation.clone());
|
|
|
+ /* 存储输出经纬度点集合 */
|
|
|
+ _self._sketchOutputPoints.push(loc.gLocation);
|
|
|
+ /* 监听输出 */
|
|
|
+ if (options.onAdded) options.onAdded(_self._sketchPoints, _self
|
|
|
+ ._sketchOutputPoints);
|
|
|
+ })
|
|
|
+ /* 注册鼠标移动事件 */
|
|
|
+ this._registerMouseMoveEvent(handler, function(event) {
|
|
|
+ /* 识别屏幕位置 */
|
|
|
+ let loc = _self._transfromFromScreenPoint(event.endPosition);
|
|
|
+ if (!Cesium.defined(loc.sLocation)) return;
|
|
|
+ if (Cesium.defined(_self._sketchTempPolyline)) {
|
|
|
+ _self._sketchTempPoints.pop();
|
|
|
+ _self._sketchTempPoints.push(loc.sLocation);
|
|
|
+ /* 监听输出 */
|
|
|
+ if (options.onMoving) options.onMoving(loc.sLocation);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /* 注册鼠标右键点击事件 */
|
|
|
+ this._registerRightClickEvent(handler, function(event) {
|
|
|
+ if (_self._sketchTempPoints.length > 2) {
|
|
|
+ /* 移除正式点最有一个元素 */
|
|
|
+ _self._sketchPoints.pop();
|
|
|
+ /* 移除临时点倒数第二个元素 */
|
|
|
+ _self._sketchTempPoints.splice(_self._sketchTempPoints.length - 2, 1);
|
|
|
+ /* 如果绘制了点 则删除最后一个 */
|
|
|
+ if (_self._isDrawPoint) {
|
|
|
+ let lastPointEntity = _self._pointEntitys[_self._pointEntitys.length - 1];
|
|
|
+ _self._entities.remove(lastPointEntity);
|
|
|
+ /* 移除点实体数据中的最后一条数据 */
|
|
|
+ _self._pointEntitys.pop();
|
|
|
+ }
|
|
|
+ if (options.onUndo) options.onUndo();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /* 注册鼠标左键双击事件 */
|
|
|
+ this._registerLeftDoubleClickEvent(handler, function(event) {
|
|
|
+ if (_self._sketchPoints.length < 2) {
|
|
|
+ if (options.onError) options.onError('点数少于两个，禁止结束绘制！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ /* 删除临时线 */
|
|
|
+ _self._removeEntityByObject(_self._sketchTempPolyline);
|
|
|
+ /* 绘制正式线 */
|
|
|
+ _self._createEditPolyline();
|
|
|
+ /* 删除标记点 */
|
|
|
+ _self._removePointEntitys();
|
|
|
+ /* 干掉事件句柄 释放资源*/
|
|
|
+ _self._clearEvent(handler);
|
|
|
+ /* 监听输出 */
|
|
|
+ if (options.onComplete) options.onComplete(_self._sketchPoints, _self
|
|
|
+ ._sketchOutputPoints);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建编辑线
|
|
|
+ */
|
|
|
+ _createEditPolyline() {
|
|
|
+ let _self = this;
|
|
|
+ /* 创建编辑线 */
|
|
|
+ let polylineEntity = new Cesium.Entity({
|
|
|
+ name: _self._sketchEntityName,
|
|
|
+ polyline: {
|
|
|
+ show: true,
|
|
|
+ positions: _self._sketchPoints,
|
|
|
+ material: _self._lineMaterial,
|
|
|
+ width: _self._param.lineWidth,
|
|
|
+ clampToGround: true, //开启贴地 如果有模型则贴模型
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //创建编辑面
|
|
|
+ // let polylineEntity = new Cesium.Entity({
|
|
|
+ // name: _self._sketchEntityName,
|
|
|
+ // polygon: {
|
|
|
+ // show: true,
|
|
|
+ // hierarchy: {
|
|
|
+ // positions: _self._sketchPoints,
|
|
|
+ // },
|
|
|
+ // material: _self._polygonMaterial,
|
|
|
+ // clampToGround: true, //开启贴地 如果有模型则贴模型
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ let entity = this._entities.add(polylineEntity);
|
|
|
+ /* 测试 */
|
|
|
+ this._unActivateEdit();
|
|
|
+ this._activateEdit(entity);
|
|
|
+ /* 注册一个事件 用于选择拾取和点击 */
|
|
|
+ let handler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
|
|
|
+ this._registerLeftClickEvent(handler, function(event) {
|
|
|
+ console.log("点击了全局事件======");
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 判断并设置实体的数据类型
|
|
|
+ * @param {Cesium.Entity} entity 实体
|
|
|
+ * @return {Array<Cesium.Cartesian3>} positions
|
|
|
+ */
|
|
|
+ _setEntityType: function(entity) {
|
|
|
+ if (entity instanceof Cesium.Entity) {
|
|
|
+ if (entity.polyline != undefined) {
|
|
|
+ entity.setEntityType(SketchViewModel.SketchEntityType.Polyline);
|
|
|
+ return entity.polyline.positions._value;
|
|
|
+ } else if (entity.polygon != undefined) {
|
|
|
+ entity.setEntityType(SketchViewModel.SketchEntityType.Polygon);
|
|
|
+ let positions = entity.polygon.hierarchy._value.positions;
|
|
|
+ positions.push(positions[0].clone());
|
|
|
+ return positions;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 取消激活状态
|
|
|
+ */
|
|
|
+ _unActivateEdit: function() {
|
|
|
+ this._clearEditPoint();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 激活编辑
|
|
|
+ * @param {Cesium.Entity} editEntity 编辑实体
|
|
|
+ */
|
|
|
+ _activateEdit: function(editEntity) {
|
|
|
+ let _self = this;
|
|
|
+ /* 设置实体类型 */
|
|
|
+ let positions = this._setEntityType(editEntity);
|
|
|
+ /* 获取编辑类型 */
|
|
|
+ let entityType = editEntity.getEntityType();
|
|
|
+ /* 不可编辑对象 直接退出 */
|
|
|
+ if (entityType === undefined) return;
|
|
|
+ /* 赋值可编辑对象 */
|
|
|
+ this._editEntity = editEntity;
|
|
|
+ /* 创建编辑点集合并绘制展示 */
|
|
|
+ this._createEditPoint(positions);
|
|
|
+ /* 创建事件句柄 */
|
|
|
+ if (this._sketchEditHandler === undefined) {
|
|
|
+ this._sketchEditHandler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
|
|
|
+ }
|
|
|
+ /* 注册鼠标左键按下事件 */
|
|
|
+ this._registerLeftDownEvent(this._sketchEditHandler, function(event) {
|
|
|
+ /* 拾取实体 */
|
|
|
+ let feature = _self._viewer.scene.pick(event.position);
|
|
|
+ /* 分类处理 */
|
|
|
+ if (feature != undefined && feature.id instanceof Cesium.Entity) {
|
|
|
+ /* 获取选择实体的样式 */
|
|
|
+ let featureType = feature.id.getEditType();
|
|
|
+ /* 说明选择的点不是我们需要编辑的点 */
|
|
|
+ if (featureType === undefined) return;
|
|
|
+ /* 位置信息 */
|
|
|
+ let entityPosition = undefined;
|
|
|
+ /* 判断类型 是节点或中点 进行不同的操作 */
|
|
|
+ if (featureType.type === SketchViewModel.SketchEditType.Node || featureType.type ===
|
|
|
+ SketchViewModel.SketchEditType.Middle) {
|
|
|
+ /* 获取位置 */
|
|
|
+ entityPosition = feature.id.position._value;
|
|
|
+ /* 禁用场景的旋转移动功能 保留缩放功能 */
|
|
|
+ _self._viewer.scene.screenSpaceCameraController.enableRotate = false;
|
|
|
+ /* 保存当前可编辑的实体 */
|
|
|
+ _self._editPointEntity = feature.id;
|
|
|
+ /* 设置鼠标样式为十字 */
|
|
|
+ _self._setMousePointerStyle();
|
|
|
+ /* 更改编辑实体的坐标数据获取方式 */
|
|
|
+ let entityType = _self._editEntity.getEntityType();
|
|
|
+ if (entityType === SketchViewModel.SketchEntityType.Polyline) {
|
|
|
+ _self._editEntity.polyline.positions = new Cesium.CallbackProperty(
|
|
|
+ function() {
|
|
|
+ return _self._sketchEditPoints;
|
|
|
+ }, false);
|
|
|
+ } else if (entityType === SketchViewModel.SketchEntityType.Polygon) {
|
|
|
+ _self._editEntity.polygon.hierarchy = new Cesium.CallbackProperty(
|
|
|
+ function() {
|
|
|
+ return {
|
|
|
+ positions: _self._sketchEditPoints,
|
|
|
+ };
|
|
|
+ }, false);
|
|
|
+ }
|
|
|
+ /* 删除当前移动的点 */
|
|
|
+ _self._removeEntityByObject(_self._editPointEntity);
|
|
|
+ }
|
|
|
+ /* 根据节点类型不同进行特殊的处理 */
|
|
|
+ if (featureType.type === SketchViewModel.SketchEditType.Middle) {
|
|
|
+ /* 如果选择的是中点 则插入节点 并记录当前的索引 */
|
|
|
+ let index = featureType.index;
|
|
|
+ _self._sketchEditPoints.splice(index, 0, entityPosition);
|
|
|
+ _self._sketchEditIndex = index;
|
|
|
+ /* 设置提示标签 */
|
|
|
+ _self._tooltipInit('拖动中点，改变线的形状', event.position);
|
|
|
+ } else if (featureType.type === SketchViewModel.SketchEditType.Node) {
|
|
|
+ /* 如果是节点 则直接记录索引 */
|
|
|
+ _self._sketchEditIndex = featureType.index;
|
|
|
+ /* 设置提示标签 */
|
|
|
+ _self._tooltipInit('拖动节点，改变线的形状', event.position);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ /* 注册鼠标移动事件 */
|
|
|
+ this._registerMouseMoveEvent(this._sketchEditHandler, function(event) {
|
|
|
+ if (_self._editPointEntity != undefined) {
|
|
|
+ let loc = _self._transfromFromScreenPoint(event.endPosition);
|
|
|
+ if (!Cesium.defined(loc.sLocation)) return;
|
|
|
+ _self._editPosition = loc.sLocation;
|
|
|
+ /* 获取当前可编辑点的类型 */
|
|
|
+ let editEntityType = _self._editPointEntity.getEditType();
|
|
|
+ if (editEntityType.type === SketchViewModel.SketchEditType.Node) {
|
|
|
+ _self._sketchEditPoints[_self._sketchEditIndex] = loc.sLocation;
|
|
|
+ /* 移除所有中点 */
|
|
|
+ _self._removeEntityByName(_self._sketchEditEntityMiddleName);
|
|
|
+ /* 创建所有中点 */
|
|
|
+ _self._createEditMiddlePoint(_self._sketchEditPoints);
|
|
|
+ } else if (editEntityType.type === SketchViewModel.SketchEditType.Middle) {
|
|
|
+ _self._sketchEditPoints[_self._sketchEditIndex] = loc.sLocation;
|
|
|
+ }
|
|
|
+ /* 更改标签文字 */
|
|
|
+ _self._tooltipInit('抬起鼠标，完成更改', event.endPosition);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /* 注册鼠标抬起事件 */
|
|
|
+ this._registerLeftUpEvent(this._sketchEditHandler, function(event) {
|
|
|
+ if (_self._editPointEntity != undefined) {
|
|
|
+ /* 恢复所有鼠标默认事件 */
|
|
|
+ _self._viewer.scene.screenSpaceCameraController.enableRotate = true;
|
|
|
+ /* 移除标签 */
|
|
|
+ _self._tooltipRemove();
|
|
|
+ /* 恢复鼠标默认样式 */
|
|
|
+ _self._setMouseDefaultStyle();
|
|
|
+ /* 更改线的最终位置 */
|
|
|
+ let entityType = _self._editEntity.getEntityType();
|
|
|
+ if (entityType === SketchViewModel.SketchEntityType.Polyline) {
|
|
|
+ _self._editEntity.polyline.positions = _self._sketchEditPoints;
|
|
|
+ } else if (entityType === SketchViewModel.SketchEntityType.Polygon) {
|
|
|
+ _self._editEntity.polygon.hierarchy = {
|
|
|
+ positions: _self._sketchEditPoints,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ /* 删除节点和中点 */
|
|
|
+ _self._removeEntityByName(_self._sketchEditEntityNodeName);
|
|
|
+ _self._removeEntityByName(_self._sketchEditEntityMiddleName);
|
|
|
+ /* 创建节点和中点 */
|
|
|
+ _self._createEditNodePoint(_self._sketchEditPoints);
|
|
|
+ _self._createEditMiddlePoint(_self._sketchEditPoints);
|
|
|
+ /* 清除选择的实体 */
|
|
|
+ _self._editPointEntity = undefined;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建编辑点
|
|
|
+ * @param {JSON} options 配置项
|
|
|
+ * @param {Cesium.Cartesian3} options.position 位置<必须填写>
|
|
|
+ * @param {Array<Number>} options.color [颜色] 可选
|
|
|
+ * @param {Number} options.size [大小] 可选
|
|
|
+ * @param {Number} options.outlineWidth [边框大小] 可选
|
|
|
+ * @param {Array<Number>} options.outlineColor [边框颜色] 可选
|
|
|
+ * @param {SketchViewModel.SketchEditType} options.editType 编辑点类型<必须填写>
|
|
|
+ * @param {String} options.name [实体的名称] 可选
|
|
|
+ */
|
|
|
+ _createEditPointEntity(options) {
|
|
|
+ let _self = this;
|
|
|
+ if (options === undefined || options.position === undefined) return;
|
|
|
+ if (options === undefined || options.editType === undefined) return;
|
|
|
+ /* 初始化参数 */
|
|
|
+ let color = options.color != undefined ? options.color : [255, 0, 0, 1.0];
|
|
|
+ let size = options.size != undefined && typeof options.size === 'number' ? options.size : 9;
|
|
|
+ let outlineWidth = options.outlineWidth != undefined && typeof options.outlineWidth === 'number' ?
|
|
|
+ options.outlineWidth : 1;
|
|
|
+ let outlineColor = options.outlineColor != undefined ? options.outlineColor : [255, 255, 255, 1.0];
|
|
|
+ /* 创建编辑点 */
|
|
|
+ let pointEntity = new Cesium.Entity({
|
|
|
+ name: options.name != undefined ? options.name : _self._sketchEntityName,
|
|
|
+ position: options.position,
|
|
|
+ point: {
|
|
|
+ show: true,
|
|
|
+ pixelSize: size,
|
|
|
+ heightReference: Cesium.HeightReference.NONE,
|
|
|
+ color: _self._toColorFromArray(color),
|
|
|
+ outlineWidth: outlineWidth,
|
|
|
+ outlineColor: _self._toColorFromArray(outlineColor),
|
|
|
+ disableDepthTestDistance: 1.5e12, //小于该数值后关闭深度检测，默认为空
|
|
|
+ },
|
|
|
+ })
|
|
|
+ /* 这是类型 */
|
|
|
+ pointEntity.setEditType(options.editType);
|
|
|
+ /* 追加到集合中 */
|
|
|
+ _self._entities.add(pointEntity);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建可编辑的节点
|
|
|
+ * @param {Array<Cesium.Cartesian3>} positions 坐标集合
|
|
|
+ */
|
|
|
+ _createEditNodePoint(positions) {
|
|
|
+ let _self = this;
|
|
|
+ /* 创建节点 */
|
|
|
+ this._sketchEditPoints = [];
|
|
|
+ for (let i = 0; i < positions.length; i++) {
|
|
|
+ /* 获取当前点 */
|
|
|
+ let position = positions[i];
|
|
|
+ /* 创建实体 */
|
|
|
+ this._createEditPointEntity({
|
|
|
+ name: _self._sketchEditEntityNodeName,
|
|
|
+ position: position,
|
|
|
+ size: 12,
|
|
|
+ color: [0, 0, 255, 1.0],
|
|
|
+ editType: {
|
|
|
+ type: SketchViewModel.SketchEditType.Node,
|
|
|
+ index: i,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ /* 存储可编辑点 */
|
|
|
+ this._sketchEditPoints.push(position.clone());
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建可编辑的中点
|
|
|
+ * @param {Array<Cesium.Cartesian3>} positions 坐标集合
|
|
|
+ */
|
|
|
+ _createEditMiddlePoint(positions) {
|
|
|
+ let _self = this;
|
|
|
+ /* 创建中点 */
|
|
|
+ for (let i = 1; i < positions.length; i++) {
|
|
|
+ let p1 = positions[i - 1];
|
|
|
+ let p2 = positions[i];
|
|
|
+ /* 计算中点 */
|
|
|
+ let pCenter = this._calculateMiddlePoint(p1, p2);
|
|
|
+ /* 创建中点实体 */
|
|
|
+ this._createEditPointEntity({
|
|
|
+ name: _self._sketchEditEntityMiddleName,
|
|
|
+ position: pCenter,
|
|
|
+ size: 9,
|
|
|
+ color: [255, 255, 0, 1.0],
|
|
|
+ editType: {
|
|
|
+ type: SketchViewModel.SketchEditType.Middle,
|
|
|
+ index: i
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建编辑点
|
|
|
+ * @param {Array<Cesium.Cartesian3>} positions 点集合
|
|
|
+ */
|
|
|
+ _createEditPoint: function(positions) {
|
|
|
+ let _self = this;
|
|
|
+ /* 创建节点 */
|
|
|
+ this._sketchEditEntityNodeName = "SketchEditEntityNode";
|
|
|
+ this._createEditNodePoint(positions);
|
|
|
+ /* 创建中点 */
|
|
|
+ this._sketchEditEntityMiddleName = "SketchEditEntityMiddle";
|
|
|
+ this._createEditMiddlePoint(positions);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 计算两个点的中点坐标
|
|
|
+ * @param {Cesium.Cartesian3} position1 第一点
|
|
|
+ * @param {Cesium.Cartesian3} position2 第二点
|
|
|
+ */
|
|
|
+ _calculateMiddlePoint(position1, position2) {
|
|
|
+ /* 计算经纬度坐标 */
|
|
|
+ let g1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position1);
|
|
|
+ let g2 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position2);
|
|
|
+ /* 转换为度格式 */
|
|
|
+ let pt1 = [Cesium.Math.toDegrees(g1.longitude), Cesium.Math.toDegrees(g1.latitude)];
|
|
|
+ let pt2 = [Cesium.Math.toDegrees(g2.longitude), Cesium.Math.toDegrees(g2.latitude)];
|
|
|
+ /* 计算中间点 */
|
|
|
+ let tpt1 = turf.point(pt1);
|
|
|
+ let tpt2 = turf.point(pt2);
|
|
|
+ let midpoint = turf.midpoint(tpt1, tpt2).geometry.coordinates;
|
|
|
+ /* 查询高度 */
|
|
|
+ let height = this._queryHeightFromGeo(midpoint[0], midpoint[1]);
|
|
|
+ /* 转换为世界坐标 */
|
|
|
+ let result = Cesium.Cartesian3.fromDegrees(midpoint[0], midpoint[1], height);
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 查询指定经纬度位置的高度 有地形则查地形 有模型则查模型 查询错误或未查询到，返回0
|
|
|
+ * @param {Number} longitude 经度<度格式>
|
|
|
+ * @param {Number} latitude 纬度<度格式>
|
|
|
+ * @return {Number} 查询位置的高度值
|
|
|
+ */
|
|
|
+ _queryHeightFromGeo: function(longitude, latitude) {
|
|
|
+ if (longitude === undefined || latitude === undefined || typeof longitude != 'number' ||
|
|
|
+ typeof latitude != 'number') return 0;
|
|
|
+ let rLng = Cesium.Math.toRadians(longitude);
|
|
|
+ let rLat = Cesium.Math.toRadians(latitude);
|
|
|
+ let cartographic = new Cesium.Cartographic(rLng, rLat);
|
|
|
+ let height = this._viewer.scene.sampleHeight(cartographic);
|
|
|
+ if (height === undefined) return 0
|
|
|
+ else return height;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 清理编辑点
|
|
|
+ */
|
|
|
+ _clearEditPoint: function() {
|
|
|
+ /* 清理事件句柄 */
|
|
|
+ if (this._sketchEditHandler != undefined) {
|
|
|
+ this._sketchEditHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);
|
|
|
+ this._sketchEditHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);
|
|
|
+ this._sketchEditHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
+ }
|
|
|
+ /* ���理编辑点数据 */
|
|
|
+ this._sketchEditPoints = [];
|
|
|
+ this._sketchEditIndex = undefined;
|
|
|
+ this._editEntity = undefined;
|
|
|
+ this._removeEntityByName(this._sketchEditEntityNodeName);
|
|
|
+ this._removeEntityByName(this._sketchEditEntityMiddleName);
|
|
|
+ },
|
|
|
+
|
|
|
+ sketchCreateEditPolyline: function() {
|
|
|
+ /* 初始化 */
|
|
|
+ this._clear();
|
|
|
+ let eventHandler = new Cesium.ScreenSpaceEventHandler(this._viewer.scene.canvas);
|
|
|
+ this._sketchDrawEditPolyline(eventHandler, {});
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
/* 编辑函数相关 */
|
|
|
Object.assign(SketchViewModel.prototype, {
|
|
|
/**
|
|
|
@@ -2640,7 +3242,7 @@ Object.assign(SketchViewModel.prototype, {
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
- * 检查透明度是否符合要求
|
|
|
+ * 检查透明度是否符合���求
|
|
|
* @param {Object} alpha 透明度[0~1]
|
|
|
*/
|
|
|
_checkAlpha: function(alpha) {
|
|
|
@@ -2689,7 +3291,7 @@ Object.assign(SketchViewModel.prototype, {
|
|
|
/* 获取当前选中的拉伸对象 */
|
|
|
let primitive = _self._sketchPickPolygonBody;
|
|
|
if (primitive === undefined) {
|
|
|
- if (options.onComplete) options.onComplete("未拾取对象或拾取的对象不符合要求！");
|
|
|
+ if (options.onComplete) options.onComplete("未拾取对象或拾���的对象不符合要求！");
|
|
|
return;
|
|
|
};
|
|
|
let color = primitive._useGeometry.color;
|
|
|
@@ -2711,7 +3313,7 @@ Object.assign(SketchViewModel.prototype, {
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
- * 移除选择的拉伸实体
|
|
|
+ * ���除选择的拉伸实体
|
|
|
* @param {Function} onComplete(message) 完成回调，message为undifined为成功，否则为失败消息
|
|
|
*/
|
|
|
sketchRemovePickPolygonBody: function(onComplete) {
|
|
|
@@ -2719,10 +3321,10 @@ Object.assign(SketchViewModel.prototype, {
|
|
|
/* 获取当前选中的拉伸对象 */
|
|
|
let primitive = _self._sketchPickPolygonBody;
|
|
|
if (primitive === undefined) {
|
|
|
- if (onComplete) onComplete("未拾取对象或拾取的对象不符合要求！");
|
|
|
+ if (onComplete) onComplete("未拾取对象或拾取的对象���符合���求���");
|
|
|
return;
|
|
|
};
|
|
|
- /* 删除已绘制的要素 */
|
|
|
+ /* ���除已绘�����的要素 */
|
|
|
this._viewer.scene.primitives.remove(primitive);
|
|
|
if (onComplete) onComplete(undefined);
|
|
|
},
|
|
|
@@ -2730,7 +3332,7 @@ Object.assign(SketchViewModel.prototype, {
|
|
|
/**
|
|
|
* 拾取绘制的区域拉伸对象
|
|
|
* @param {Function} onComplete(options) 完成回调
|
|
|
- * options.color 颜色数组
|
|
|
+ * options.color ���色数组
|
|
|
* options.height 高度
|
|
|
* 如果未查询到符合要求的对象或者实体 则options为undefined
|
|
|
*/
|
|
|
@@ -2790,6 +3392,22 @@ SketchViewModel.SketchIconType = Object.freeze({
|
|
|
Violet: 'violter',
|
|
|
})
|
|
|
|
|
|
+/**
|
|
|
+ * 编辑点类型
|
|
|
+ */
|
|
|
+SketchViewModel.SketchEditType = Object.freeze({
|
|
|
+ Node: 'node',
|
|
|
+ Middle: 'middle',
|
|
|
+})
|
|
|
+
|
|
|
+/**
|
|
|
+ * 实体挂接的数据类型
|
|
|
+ */
|
|
|
+SketchViewModel.SketchEntityType = Object.freeze({
|
|
|
+ Polyline: 'polyline',
|
|
|
+ Polygon: 'polygon',
|
|
|
+})
|
|
|
+
|
|
|
/* 输出 */
|
|
|
export {
|
|
|
SketchViewModel
|
不会爬树的猴