|
@@ -1,1450 +0,0 @@
|
|
|
-import CreateRemindertip from "../../common/ReminderTip.js";
|
|
|
-
|
|
|
-import xp from "./algorithm.js";
|
|
|
-
|
|
|
-/**
|
|
|
- * 运行环境类型
|
|
|
- */
|
|
|
-const RuntimeEnvironment = Object.freeze(({
|
|
|
- App: 'app',
|
|
|
- Web: 'web'
|
|
|
-}))
|
|
|
-
|
|
|
-/**
|
|
|
- * 检测程序运行环境
|
|
|
- * @return {RuntimeEnvironment}
|
|
|
- */
|
|
|
-function _checkAppOrWeb() {
|
|
|
- if (window.navigator.userAgent.match(
|
|
|
- /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
|
|
|
- )) {
|
|
|
- return RuntimeEnvironment.App;
|
|
|
- } else {
|
|
|
- return RuntimeEnvironment.Web;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 是否是运行于App
|
|
|
- * @ignore
|
|
|
- */
|
|
|
-function _isRuntimeApp() {
|
|
|
- if (_checkAppOrWeb() === RuntimeEnvironment.App) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false;
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 是否是运行于App
|
|
|
- * @ignore
|
|
|
- */
|
|
|
-function _isRuntimeWeb() {
|
|
|
- if (_checkAppOrWeb() === RuntimeEnvironment.Web) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false;
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * @ignore
|
|
|
- * 创建操作的主容器
|
|
|
- */
|
|
|
-function _createOperationMainDom() {
|
|
|
- //创建画布
|
|
|
- let buttonDiv = document.createElement('div');
|
|
|
- buttonDiv.id = "drawButtonDiv";
|
|
|
- buttonDiv.style.width = '80px';
|
|
|
- buttonDiv.style.backgroundColor = 'rgba(5, 45, 155, 0.7)';
|
|
|
- buttonDiv.style.borderRadius = '5px';
|
|
|
- buttonDiv.style.display = 'flex';
|
|
|
- buttonDiv.style.flexDirection = 'column';
|
|
|
- buttonDiv.style.padding = '8px';
|
|
|
- buttonDiv.style.justifyContent = 'center';
|
|
|
- buttonDiv.style.position = 'absolute';
|
|
|
- buttonDiv.style.bottom = '150px';
|
|
|
- buttonDiv.style.right = '10px';
|
|
|
-
|
|
|
- // let btnUndo = document.createElement('button');
|
|
|
- // btnUndo.id = "btnDrawBackout";
|
|
|
- // btnUndo.style.height = '30px';
|
|
|
- // btnUndo.style.marginBottom = '8px';
|
|
|
- // btnUndo.style.backgroundColor = 'rgba(52, 137, 255, 1.0)';
|
|
|
- // btnUndo.style.color = 'rgb(255, 255, 255)';
|
|
|
- // btnUndo.style.border = '0px solid red';
|
|
|
- // btnUndo.style.borderRadius = '5px';
|
|
|
- // btnUndo.innerHTML = '回退';
|
|
|
- // btnUndo.style.fontSize = '13px';
|
|
|
- // btnUndo.style.cursor = 'pointer';
|
|
|
- // buttonDiv.appendChild(btnUndo);
|
|
|
-
|
|
|
- let btnCompletion = document.createElement('button');
|
|
|
- btnCompletion.id = "btnDrawComplete";
|
|
|
- btnCompletion.style.height = '30px';
|
|
|
- btnCompletion.style.backgroundColor = 'rgba(88, 185, 45, 1.0)';
|
|
|
- btnCompletion.style.color = 'rgb(255, 255, 255)';
|
|
|
- btnCompletion.style.border = '0px solid red';
|
|
|
- btnCompletion.style.borderRadius = '5px';
|
|
|
- btnCompletion.innerHTML = '完成';
|
|
|
- btnCompletion.style.fontSize = '13px';
|
|
|
- btnCompletion.style.cursor = 'pointer';
|
|
|
- buttonDiv.appendChild(btnCompletion);
|
|
|
-
|
|
|
- /* 加入到页面 */
|
|
|
- document.body.appendChild(buttonDiv);
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 创建顶部弹出提示消息 1秒后自动消失
|
|
|
- * @ignore
|
|
|
- * @param {String} message 消息内容
|
|
|
- */
|
|
|
-function _showTooltipMessage(message) {
|
|
|
- let msgMainDom = document.getElementById('messageMainDom');
|
|
|
- if (msgMainDom !== null && msgMainDom !== undefined) {
|
|
|
- document.body.removeChild(msgMainDom);
|
|
|
- }
|
|
|
- msgMainDom = document.createElement('div');
|
|
|
- msgMainDom.style.width = '30%';
|
|
|
- msgMainDom.style.backgroundColor = 'rgba(237, 248, 230, 1.0)';
|
|
|
- msgMainDom.style.height = '45px';
|
|
|
- msgMainDom.style.border = 'solid 2px rgb(219, 241, 208)';
|
|
|
- msgMainDom.style.borderRadius = '8px';
|
|
|
- msgMainDom.style.display = 'flex';
|
|
|
- msgMainDom.style.alignItems = 'center';
|
|
|
- msgMainDom.style.paddingLeft = '10px';
|
|
|
- msgMainDom.style.color = 'rgb(91, 188, 48)';
|
|
|
- msgMainDom.style.fontSize = '14px';
|
|
|
- msgMainDom.style.fontWeight = '600';
|
|
|
- msgMainDom.style.position = 'absolute';
|
|
|
- msgMainDom.style.left = '35%';
|
|
|
- msgMainDom.style.transition = 'transform 1s';
|
|
|
- msgMainDom.style.transform = 'translateY(-90px)';
|
|
|
- msgMainDom.style.top = '0px';
|
|
|
- msgMainDom.style.zIndex = 1000;
|
|
|
- document.body.appendChild(msgMainDom);
|
|
|
-
|
|
|
- let strHtml = '';
|
|
|
- strHtml += "<div style='"
|
|
|
- strHtml += "background-color: rgb(88, 185, 45);";
|
|
|
- strHtml += "color: rgb(255, 255, 255);";
|
|
|
- strHtml += "height: 24px;";
|
|
|
- strHtml += "width: 24px;";
|
|
|
- strHtml += "border-radius: 20px;";
|
|
|
- strHtml += "display: flex;";
|
|
|
- strHtml += "justify-content: center;";
|
|
|
- strHtml += "align-items: center;";
|
|
|
- strHtml += "font-size: 14px;";
|
|
|
- strHtml += "margin-right: 18px;";
|
|
|
- strHtml += "'>✓</div>";
|
|
|
- strHtml += "<div>" + message + "</div>";
|
|
|
-
|
|
|
- msgMainDom.innerHTML = strHtml;
|
|
|
- msgMainDom.addEventListener('transitionend', function() {
|
|
|
- setTimeout(function() {
|
|
|
- document.body.removeChild(msgMainDom);
|
|
|
- }, 1000);
|
|
|
- }, false);
|
|
|
-
|
|
|
- setTimeout(function() {
|
|
|
- msgMainDom.style.transform = 'translateY(50px)';
|
|
|
- }, 100)
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-//粗单尖直线箭头
|
|
|
-var StraightArrow = function(viewer, options) {
|
|
|
- this.type = "StraightArrow";
|
|
|
- this.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0)); //用于区分多个相同箭头时
|
|
|
- this.viewer = viewer;
|
|
|
- this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- this.pointImageUrl = "jt3dSDK/imgs/point/point.png";
|
|
|
-
|
|
|
- options = options || {};
|
|
|
-
|
|
|
- options.color = Cesium.defaultValue(options.color, 'rgba(0,255,0,0.5)');
|
|
|
- options.polygonColor = Cesium.defaultValue(options.color, 'rgba(0,255,0,0.5)');
|
|
|
- options.outlineColor = Cesium.defaultValue(options.outlineColor, 'rgba(255,255,255,1)');
|
|
|
- options.outlineWidth = Cesium.defaultValue(options.outlineWidth, 0);
|
|
|
-
|
|
|
- /* 通用参数集合 */
|
|
|
- this._param = {
|
|
|
- id: "straightArrow",
|
|
|
- color: options.color, //面填充颜色
|
|
|
- polygonColor: options.polygonColor, //面填充颜色
|
|
|
- outlineColor: options.outlineColor, //边框颜色
|
|
|
- outlineWidth: options.outlineWidth, //边框宽度
|
|
|
- }
|
|
|
-
|
|
|
- /* 创建面材质 */
|
|
|
- this.fillMaterial = this._materialColorProperty({
|
|
|
- color: this._param.polygonColor,
|
|
|
- })
|
|
|
- /* 创建线材质 */
|
|
|
- this.outlineMaterial = this._materialColorProperty({
|
|
|
- color: this._param.outlineColor,
|
|
|
- })
|
|
|
-
|
|
|
- this.positions = [];
|
|
|
- this.firstPoint = null;
|
|
|
- this.floatPoint = null;
|
|
|
- this.arrowEntity = null;
|
|
|
- this.state = -1; //state用于区分当前的状态 0 为删除 1为添加 2为编辑
|
|
|
- this.selectPoint = null;
|
|
|
- this.clickStep = 0;
|
|
|
- this.modifyHandler = null;
|
|
|
-}
|
|
|
-StraightArrow.prototype = {
|
|
|
- disable: function() {
|
|
|
- this.positions = [];
|
|
|
- if (this.firstPoint) {
|
|
|
- this.viewer.entities.remove(this.firstPoint);
|
|
|
- this.firstPoint = null;
|
|
|
- }
|
|
|
- if (this.floatPoint) {
|
|
|
- this.viewer.entities.remove(this.floatPoint);
|
|
|
- this.floatPoint = null;
|
|
|
- }
|
|
|
- if (this.arrowEntity) {
|
|
|
- this.viewer.entities.remove(this.arrowEntity);
|
|
|
- this.arrowEntity = null;
|
|
|
- }
|
|
|
- this.state = -1;
|
|
|
- if (this.handler) {
|
|
|
- this.handler.destroy();
|
|
|
- this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- }
|
|
|
- if (this.selectPoint) {
|
|
|
- this.viewer.entities.remove(this.selectPoint);
|
|
|
- this.selectPoint = null;
|
|
|
- }
|
|
|
- if (this.modifyHandler) {
|
|
|
- this.modifyHandler.destroy();
|
|
|
- this.modifyHandler = null;
|
|
|
- }
|
|
|
- this.clickStep = 0;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 取消鼠标事件
|
|
|
- * @param {Object} options
|
|
|
- */
|
|
|
- disableHandler: function(options) {
|
|
|
-
|
|
|
- if (this.handler) {
|
|
|
- this.handler.destroy();
|
|
|
- this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- }
|
|
|
- if (this.modifyHandler) {
|
|
|
- this.modifyHandler.destroy();
|
|
|
- this.modifyHandler = null;
|
|
|
- }
|
|
|
-
|
|
|
- this.state = -1;
|
|
|
- if (this.firstPoint) {
|
|
|
- this.firstPoint.show = false;
|
|
|
- }
|
|
|
- if (this.floatPoint) {
|
|
|
- this.floatPoint.show = false;
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 开始绘制
|
|
|
- * @param {Object} options
|
|
|
- */
|
|
|
- startDraw: function(options) {
|
|
|
- var $this = this;
|
|
|
- let toolTip = "单击开始绘制";
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- toolTip = "点击开始绘制";
|
|
|
- _showTooltipMessage(toolTip);
|
|
|
- }
|
|
|
-
|
|
|
- this.state = 1;
|
|
|
- this.handler.setInputAction(function(evt) { //单机开始绘制
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.position);
|
|
|
- if (!cartesian) return;
|
|
|
- if ($this.positions.length == 0) {
|
|
|
- $this.firstPoint = $this.creatPoint(cartesian);
|
|
|
- $this.firstPoint.type = "firstPoint";
|
|
|
- $this.floatPoint = $this.creatPoint(cartesian);
|
|
|
- $this.floatPoint.type = "floatPoint";
|
|
|
- $this.positions.push(cartesian);
|
|
|
-
|
|
|
- toolTip = "再次单击结束绘制";
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- toolTip = "再次点击结束绘制";
|
|
|
- _showTooltipMessage(toolTip);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if ($this.positions.length >= 2) {
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- $this.floatPoint.position.setValue(cartesian);
|
|
|
- if (!Cesium.defined($this.arrowEntity)) {
|
|
|
- $this.positions.push(cartesian);
|
|
|
- $this.arrowEntity = $this.showArrowOnMap($this.positions);
|
|
|
- } else {
|
|
|
- $this.positions.pop();
|
|
|
- $this.positions.push(cartesian);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if ($this.positions.length == 3) {
|
|
|
- $this.firstPoint.show = false;
|
|
|
- $this.floatPoint.show = false;
|
|
|
- $this.handler.destroy();
|
|
|
- $this.arrowEntity.objId = $this.objId;
|
|
|
- $this.state = -1;
|
|
|
-
|
|
|
- CreateRemindertip(toolTip, evt.endPosition, false);
|
|
|
-
|
|
|
- /* 回调返回 */
|
|
|
- if (options.onComplete) options.onComplete($this.positions, $this.getLnglats());
|
|
|
- }
|
|
|
- $this.positions.push(cartesian.clone());
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- this.handler.setInputAction(function(evt) { //移动时绘制面
|
|
|
-
|
|
|
- /* 如果运行环境是App 则禁止使用移动事件 */
|
|
|
- if (_isRuntimeApp()) return;
|
|
|
-
|
|
|
- /* 标签提示 */
|
|
|
- CreateRemindertip(toolTip, evt.endPosition, true);
|
|
|
-
|
|
|
- if ($this.positions.length < 1) return;
|
|
|
-
|
|
|
- /* 获取空间位置 */
|
|
|
- var cartesian = getCatesian3FromPX($this.viewer, evt.endPosition);
|
|
|
- /* 如果获取点失败 则直接返回 */
|
|
|
- if (!cartesian) return;
|
|
|
-
|
|
|
- $this.floatPoint.position.setValue(cartesian);
|
|
|
- if ($this.positions.length >= 2) {
|
|
|
- if (!Cesium.defined($this.arrowEntity)) {
|
|
|
- $this.positions.push(cartesian);
|
|
|
- $this.arrowEntity = $this.showArrowOnMap($this.positions);
|
|
|
- } else {
|
|
|
- $this.positions.pop();
|
|
|
- $this.positions.push(cartesian);
|
|
|
- }
|
|
|
- }
|
|
|
- }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
- },
|
|
|
- /**
|
|
|
- * 更新面的属性
|
|
|
- * @ignore 不公开方法
|
|
|
- * @param {Object} params
|
|
|
- */
|
|
|
- _updatePolygonProperty: function(params) {
|
|
|
- let material = this.arrowEntity.polygon.material;
|
|
|
- if (material instanceof Cesium.ColorMaterialProperty) {
|
|
|
- let newMaterial = this._materialColorProperty({
|
|
|
- color: params.polygonColor,
|
|
|
- });
|
|
|
- this.arrowEntity.polygon.material = newMaterial;
|
|
|
- }
|
|
|
- if (this.arrowEntity.polyline !== undefined) {
|
|
|
- let newMaterial = this._materialColorProperty({
|
|
|
- color: params.outlineColor,
|
|
|
- });
|
|
|
- this.arrowEntity.polyline.material = newMaterial;
|
|
|
- this.arrowEntity.polyline.width = parseFloat(params.outlineWidth);
|
|
|
- }
|
|
|
-
|
|
|
- /* 重新关联属性 */
|
|
|
- this._param = params;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 颜色材质
|
|
|
- * @ignore 生成方法时不对外公开
|
|
|
- * @param {JSON} options 配置项
|
|
|
- * @param {String} options.color 文字颜色 rgba(r,g,b,a)
|
|
|
- */
|
|
|
- _materialColorProperty(options) {
|
|
|
- let mColor = 'rgba(0,255,0,1)';
|
|
|
- if (options !== undefined && options.color !== undefined) mColor = options.color;
|
|
|
- /* 创建材质 */
|
|
|
- let colorMaterial = new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(mColor));
|
|
|
- colorMaterial._param = {
|
|
|
- color: mColor,
|
|
|
- }
|
|
|
- /* 返回材质 */
|
|
|
- return colorMaterial;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 图形修改
|
|
|
- */
|
|
|
- startModify: function(options) {
|
|
|
-
|
|
|
- this.state = 2;
|
|
|
- this.firstPoint.show = true;
|
|
|
- this.floatPoint.show = true;
|
|
|
- var $this = this;
|
|
|
- this.clickStep = 0;
|
|
|
- if (!this.modifyHandler) this.modifyHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- this.modifyHandler.setInputAction(function(evt) { //单机开始绘制
|
|
|
- var pick = $this.viewer.scene.pick(evt.position);
|
|
|
- if (Cesium.defined(pick) && pick.id) {
|
|
|
- $this.clickStep++;
|
|
|
-
|
|
|
- if (!pick.id.objId) {
|
|
|
- $this.selectPoint = pick.id;
|
|
|
- } else {
|
|
|
- $this.selectPoint = pick.id;
|
|
|
-
|
|
|
- $this.modifyHandler.destroy();
|
|
|
- $this.modifyHandler = null;
|
|
|
- $this.firstPoint.show = false;
|
|
|
- $this.floatPoint.show = false;
|
|
|
- $this.state = -1;
|
|
|
-
|
|
|
- /* 回调返回 */
|
|
|
- if (options.onComplete) options.onComplete(pick.id.objId);
|
|
|
- }
|
|
|
- } else { //激活移动点之后 单击面之外 移除这个事件
|
|
|
- $this.modifyHandler.destroy();
|
|
|
- $this.modifyHandler = null;
|
|
|
- $this.firstPoint.show = false;
|
|
|
- $this.floatPoint.show = false;
|
|
|
- $this.state = -1;
|
|
|
- }
|
|
|
-
|
|
|
- //选中点后 第二次点击 则重新定位该点
|
|
|
- if ($this.clickStep == 2) {
|
|
|
- $this.clickStep = 0;
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.position);
|
|
|
- if (!cartesian) return;
|
|
|
- if ($this.selectPoint) {
|
|
|
- $this.selectPoint.position.setValue(cartesian);
|
|
|
- $this.selectPoint = null;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- this.modifyHandler.setInputAction(function(evt) {
|
|
|
- if ($this.selectPoint) {
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.endPosition);
|
|
|
- if (!cartesian) return;
|
|
|
- if ($this.selectPoint.type) {
|
|
|
- $this.selectPoint.position.setValue(cartesian);
|
|
|
- if ($this.selectPoint.type == "firstPoint") {
|
|
|
- $this.positions[1] = cartesian;
|
|
|
- }
|
|
|
- if ($this.selectPoint.type == "floatPoint") {
|
|
|
- $this.positions[2] = cartesian;
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- return;
|
|
|
- }
|
|
|
- }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
- },
|
|
|
- //通过传入的经纬度数组 构建箭头
|
|
|
- createByData: function(data) {
|
|
|
- this.state = -1;
|
|
|
- this.positions = [];
|
|
|
- var arr = [];
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- var cart3 = Cesium.Cartesian3.fromDegrees(data[i][0], data[i][1]);
|
|
|
- arr.push(cart3);
|
|
|
- }
|
|
|
- this.positions = arr;
|
|
|
- this.firstPoint = this.creatPoint(this.positions[1]);
|
|
|
- this.firstPoint.type = "firstPoint";
|
|
|
- this.floatPoint = this.creatPoint(this.positions[2]);
|
|
|
- this.floatPoint.type = "floatPoint";
|
|
|
- this.arrowEntity = this.showArrowOnMap(this.positions);
|
|
|
- this.firstPoint.show = false;
|
|
|
- this.floatPoint.show = false;
|
|
|
- this.arrowEntity.objId = this.objId;
|
|
|
- },
|
|
|
- //清除绘制箭头
|
|
|
- clear: function() {
|
|
|
- this.state = 0;
|
|
|
- if (this.firstPoint) this.viewer.entities.remove(this.firstPoint);
|
|
|
- if (this.floatPoint) this.viewer.entities.remove(this.floatPoint);
|
|
|
- if (this.arrowEntity) this.viewer.entities.remove(this.arrowEntity);
|
|
|
- this.state = -1;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 创建点
|
|
|
- * @param {Object} cartesian
|
|
|
- */
|
|
|
- creatPoint: function(cartesian) {
|
|
|
- var point = this.viewer.entities.add({
|
|
|
- position: cartesian,
|
|
|
- billboard: {
|
|
|
- image: this.pointImageUrl,
|
|
|
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
- disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
|
- }
|
|
|
- });
|
|
|
- point.attr = "editPoint";
|
|
|
- return point;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 绘制箭头
|
|
|
- * @param {Object} positions
|
|
|
- */
|
|
|
- showArrowOnMap: function(positions) {
|
|
|
- var $this = this;
|
|
|
- var update = function() {
|
|
|
- if (positions.length < 2) {
|
|
|
- return null;
|
|
|
- }
|
|
|
- var p1 = positions[1];
|
|
|
- var p2 = positions[2];
|
|
|
- var firstPoint = $this.cartesianToLatlng(p1);
|
|
|
- var endPoints = $this.cartesianToLatlng(p2);
|
|
|
- var arrow = this.arrow = [];
|
|
|
-
|
|
|
- var res = xp.algorithm.fineArrow([firstPoint[0], firstPoint[1]], [endPoints[0], endPoints[1]]);
|
|
|
- var index = JSON.stringify(res).indexOf("null");
|
|
|
- if (index != -1) return [];
|
|
|
- for (var i = 0; i < res.length; i++) {
|
|
|
- var c3 = new Cesium.Cartesian3(res[i].x, res[i].y, res[i].z);
|
|
|
- arrow.push(c3);
|
|
|
- }
|
|
|
-
|
|
|
- return new Cesium.PolygonHierarchy(arrow);
|
|
|
- }
|
|
|
-
|
|
|
- return this.viewer.entities.add({
|
|
|
- polygon: new Cesium.PolygonGraphics({
|
|
|
- hierarchy: new Cesium.CallbackProperty(update, false),
|
|
|
- show: true,
|
|
|
- fill: true,
|
|
|
- material: $this.fillMaterial
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
- //获取直角箭头中的关键点 经纬度
|
|
|
- getLnglats: function() {
|
|
|
- var arr = [];
|
|
|
- for (var i = 0; i < this.positions.length; i++) {
|
|
|
- var item = this.cartesianToLatlng(this.positions[i]);
|
|
|
- arr.push(item);
|
|
|
- }
|
|
|
- return arr;
|
|
|
- },
|
|
|
- cartesianToLatlng: function(cartesian) {
|
|
|
- var latlng = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
|
|
|
- var lat = Cesium.Math.toDegrees(latlng.latitude);
|
|
|
- var lng = Cesium.Math.toDegrees(latlng.longitude);
|
|
|
- return [lng, lat];
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-///====================================================================================================
|
|
|
-//燕尾攻击箭头
|
|
|
-var AttackArrow = function(viewer, options) {
|
|
|
- this.type = "AttackArrow";
|
|
|
- this.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0))
|
|
|
- this.viewer = viewer;
|
|
|
- this.pointImageUrl = "jt3dSDK/imgs/point/point.png";
|
|
|
- this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
-
|
|
|
- options = options || {};
|
|
|
-
|
|
|
- options.color = Cesium.defaultValue(options.color, 'rgba(0,255,0,0.5)');
|
|
|
- options.polygonColor = Cesium.defaultValue(options.polygonColor, 'rgba(0,255,0,0.5)');
|
|
|
- options.outlineColor = Cesium.defaultValue(options.outlineColor, 'rgba(255,255,255,1)');
|
|
|
- options.outlineWidth = Cesium.defaultValue(options.outlineWidth, 0);
|
|
|
-
|
|
|
- /* 通用参数集合 */
|
|
|
- this._param = {
|
|
|
- id: "attackArrow",
|
|
|
- color: options.color,
|
|
|
- polygonColor: options.polygonColor, //面填充颜色
|
|
|
- outlineColor: options.outlineColor, //边框颜色
|
|
|
- outlineWidth: options.outlineWidth, //边框宽度
|
|
|
- }
|
|
|
-
|
|
|
- /* 创建面材质 */
|
|
|
- this.fillMaterial = this._materialColorProperty({
|
|
|
- color: this._param.polygonColor,
|
|
|
- })
|
|
|
- /* 创建线材质 */
|
|
|
- this.outlineMaterial = this._materialColorProperty({
|
|
|
- color: this._param.outlineColor,
|
|
|
- })
|
|
|
-
|
|
|
- this.positions = []; //控制点
|
|
|
- this.state = -1; //state用于区分当前的状态 0 为删除 1为添加 2为编辑
|
|
|
- this.floatPoint = null;
|
|
|
- this.arrowEntity = null;
|
|
|
- this.pointArr = []; //中间各点
|
|
|
- this.selectPoint = null;
|
|
|
- this.clickStep = 0; //用于控制点的移动结束
|
|
|
- this.modifyHandler = null;
|
|
|
-}
|
|
|
-AttackArrow.prototype = {
|
|
|
- disable: function() {
|
|
|
- this.positions = [];
|
|
|
- if (this.arrowEntity) {
|
|
|
- this.viewer.entities.remove(this.arrowEntity);
|
|
|
- this.arrowEntity = null;
|
|
|
- }
|
|
|
- this.state = -1;
|
|
|
- if (this.handler) {
|
|
|
- this.handler.destroy();
|
|
|
- this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- }
|
|
|
- if (this.floatPoint) {
|
|
|
- this.viewer.entities.remove(this.floatPoint);
|
|
|
- this.floatPoint = null;
|
|
|
- }
|
|
|
- if (this.selectPoint) {
|
|
|
- this.viewer.entities.remove(this.selectPoint);
|
|
|
- this.selectPoint = null;
|
|
|
- }
|
|
|
- for (var i = 0; i < this.pointArr.length; i++) {
|
|
|
- if (this.pointArr[i]) this.viewer.entities.remove(this.pointArr[i]);
|
|
|
- }
|
|
|
- if (this.modifyHandler) {
|
|
|
- this.modifyHandler.destroy();
|
|
|
- this.modifyHandler = null;
|
|
|
- }
|
|
|
- this.clickStep = 0;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 取消鼠标事件
|
|
|
- * @param {Object} options
|
|
|
- */
|
|
|
- disableHandler: function() {
|
|
|
- if (this.handler) {
|
|
|
- this.handler.destroy();
|
|
|
- this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- }
|
|
|
- if (this.modifyHandler) {
|
|
|
- this.modifyHandler.destroy();
|
|
|
- this.modifyHandler = null;
|
|
|
- }
|
|
|
-
|
|
|
- this.state = -1;
|
|
|
- if (this.pointArr) {
|
|
|
- for (var i = 0; i < this.pointArr.length; i++) {
|
|
|
- this.pointArr[i].show = false;
|
|
|
- }
|
|
|
- }
|
|
|
- if (this.floatPoint) {
|
|
|
- this.floatPoint.show = false;
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- /**
|
|
|
- * 更新面的属性
|
|
|
- * @ignore 不公开方法
|
|
|
- * @param {Object} params
|
|
|
- */
|
|
|
- _updatePolygonProperty: function(params) {
|
|
|
- let material = this.arrowEntity.polygon.material;
|
|
|
- if (material instanceof Cesium.ColorMaterialProperty) {
|
|
|
- let newMaterial = this._materialColorProperty({
|
|
|
- color: params.polygonColor,
|
|
|
- });
|
|
|
- this.arrowEntity.polygon.material = newMaterial;
|
|
|
- }
|
|
|
- if (this.arrowEntity.polyline !== undefined) {
|
|
|
- let newMaterial = this._materialColorProperty({
|
|
|
- color: params.outlineColor,
|
|
|
- });
|
|
|
- this.arrowEntity.polyline.material = newMaterial;
|
|
|
- this.arrowEntity.polyline.width = parseFloat(params.outlineWidth);
|
|
|
- }
|
|
|
-
|
|
|
- /* 重新关联属性 */
|
|
|
- this._param = params;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 颜色材质
|
|
|
- * @ignore 生成方法时不对外公开
|
|
|
- * @param {JSON} options 配置项
|
|
|
- * @param {String} options.color 文字颜色 rgba(r,g,b,a)
|
|
|
- */
|
|
|
- _materialColorProperty(options) {
|
|
|
- let mColor = 'rgba(0,255,0,1)';
|
|
|
- if (options !== undefined && options.color !== undefined) mColor = options.color;
|
|
|
- /* 创建材质 */
|
|
|
- let colorMaterial = new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(mColor));
|
|
|
- colorMaterial._param = {
|
|
|
- color: mColor,
|
|
|
- }
|
|
|
- /* 返回材质 */
|
|
|
- return colorMaterial;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 开始绘制
|
|
|
- * @param {Object} options
|
|
|
- */
|
|
|
- startDraw: function(options) {
|
|
|
- var $this = this;
|
|
|
- let toolTip = "单击开始绘制";
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- toolTip = "点击开始绘制";
|
|
|
- _showTooltipMessage(toolTip);
|
|
|
- }
|
|
|
-
|
|
|
- this.state = 1;
|
|
|
- this.handler.setInputAction(function(evt) { //单机开始绘制
|
|
|
-
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.position);
|
|
|
- if (!cartesian) return;
|
|
|
-
|
|
|
- if ($this.positions.length == 0) {
|
|
|
- toolTip = "单击添加点";
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- toolTip = "点击添加点";
|
|
|
- _showTooltipMessage(toolTip);
|
|
|
- }
|
|
|
- $this.floatPoint = $this.creatPoint(cartesian);
|
|
|
- $this.floatPoint.wz = -1;
|
|
|
- }
|
|
|
- $this.positions.push(cartesian);
|
|
|
-
|
|
|
- var point = $this.creatPoint(cartesian);
|
|
|
- if ($this.positions.length > 2) {
|
|
|
- toolTip = "单击添加点,右键结束绘制";
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- toolTip = "点击添加点";
|
|
|
- _showTooltipMessage(toolTip);
|
|
|
-
|
|
|
- point.wz = $this.positions.length; //点对应的在positions中的位置 屏蔽mouseMove里往postions添加时 未创建点
|
|
|
-
|
|
|
- if ($this.positions.length === 3) {
|
|
|
- //创建按钮
|
|
|
- _createOperationMainDom();
|
|
|
-
|
|
|
- //完成绘制
|
|
|
- document.getElementById("btnDrawComplete").onclick = () => {
|
|
|
-
|
|
|
- for (var i = 0; i < $this.pointArr.length; i++) {
|
|
|
- $this.pointArr[i].show = false;
|
|
|
- }
|
|
|
- $this.floatPoint.show = false;
|
|
|
- $this.viewer.entities.remove($this.floatPoint);
|
|
|
- $this.floatPoint = null;
|
|
|
-
|
|
|
- $this.handler.destroy();
|
|
|
-
|
|
|
- CreateRemindertip(toolTip, evt.endPosition, false);
|
|
|
-
|
|
|
- let buttonDiv = document.getElementById("drawButtonDiv");
|
|
|
- if (buttonDiv) {
|
|
|
- //从页面移除
|
|
|
- document.body.removeChild(buttonDiv);
|
|
|
- }
|
|
|
-
|
|
|
- /* 回调返回 */
|
|
|
- if (options.onComplete) options.onComplete($this.positions, $this.getLnglats());
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- } else {
|
|
|
- point.wz = $this.positions.length - 1; //点对应的在positions中的位置 屏蔽mouseMove里往postions添加时 未创建点
|
|
|
- }
|
|
|
-
|
|
|
- } else {
|
|
|
- toolTip = "单击添加点";
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- toolTip = "点击添加点";
|
|
|
- _showTooltipMessage(toolTip);
|
|
|
-
|
|
|
- if ($this.positions.length === 2) {
|
|
|
- if (!Cesium.defined($this.arrowEntity)) {
|
|
|
- $this.arrowEntity = $this.showArrowOnMap($this.positions);
|
|
|
- $this.arrowEntity.objId = $this.objId;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- point.wz = $this.positions.length; //点对应的在positions中的位置
|
|
|
- }
|
|
|
- $this.pointArr.push(point);
|
|
|
-
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- this.handler.setInputAction(function(evt) { //移动时绘制面
|
|
|
-
|
|
|
- /* 如果运行环境是App 则禁止使用移动事件 */
|
|
|
- if (_isRuntimeApp()) return;
|
|
|
-
|
|
|
- CreateRemindertip(toolTip, evt.endPosition, true);
|
|
|
-
|
|
|
- if ($this.positions.length < 2) return;
|
|
|
-
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.endPosition);
|
|
|
- if (!cartesian) return;
|
|
|
- $this.floatPoint.position.setValue(cartesian);
|
|
|
- if ($this.positions.length >= 2) {
|
|
|
- toolTip = "单击添加点,右键结束绘制";
|
|
|
- if (!Cesium.defined($this.arrowEntity)) {
|
|
|
- $this.positions.push(cartesian);
|
|
|
- $this.arrowEntity = $this.showArrowOnMap($this.positions);
|
|
|
- $this.arrowEntity.objId = $this.objId;
|
|
|
- } else {
|
|
|
- $this.positions.pop();
|
|
|
- $this.positions.push(cartesian);
|
|
|
- }
|
|
|
- } else {
|
|
|
- toolTip = "单击添加点";
|
|
|
- }
|
|
|
- }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
-
|
|
|
- //双击击结束绘制
|
|
|
- this.handler.setInputAction(function(evt) {
|
|
|
-
|
|
|
- /* 如果运行环境是App 则禁止使用双击事件 */
|
|
|
- if (_isRuntimeApp()) return;
|
|
|
-
|
|
|
- CreateRemindertip(toolTip, evt.endPosition, false);
|
|
|
-
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.position);
|
|
|
- if (!cartesian) return;
|
|
|
- for (var i = 0; i < $this.pointArr.length; i++) {
|
|
|
- $this.pointArr[i].show = false;
|
|
|
- }
|
|
|
- $this.floatPoint.show = false;
|
|
|
- $this.viewer.entities.remove($this.floatPoint);
|
|
|
- $this.floatPoint = null;
|
|
|
-
|
|
|
- var point = $this.creatPoint(cartesian);
|
|
|
- point.show = false;
|
|
|
- point.wz = $this.positions.length;
|
|
|
- $this.pointArr.push(point);
|
|
|
-
|
|
|
- $this.handler.destroy();
|
|
|
-
|
|
|
-
|
|
|
- /* 回调返回 */
|
|
|
- if (options.onComplete) options.onComplete($this.positions, $this.getLnglats());
|
|
|
-
|
|
|
- }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
|
- },
|
|
|
- //根据传入的数据构建箭头
|
|
|
- createByData: function(data) {
|
|
|
- this.positions = []; //控制点
|
|
|
- this.state = -1; //state用于区分当前的状态 0 为删除 1为添加 2为编辑
|
|
|
- this.floatPoint = null;
|
|
|
- this.pointArr = []; //中间各点
|
|
|
- this.selectPoint = null;
|
|
|
- this.clickStep = 0; //用于控制点的移动结束
|
|
|
- this.modifyHandler = null;
|
|
|
- var arr = [];
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- var cart3 = Cesium.Cartesian3.fromDegrees(data[i][0], data[i][1]);
|
|
|
- arr.push(cart3);
|
|
|
- }
|
|
|
- this.positions = arr;
|
|
|
- //构建控制点
|
|
|
- for (var i = 0; i < this.positions.length; i++) {
|
|
|
- var point = this.creatPoint(this.positions[i]);
|
|
|
- point.show = false;
|
|
|
- point.wz = i + 1;
|
|
|
- this.pointArr.push(point);
|
|
|
- }
|
|
|
- this.arrowEntity = this.showArrowOnMap(this.positions);
|
|
|
- this.arrowEntity.objId = this.objId;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 图形修改
|
|
|
- */
|
|
|
- startModify: function(options) {
|
|
|
-
|
|
|
- this.state = 2;
|
|
|
- var $this = this;
|
|
|
- for (var i = 0; i < $this.pointArr.length; i++) {
|
|
|
- $this.pointArr[i].show = true;
|
|
|
- }
|
|
|
- if (!this.modifyHandler) this.modifyHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- this.modifyHandler.setInputAction(function(evt) { //单机开始绘制
|
|
|
-
|
|
|
- var pick = $this.viewer.scene.pick(evt.position);
|
|
|
- if (Cesium.defined(pick) && pick.id) {
|
|
|
- $this.clickStep++;
|
|
|
- if (!pick.id.objId) {
|
|
|
- $this.selectPoint = pick.id;
|
|
|
- } else {
|
|
|
- $this.selectPoint = pick.id;
|
|
|
-
|
|
|
- for (var i = 0; i < $this.pointArr.length; i++) {
|
|
|
- $this.pointArr[i].show = false;
|
|
|
- }
|
|
|
- if ($this.floatPoint) $this.floatPoint.show = false;
|
|
|
- $this.state = -1;
|
|
|
- $this.modifyHandler.destroy();
|
|
|
- $this.modifyHandler = null;
|
|
|
-
|
|
|
- /* 回调返回 */
|
|
|
- if (options.onComplete) options.onComplete(pick.id.objId);
|
|
|
- }
|
|
|
- } else { //激活移动点之后 单机面之外 移除这个事件
|
|
|
- for (var i = 0; i < $this.pointArr.length; i++) {
|
|
|
- $this.pointArr[i].show = false;
|
|
|
- }
|
|
|
- if ($this.floatPoint) $this.floatPoint.show = false;
|
|
|
- $this.state = -1;
|
|
|
- $this.modifyHandler.destroy();
|
|
|
- $this.modifyHandler = null;
|
|
|
- }
|
|
|
- if ($this.clickStep == 2) {
|
|
|
- $this.clickStep = 0;
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.position);
|
|
|
- if (!cartesian) return;
|
|
|
- if ($this.selectPoint) {
|
|
|
- $this.selectPoint.position.setValue(cartesian);
|
|
|
- $this.selectPoint = null;
|
|
|
- }
|
|
|
- };
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- this.modifyHandler.setInputAction(function(evt) { //单机开始绘制
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.endPosition);
|
|
|
- if (!cartesian) return;
|
|
|
- if ($this.selectPoint) {
|
|
|
- $this.selectPoint.position.setValue(cartesian);
|
|
|
- $this.positions[$this.selectPoint.wz - 1] = cartesian; //上方的wz用于此处辨识修改positions数组里的哪个元素
|
|
|
- } else {
|
|
|
- return;
|
|
|
- }
|
|
|
- }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
- },
|
|
|
- //清除绘制箭头
|
|
|
- clear: function() {
|
|
|
- this.state = 0;
|
|
|
- for (var i = 0; i < this.pointArr.length; i++) {
|
|
|
- if (this.pointArr[i]) this.viewer.entities.remove(this.pointArr[i]);
|
|
|
- }
|
|
|
- if (this.floatPoint) this.viewer.entities.remove(this.floatPoint);
|
|
|
- if (this.arrowEntity) this.viewer.entities.remove(this.arrowEntity);
|
|
|
- this.state = -1;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 创建点
|
|
|
- * @param {Object} cartesian
|
|
|
- */
|
|
|
- creatPoint: function(cartesian) {
|
|
|
- var point = this.viewer.entities.add({
|
|
|
- position: cartesian,
|
|
|
- billboard: {
|
|
|
- image: this.pointImageUrl,
|
|
|
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
- disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
|
- }
|
|
|
- });
|
|
|
- point.attr = "editPoint";
|
|
|
- return point;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 绘制箭头
|
|
|
- * @param {Object} positions
|
|
|
- */
|
|
|
- showArrowOnMap: function(positions) {
|
|
|
- var $this = this;
|
|
|
- var update = function() {
|
|
|
- //计算面
|
|
|
- if (positions.length < 3) {
|
|
|
- return null;
|
|
|
- }
|
|
|
- var lnglatArr = [];
|
|
|
- for (var i = 0; i < positions.length; i++) {
|
|
|
- var lnglat = $this.cartesianToLatlng(positions[i]);
|
|
|
- lnglatArr.push(lnglat)
|
|
|
- }
|
|
|
- var res = xp.algorithm.tailedAttackArrow(lnglatArr);
|
|
|
- var index = JSON.stringify(res.polygonalPoint).indexOf("null");
|
|
|
- var returnData = [];
|
|
|
- if (index == -1) returnData = res.polygonalPoint;
|
|
|
- return new Cesium.PolygonHierarchy(returnData);
|
|
|
- }
|
|
|
- return this.viewer.entities.add({
|
|
|
- polygon: new Cesium.PolygonGraphics({
|
|
|
- hierarchy: new Cesium.CallbackProperty(update, false),
|
|
|
- show: true,
|
|
|
- fill: true,
|
|
|
- material: $this.fillMaterial
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
- //获取直角箭头中的关键点 经纬度
|
|
|
- getLnglats: function() {
|
|
|
- var arr = [];
|
|
|
- for (var i = 0; i < this.positions.length; i++) {
|
|
|
- var item = this.cartesianToLatlng(this.positions[i]);
|
|
|
- arr.push(item);
|
|
|
- }
|
|
|
- return arr;
|
|
|
- },
|
|
|
- cartesianToLatlng: function(cartesian) {
|
|
|
- var latlng = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
|
|
|
- var lat = Cesium.Math.toDegrees(latlng.latitude);
|
|
|
- var lng = Cesium.Math.toDegrees(latlng.longitude);
|
|
|
- return [lng, lat];
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-///====================================================================================================
|
|
|
-//钳击箭头
|
|
|
-var PincerArrow = function(viewer, options) {
|
|
|
- this.type = "PincerArrow";
|
|
|
- this.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0))
|
|
|
- this.viewer = viewer;
|
|
|
- this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- this.pointImageUrl = "jt3dSDK/imgs/point/point.png";
|
|
|
-
|
|
|
- options = options || {};
|
|
|
-
|
|
|
- options.color = Cesium.defaultValue(options.color, 'rgba(0,255,0,0.5)');
|
|
|
- options.polygonColor = Cesium.defaultValue(options.polygonColor, 'rgba(0,255,0,0.5)');
|
|
|
- options.outlineColor = Cesium.defaultValue(options.outlineColor, 'rgba(255,255,255,1)');
|
|
|
- options.outlineWidth = Cesium.defaultValue(options.outlineWidth, 1);
|
|
|
-
|
|
|
- /* 通用参数集合 */
|
|
|
- this._param = {
|
|
|
- id: "pincerArrow",
|
|
|
- color: options.color,
|
|
|
- polygonColor: options.polygonColor, //面填充颜色
|
|
|
- outlineColor: options.outlineColor, //边框颜色
|
|
|
- outlineWidth: options.outlineWidth, //边框宽度
|
|
|
- }
|
|
|
-
|
|
|
- /* 创建面材质 */
|
|
|
- this.fillMaterial = this._materialColorProperty({
|
|
|
- color: this._param.polygonColor,
|
|
|
- })
|
|
|
- /* 创建线材质 */
|
|
|
- this.outlineMaterial = this._materialColorProperty({
|
|
|
- color: this._param.outlineColor,
|
|
|
- })
|
|
|
-
|
|
|
- this.positions = [];
|
|
|
- this.state = -1; //state用于区分当前的状态 0 为删除 1为添加 2为编辑
|
|
|
- this.floatPoint = null;
|
|
|
- this.pointArr = [];
|
|
|
- this.selectPoint = null;
|
|
|
- this.clickStep = 0; //用于控制点的移动结束
|
|
|
- this.modifyHandler = null;
|
|
|
-}
|
|
|
-PincerArrow.prototype = {
|
|
|
- disable: function() {
|
|
|
- this.positions = [];
|
|
|
- if (this.arrowEntity) {
|
|
|
- this.viewer.entities.remove(this.arrowEntity);
|
|
|
- this.arrowEntity = null;
|
|
|
- }
|
|
|
- this.state = -1;
|
|
|
- if (this.handler) {
|
|
|
- this.handler.destroy();
|
|
|
- this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- }
|
|
|
- if (this.floatPoint) {
|
|
|
- this.viewer.entities.remove(this.floatPoint);
|
|
|
- this.floatPoint = null;
|
|
|
- }
|
|
|
- if (this.selectPoint) {
|
|
|
- this.viewer.entities.remove(this.selectPoint);
|
|
|
- this.selectPoint = null;
|
|
|
- }
|
|
|
- for (var i = 0; i < this.pointArr.length; i++) {
|
|
|
- if (this.pointArr[i]) this.viewer.entities.remove(this.pointArr[i]);
|
|
|
- }
|
|
|
- if (this.modifyHandler) {
|
|
|
- this.modifyHandler.destroy();
|
|
|
- this.modifyHandler = null;
|
|
|
- }
|
|
|
- this.clickStep = 0;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 取消鼠标事件
|
|
|
- * @param {Object} options
|
|
|
- */
|
|
|
- disableHandler: function() {
|
|
|
- if (this.handler) {
|
|
|
- this.handler.destroy();
|
|
|
- this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- }
|
|
|
- if (this.modifyHandler) {
|
|
|
- this.modifyHandler.destroy();
|
|
|
- this.modifyHandler = null;
|
|
|
- }
|
|
|
-
|
|
|
- this.state = -1;
|
|
|
- if (this.pointArr) {
|
|
|
- for (var i = 0; i < this.pointArr.length; i++) {
|
|
|
- this.pointArr[i].show = false;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 更新面的属性
|
|
|
- * @ignore 不公开方法
|
|
|
- * @param {Object} params
|
|
|
- */
|
|
|
- _updatePolygonProperty: function(params) {
|
|
|
- let material = this.arrowEntity.polygon.material;
|
|
|
- if (material instanceof Cesium.ColorMaterialProperty) {
|
|
|
- let newMaterial = this._materialColorProperty({
|
|
|
- color: params.polygonColor,
|
|
|
- });
|
|
|
- this.arrowEntity.polygon.material = newMaterial;
|
|
|
- }
|
|
|
- if (this.arrowEntity.polyline !== undefined) {
|
|
|
- let newMaterial = this._materialColorProperty({
|
|
|
- color: params.outlineColor,
|
|
|
- });
|
|
|
- this.arrowEntity.polyline.material = newMaterial;
|
|
|
- this.arrowEntity.polyline.width = parseFloat(params.outlineWidth);
|
|
|
- }
|
|
|
-
|
|
|
- /* 重新关联属性 */
|
|
|
- this._param = params;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 颜色材质
|
|
|
- * @ignore 生成方法时不对外公开
|
|
|
- * @param {JSON} options 配置项
|
|
|
- * @param {String} options.color 文字颜色 rgba(r,g,b,a)
|
|
|
- */
|
|
|
- _materialColorProperty(options) {
|
|
|
- let mColor = 'rgba(0,255,0,1)';
|
|
|
- if (options !== undefined && options.color !== undefined) mColor = options.color;
|
|
|
- /* 创建材质 */
|
|
|
- let colorMaterial = new Cesium.ColorMaterialProperty(Cesium.Color.fromCssColorString(mColor));
|
|
|
- colorMaterial._param = {
|
|
|
- color: mColor,
|
|
|
- }
|
|
|
- /* 返回材质 */
|
|
|
- return colorMaterial;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 开始绘制
|
|
|
- * @param {Object} options
|
|
|
- */
|
|
|
- startDraw: function(options) {
|
|
|
- var $this = this;
|
|
|
- let toolTip = "单击开始绘制";
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- toolTip = "点击开始绘制";
|
|
|
- _showTooltipMessage(toolTip);
|
|
|
- }
|
|
|
-
|
|
|
- this.state = 1;
|
|
|
-
|
|
|
- //左键单击开始绘制
|
|
|
- this.handler.setInputAction(function(evt) {
|
|
|
-
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.position);
|
|
|
- if (!cartesian) return;
|
|
|
-
|
|
|
- if ($this.positions.length == 0) {
|
|
|
- $this.floatPoint = $this.creatPoint(cartesian);
|
|
|
- toolTip = "单击添加点";
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- toolTip = "点击添加点";
|
|
|
- _showTooltipMessage(toolTip);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- $this.positions.push(cartesian);
|
|
|
- var point = $this.creatPoint(cartesian);
|
|
|
- if ($this.positions.length > 2) {
|
|
|
- if ($this.positions.length == 3) {
|
|
|
- toolTip = "再次单击结束绘制";
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- toolTip = "再次点击结束绘制";
|
|
|
- _showTooltipMessage(toolTip);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- point.wz = $this.positions.length; //点对应的在positions中的位置 屏蔽mouseMove里往postions添加时 未创建点
|
|
|
-
|
|
|
- if ($this.positions.length === 4) {
|
|
|
-
|
|
|
- for (var i = 0; i < $this.pointArr.length; i++) {
|
|
|
- $this.pointArr[i].show = false;
|
|
|
- }
|
|
|
- if ($this.floatPoint) { //移除动态点
|
|
|
- $this.floatPoint.show = false;
|
|
|
- $this.viewer.entities.remove($this.floatPoint);
|
|
|
- $this.floatPoint = null;
|
|
|
- }
|
|
|
-
|
|
|
- $this.handler.destroy();
|
|
|
-
|
|
|
- CreateRemindertip(toolTip, evt.endPosition, false);
|
|
|
-
|
|
|
- /* 回调返回 */
|
|
|
- if (options.onComplete) options.onComplete($this.positions, $this.getLnglats());
|
|
|
- }
|
|
|
- } else {
|
|
|
- point.wz = $this.positions.length - 1; //点对应的在positions中的位置 屏蔽mouseMove里往postions添加时 未创建点
|
|
|
- if ($this.positions.length === 5) {
|
|
|
-
|
|
|
- $this.positions.pop();
|
|
|
- for (var i = 0; i < $this.pointArr.length; i++) {
|
|
|
- $this.pointArr[i].show = false;
|
|
|
- }
|
|
|
- if ($this.floatPoint) { //移除动态点
|
|
|
- $this.floatPoint.show = false;
|
|
|
- $this.viewer.entities.remove($this.floatPoint);
|
|
|
- $this.floatPoint = null;
|
|
|
- }
|
|
|
-
|
|
|
- $this.handler.destroy();
|
|
|
-
|
|
|
- CreateRemindertip(toolTip, evt.endPosition, false);
|
|
|
-
|
|
|
- /* 回调返回 */
|
|
|
- if (options.onComplete) options.onComplete($this.positions, $this.getLnglats());
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- point.wz = $this.positions.length; //点对应的在positions中的位置
|
|
|
-
|
|
|
- if (_isRuntimeApp()) {
|
|
|
- toolTip = "点击添加点";
|
|
|
- _showTooltipMessage(toolTip);
|
|
|
-
|
|
|
- if ($this.positions.length === 2) {
|
|
|
- if (!Cesium.defined($this.arrowEntity)) {
|
|
|
- $this.arrowEntity = $this.showArrowOnMap($this.positions);
|
|
|
- $this.arrowEntity.objId = $this.objId;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- $this.pointArr.push(point);
|
|
|
-
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
-
|
|
|
- //移动时绘制面
|
|
|
- this.handler.setInputAction(function(evt) {
|
|
|
- /* 如果运行环境是App 则禁止使用移动事件 */
|
|
|
- if (_isRuntimeApp()) return;
|
|
|
-
|
|
|
- CreateRemindertip(toolTip, evt.endPosition, true);
|
|
|
-
|
|
|
- if ($this.positions.length < 2) return;
|
|
|
-
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.endPosition);
|
|
|
- if (!cartesian) return;
|
|
|
-
|
|
|
- $this.floatPoint.position.setValue(cartesian);
|
|
|
- if ($this.positions.length >= 2) {
|
|
|
- if (!Cesium.defined($this.arrowEntity)) {
|
|
|
- $this.positions.push(cartesian);
|
|
|
- $this.arrowEntity = $this.showArrowOnMap($this.positions);
|
|
|
- $this.arrowEntity.objId = $this.objId;
|
|
|
- } else {
|
|
|
- $this.positions.pop();
|
|
|
- $this.positions.push(cartesian);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
- },
|
|
|
-
|
|
|
- //根据传入的数据构建箭头
|
|
|
- createByData: function(data) {
|
|
|
- this.positions = []; //控制点
|
|
|
- this.state = -1; //state用于区分当前的状态 0 为删除 1为添加 2为编辑
|
|
|
- this.floatPoint = null;
|
|
|
- this.pointArr = []; //中间各点
|
|
|
- this.selectPoint = null;
|
|
|
- this.clickStep = 0; //用于控制点的移动结束
|
|
|
- this.modifyHandler = null;
|
|
|
- var arr = [];
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- var cart3 = Cesium.Cartesian3.fromDegrees(data[i][0], data[i][1]);
|
|
|
- arr.push(cart3);
|
|
|
- }
|
|
|
- this.positions = arr;
|
|
|
- //构建控制点
|
|
|
- for (var i = 0; i < this.positions.length; i++) {
|
|
|
- var point = this.creatPoint(this.positions[i]);
|
|
|
- point.show = false;
|
|
|
- point.wz = i + 1;
|
|
|
- this.pointArr.push(point);
|
|
|
- }
|
|
|
- this.arrowEntity = this.showArrowOnMap(this.positions);
|
|
|
- this.arrowEntity.objId = this.objId;
|
|
|
- },
|
|
|
- /**
|
|
|
- * 图形修改
|
|
|
- */
|
|
|
- startModify: function(options) {
|
|
|
-
|
|
|
- this.state = 2;
|
|
|
- var $this = this;
|
|
|
- for (var i = 0; i < $this.pointArr.length; i++) {
|
|
|
- $this.pointArr[i].show = true;
|
|
|
- }
|
|
|
- if (!this.modifyHandler) this.modifyHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
|
|
|
- this.modifyHandler.setInputAction(function(evt) { //单机开始绘制
|
|
|
-
|
|
|
- var pick = $this.viewer.scene.pick(evt.position);
|
|
|
- if (Cesium.defined(pick) && pick.id) {
|
|
|
-
|
|
|
- $this.clickStep++;
|
|
|
- if (!pick.id.objId) {
|
|
|
- $this.selectPoint = pick.id;
|
|
|
- } else {
|
|
|
- $this.selectPoint = pick.id;
|
|
|
-
|
|
|
- for (var i = 0; i < $this.pointArr.length; i++) {
|
|
|
- $this.pointArr[i].show = false;
|
|
|
- }
|
|
|
- $this.state = -1;
|
|
|
- $this.modifyHandler.destroy(); //激活移动点之后 单机面之外 移除这个事件
|
|
|
- $this.modifyHandler = null;
|
|
|
-
|
|
|
- /* 回调返回 */
|
|
|
- if (options.onComplete) options.onComplete(pick.id.objId);
|
|
|
- }
|
|
|
- } else {
|
|
|
- for (var i = 0; i < $this.pointArr.length; i++) {
|
|
|
- $this.pointArr[i].show = false;
|
|
|
- }
|
|
|
- $this.state = -1;
|
|
|
- $this.modifyHandler.destroy(); //激活移动点之后 单机面之外 移除这个事件
|
|
|
- $this.modifyHandler = null;
|
|
|
- }
|
|
|
- if ($this.clickStep == 2) {
|
|
|
- $this.clickStep = 0;
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.position);
|
|
|
- if (!cartesian) return;
|
|
|
- if ($this.selectPoint) {
|
|
|
- $this.selectPoint.position.setValue(cartesian);
|
|
|
- $this.selectPoint = null;
|
|
|
- }
|
|
|
-
|
|
|
- };
|
|
|
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
- this.modifyHandler.setInputAction(function(evt) { //单机开始绘制
|
|
|
- var cartesian;
|
|
|
- cartesian = getCatesian3FromPX($this.viewer, evt.endPosition);
|
|
|
- if (!cartesian) return;
|
|
|
- if ($this.selectPoint) {
|
|
|
- $this.selectPoint.position.setValue(cartesian);
|
|
|
- $this.positions[$this.selectPoint.wz - 1] = cartesian; //上方的wz用于此处辨识修改positions数组里的哪个元素
|
|
|
- } else {
|
|
|
- return;
|
|
|
- }
|
|
|
- }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
- },
|
|
|
- //清除绘制箭头
|
|
|
- clear: function() {
|
|
|
- this.state = 0;
|
|
|
- for (var i = 0; i < this.pointArr.length; i++) {
|
|
|
- if (this.pointArr[i]) this.viewer.entities.remove(this.pointArr[i]);
|
|
|
- }
|
|
|
- if (this.floatPoint) this.viewer.entities.remove(this.floatPoint);
|
|
|
- if (this.arrowEntity) this.viewer.entities.remove(this.arrowEntity);
|
|
|
- this.state = -1;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 创建点
|
|
|
- * @param {Object} cartesian
|
|
|
- */
|
|
|
- creatPoint: function(cartesian) {
|
|
|
- return this.viewer.entities.add({
|
|
|
- position: cartesian,
|
|
|
- billboard: {
|
|
|
- image: this.pointImageUrl,
|
|
|
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
|
|
- disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 绘制箭头
|
|
|
- * @param {Object} positions
|
|
|
- */
|
|
|
- showArrowOnMap: function(positions) {
|
|
|
- var $this = this;
|
|
|
- var update = function() {
|
|
|
- //计算面
|
|
|
- if (positions.length < 3) {
|
|
|
- return null;
|
|
|
- }
|
|
|
- var lnglatArr = [];
|
|
|
- for (var i = 0; i < positions.length; i++) {
|
|
|
- var lnglat = $this.cartesianToLatlng(positions[i]);
|
|
|
- lnglatArr.push(lnglat)
|
|
|
- }
|
|
|
- var res = xp.algorithm.doubleArrow(lnglatArr);
|
|
|
- var returnData = [];
|
|
|
- var index = JSON.stringify(res.polygonalPoint).indexOf("null");
|
|
|
- if (index == -1) returnData = res.polygonalPoint;
|
|
|
- return new Cesium.PolygonHierarchy(returnData);
|
|
|
- }
|
|
|
- return this.viewer.entities.add({
|
|
|
- polygon: new Cesium.PolygonGraphics({
|
|
|
- hierarchy: new Cesium.CallbackProperty(update, false),
|
|
|
- show: true,
|
|
|
- fill: true,
|
|
|
- material: $this.fillMaterial
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
- //获取直角箭头中的关键点 经纬度
|
|
|
- getLnglats: function() {
|
|
|
- var arr = [];
|
|
|
- for (var i = 0; i < this.positions.length; i++) {
|
|
|
- var item = this.cartesianToLatlng(this.positions[i]);
|
|
|
- arr.push(item);
|
|
|
- }
|
|
|
- return arr;
|
|
|
- },
|
|
|
- cartesianToLatlng: function(cartesian) {
|
|
|
- var latlng = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
|
|
|
- var lat = Cesium.Math.toDegrees(latlng.latitude);
|
|
|
- var lng = Cesium.Math.toDegrees(latlng.longitude);
|
|
|
- return [lng, lat];
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function getCatesian3FromPX(viewer, px) {
|
|
|
- var picks = viewer.scene.drillPick(px);
|
|
|
- viewer.render();
|
|
|
- var cartesian;
|
|
|
- var isOn3dtiles = true;
|
|
|
- for (var i = 0; i < picks.length; i++) {
|
|
|
- if ((picks[i] && picks[i].primitive) || picks[i] instanceof Cesium.Cesium3DTileFeature) { //模型上拾取
|
|
|
- isOn3dtiles = true;
|
|
|
- }
|
|
|
- }
|
|
|
- if (isOn3dtiles) {
|
|
|
- cartesian = viewer.scene.pickPosition(px);
|
|
|
- } else {
|
|
|
- var ray = viewer.camera.getPickRay(px);
|
|
|
- if (!ray) return null;
|
|
|
- cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
|
|
- }
|
|
|
- return cartesian;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-export {
|
|
|
- StraightArrow,
|
|
|
- AttackArrow,
|
|
|
- PincerArrow
|
|
|
-}
|