/* * draw tools */ (function (window) { 'use strict'; function define_CesiumDraw() { //Main object var CesiumDraw = {}; var drawHandler; var pinBuilder = new Cesium.PinBuilder();//创建cesium pin标签 /*** * 坐标转换 84转笛卡尔 * * @param {Object} {lng,lat,alt} 地理坐标 * * @return {Object} Cartesian3 三维位置坐标 */ CesiumDraw.transformWGS84ToCartesian = function (position, alt) { return position ? Cesium.Cartesian3.fromDegrees( position.lng || position.lon, position.lat, position.alt = alt || position.alt, Cesium.Ellipsoid.WGS84 ) : Cesium.Cartesian3.ZERO }; /*** * 坐标数组转换 笛卡尔转84 * * @param {Array} WSG84Arr {lng,lat,alt} 地理坐标数组 * @param {Number} alt 拔高 * @return {Array} Cartesian3 三维位置坐标数组 */ CesiumDraw.transformWGS84ArrayToCartesianArray = function (WSG84Arr, alt) { var $this = this return WSG84Arr ? WSG84Arr.map(function (item) { return $this.transformWGS84ToCartesian(item, alt) }) : [] }; /*** * 坐标转换 笛卡尔转84 * * @param {Object} Cartesian3 三维位置坐标 * * @return {Object} {lng,lat,alt} 地理坐标 */ CesiumDraw.transformCartesianToWGS84 = function (cartesian) { var ellipsoid = Cesium.Ellipsoid.WGS84 var cartographic = ellipsoid.cartesianToCartographic(cartesian) return { lng: Cesium.Math.toDegrees(cartographic.longitude), lat: Cesium.Math.toDegrees(cartographic.latitude), alt: cartographic.height } } /*** * 坐标数组转换 笛卡尔转86 * * @param {Array} cartesianArr 三维位置坐标数组 * * @return {Array} {lng,lat,alt} 地理坐标数组 */ CesiumDraw.transformCartesianArrayToWGS84Array = function (cartesianArr) { var $this = this return cartesianArr ? cartesianArr.map(function (item) { return $this.transformCartesianToWGS84(item) }) : [] }, /** * 84坐标转弧度坐标 * @param {Object} position wgs84 * @return {Object} Cartographic 弧度坐标 * */ CesiumDraw.transformWGS84ToCartographic = function (position) { return position ? Cesium.Cartographic.fromDegrees( position.lng || position.lon, position.lat, position.alt ) : Cesium.Cartographic.ZERO }; /** * 拾取位置点 * * @param {Object} px 屏幕坐标 * * @return {Object} Cartesian3 三维坐标 */ CesiumDraw.getCatesian3FromPX = function (viewer, px) { if (viewer && px) { var picks = viewer.scene.drillPick(px) var cartesian = null; var isOn3dtiles = false, isOnTerrain = false; // drillPick for (let i in picks) { let pick = picks[i] if (pick && pick.primitive instanceof Cesium.Cesium3DTileFeature || pick && pick.primitive instanceof Cesium.Cesium3DTileset || pick && pick.primitive instanceof Cesium.Model) { //模型上拾取 isOn3dtiles = true; } // 3dtilset if (isOn3dtiles) { viewer.scene.pick(px) // pick cartesian = viewer.scene.pickPosition(px); if (cartesian) { let cartographic = Cesium.Cartographic.fromCartesian(cartesian); if (cartographic.height < 0) cartographic.height = 0; let lon = Cesium.Math.toDegrees(cartographic.longitude) , lat = Cesium.Math.toDegrees(cartographic.latitude) , height = cartographic.height; cartesian = this.transformWGS84ToCartesian({ lng: lon, lat: lat, alt: height }) } } } // 地形 let boolTerrain = viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider; // Terrain if (!isOn3dtiles && !boolTerrain) { var ray = viewer.scene.camera.getPickRay(px); if (!ray) return null; cartesian = viewer.scene.globe.pick(ray, viewer.scene); isOnTerrain = true } // 地球 if (!isOn3dtiles && !isOnTerrain && boolTerrain) { cartesian = viewer.scene.camera.pickEllipsoid(px, viewer.scene.globe.ellipsoid); } if (cartesian) { let position = this.transformCartesianToWGS84(cartesian) if (position.alt < 0) { cartesian = this.transformWGS84ToCartesian(position, 0.1) } return cartesian; } return false; } }; /* * options = { * 'viewer':viewer, * 'polygoncolor':Cesium.Color.YELLOW, * 'pointcolor':Cesium.Color.RED, * 'printId':'textid', * 'type':'net', * }; * */ //绘制多边形面 CesiumDraw.drawPolygon = function (options) { var polygon = new Cesium.PolygonHierarchy(); var measurePolyGonGroundEntity = options.viewer.entities.add({ name: 'measurePolyGonGroundEntity', polygon: { material: new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.3)), classificationType: Cesium.ClassificationType.BOTH, outline: true, outlineColor: Cesium.Color.WHITE, hierarchy: new Cesium.CallbackProperty(function () { return polygon; }, false), distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000.0) } }); var drawpointArr = []; drawHandler = drawHandler && drawHandler.destroy(); drawHandler = new Cesium.ScreenSpaceEventHandler(options.viewer.scene.canvas); drawHandler.setInputAction(function (movement) { entityMouseClickListenerIsEnable = false; var earthPosition = CesiumDraw.getCatesian3FromPX(options.viewer, movement.position); if (earthPosition && earthPosition.x) { if (polygon.positions.length > 1) { let last = polygon.positions[polygon.positions.length - 2]; if (Math.abs(earthPosition.x - last.x) > 0.000001 && Math.abs(earthPosition.y - last.y) > 0.000001) { polygon.positions.push(earthPosition); createPoint(earthPosition); } } else { polygon.positions.push(earthPosition); createPoint(earthPosition); } if (polygon.positions.length > 2) { measurePolyGonGroundEntity.show = true; } } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); drawHandler.setInputAction(function (movement) { var newPosition = options.viewer.scene.pickPosition(movement.endPosition); var cartographic = Cesium.Cartographic.fromCartesian(newPosition); var height = cartographic.height; //模型高度 if (Number(height) < 0) { var ray = options.viewer.camera.getPickRay(movement.endPosition); newPosition = options.viewer.scene.globe.pick(ray, options.viewer.scene); } if (newPosition && newPosition.x) { polygon.positions.pop(); polygon.positions.push(newPosition); } if (polygon.positions.length > 2) { measurePolyGonGroundEntity.show = true; } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); drawHandler.setInputAction(function (movement) { if (polygon.positions.length > 1) { polygon.positions.splice(polygon.positions.length - 2, 1); } if (polygon.positions.length < 3) { measurePolyGonGroundEntity.show = false; } options.viewer.entities.remove(drawpointArr[drawpointArr.length - 1]); drawpointArr.pop(); }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); drawHandler.setInputAction(function (movement) { polygon.positions.pop(); drawHandler = drawHandler && drawHandler.destroy(); if (polygon.positions.length < 3) { options.viewer.entities.remove(measurePolyGonGroundEntity); } else { var polyPositions = measurePolyGonGroundEntity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions; var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center; polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter); let cartographic = Cesium.Cartographic.fromCartesian(polyCenter, viewer.scene.globe.ellipsoid, new Cesium.Cartographic()); measurePolyGonGroundEntity.title = "面" + new Date().format("yyyyMMddhhmmss"); var node = { "title": measurePolyGonGroundEntity.title, "id": measurePolyGonGroundEntity.id, "field": "Entity", "checked": true, "spread": true, "children": [], "ext": { "lng": Cesium.Math.toDegrees(cartographic.longitude), "lat": Cesium.Math.toDegrees(cartographic.latitude) } }; // for (let i in drawpointArr) { // cartographic = Cesium.Cartographic.fromCartesian(drawpointArr[i].position._value, viewer.scene.globe.ellipsoid, new Cesium.Cartographic()); // let index = Number(i) + 1; // node.children.push({ // "title": "端点" + index, // "id": drawpointArr[i].id, // "field": "Entity", // "checked": true, // "spread": true, // "children": [], // "ext": { // "lng": Cesium.Math.toDegrees(cartographic.longitude), // "lat": Cesium.Math.toDegrees(cartographic.latitude) // } // }) // } addTreeNode(node, "4"); saveDrawEntity("polygon",drawpointArr,measurePolyGonGroundEntity.id); } for (let i in drawpointArr) { viewer.entities.remove(drawpointArr[i]); } entityMouseClickListenerIsEnable = true; }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); function createPoint(worldPosition) { drawpointArr.push(options.viewer.entities.add({ position: worldPosition, point: { color: Cesium.Color.RED, pixelSize: 5, outlineWidth: 2, outlineColor: Cesium.Color.WHITE, disableDepthTestDistance: Number.POSITIVE_INFINITY } })); } }; /*var options = { 'viewer':viewer, 'polylinecolor':Cesium.Color.YELLOW, 'pointcolor':Cesium.Color.RED, 'printId':'textid', 'text':'证' };*/ CesiumDraw.drawPolyline = function (options) { drawHandler = drawHandler && drawHandler.destroy(); var isFirst = true;//是否为第一个点 var previousPosition;//前一个点的坐标 var currentPosition;//当前点坐标 var dynamicPositions = []; var dynamicLineGroundEntity = options.viewer.entities.add({ name: 'dynamicLineGroundEntity', polyline: { clampToGround: true, width: 2, material: options.pointcolor, } }); dynamicLineGroundEntity.polyline.positions = new Cesium.CallbackProperty(function () { return dynamicPositions; }, false) //已输入的线段的entity var measureLinePositonsArray = [];//存储已量测的线段的折点 var measureLineGroundEntity = options.viewer.entities.add({ name: 'measureLineGroundEntity', polyline: { clampToGround: true, width: 1, material: options.polylinecolor, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000.0) }, drawpointArr: [], measureLinePositonsArray: measureLinePositonsArray }); measureLineGroundEntity.polyline.positions = new Cesium.CallbackProperty(function () { return measureLinePositonsArray; }, false) var drawpointArr = measureLineGroundEntity.drawpointArr; //节点添加标签 function addPin(carPoi) { drawpointArr.push(options.viewer.entities.add({ position: carPoi, point: { pixelSize: 5, color: options.pointcolor, disableDepthTestDistance: Number.POSITIVE_INFINITY, outlineWidth: 3, outlineColor: options.polylinecolor }, })); } function popPin() { options.viewer.entities.remove(drawpointArr[drawpointArr.length - 1]); measureLinePositonsArray.pop(); drawpointArr.pop(); if (measureLinePositonsArray.length > 0) { previousPosition = measureLinePositonsArray[measureLinePositonsArray.length - 1]; dynamicPositions = [previousPosition, currentPosition]; } else { previousPosition = undefined; isFirst = true; dynamicPositions = []; // dynamicLineGroundEntity.show = false; } } drawHandler = new Cesium.ScreenSpaceEventHandler(options.viewer.scene.canvas); // var $this = this; drawHandler.setInputAction(function (movement) { entityMouseClickListenerIsEnable = false; if (isFirst) { previousPosition = CesiumDraw.getCatesian3FromPX(options.viewer, movement.position); if (previousPosition && previousPosition.x) { var tmp1 = previousPosition.clone(); measureLinePositonsArray.push(tmp1); isFirst = false; addPin(tmp1); } } else { currentPosition = CesiumDraw.getCatesian3FromPX(options.viewer, movement.position); if (currentPosition && currentPosition.x) { if (Math.abs(previousPosition.x - currentPosition.x) > 0.000001 || Math.abs(previousPosition.y - currentPosition.y) > 0.000001) { var tmp2 = currentPosition.clone(); measureLinePositonsArray.push(tmp2); previousPosition = currentPosition.clone(); dynamicPositions = [previousPosition, currentPosition]; addPin(tmp2); } } } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); drawHandler.setInputAction(function (movement) { if (!isFirst) { //获取当前点的坐标 currentPosition = CesiumDraw.getCatesian3FromPX(options.viewer, movement.endPosition); if (currentPosition && currentPosition.x) { dynamicPositions = [previousPosition, currentPosition]; } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); drawHandler.setInputAction(function () { if (!isFirst) { popPin(); } }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); drawHandler.setInputAction(function () { if (!isFirst) { viewer.entities.remove(dynamicLineGroundEntity); drawHandler = drawHandler && drawHandler.destroy(); if (drawpointArr.length < 2) { popPin(); viewer.entities.remove(measureLineGroundEntity); } else { // var polyPositions = measureLineGroundEntity.polyline.positions._value; // var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center; // polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter); // let cartographic = Cesium.Cartographic.fromCartesian(polyCenter, viewer.scene.globe.ellipsoid, new Cesium.Cartographic()); // var result = ""; // var Ox = 547425; // var Oy = 4207432; // var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(114.53966, 37.99802); // var translateMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid); // var londx = (114.5418 - 114.5377) / 100.0; // var latdx = (37.9994 - 37.9967) / 100.0; // for (var i = 114.5377; i < 114.5418; i += londx) { // for (var j = 37.9967; j < 37.9994; j += latdx) { // var cartesian3 = Cesium.Cartesian3.fromDegrees(i, j); // let cartographic = Cesium.Cartographic.fromCartesian(cartesian3); // var h1 = viewer.scene.globe.getHeight(cartographic); // var x = (cartesian3.x - translateMatrix[12]) * translateMatrix[0] + // (cartesian3.y - translateMatrix[13]) * translateMatrix[1] + // (cartesian3.z - translateMatrix[14]) * translateMatrix[2] + Ox; // var y = (cartesian3.x - translateMatrix[12]) * translateMatrix[4] + // (cartesian3.y - translateMatrix[13]) * translateMatrix[5] + // (cartesian3.z - translateMatrix[14]) * translateMatrix[6] + Oy; // console.log(x,y,h1); // result = result + x + "," + y + "," + h1 + "|"; // } // } measureLineGroundEntity.title = "折线" + new Date().format("yyyyMMddhhmmss"); var node = { "title": measureLineGroundEntity.title, "id": measureLineGroundEntity.id, "field": "Entity", "checked": true, "spread": true, "children": [], "ext": { // "lng": Cesium.Math.toDegrees(cartographic.longitude), // "lat": Cesium.Math.toDegrees(cartographic.latitude) } }; // for (let i in drawpointArr) { // cartographic = Cesium.Cartographic.fromCartesian(drawpointArr[i].position._value, viewer.scene.globe.ellipsoid, new Cesium.Cartographic()); // let index = Number(i) + 1; // node.children.push({ // "title": "端点" + index, // "id": drawpointArr[i].id, // "field": "Entity", // "checked": true, // "spread": true, // "children": [], // "ext": { // "lng": Cesium.Math.toDegrees(cartographic.longitude), // "lat": Cesium.Math.toDegrees(cartographic.latitude) // } // }) // } addTreeNode(node, "4"); saveDrawEntity("polyline",drawpointArr,measureLineGroundEntity.id); } for (let i in drawpointArr) { viewer.entities.remove(drawpointArr[i]); } drawpointArr.length = 0; } entityMouseClickListenerIsEnable = true; }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); } CesiumDraw.drawPoint = function (options) { drawHandler = drawHandler && drawHandler.destroy(); drawHandler = new Cesium.ScreenSpaceEventHandler(options.viewer.scene.canvas); drawHandler.setInputAction(function (movement) { //获取鼠标点击处的坐标 drawHandler = drawHandler && drawHandler.destroy(); let position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid); position = viewer.scene.pickPosition(movement.position); let pointText="点" + new Date().format("yyyyMMddhhmmss"); var entity=viewer.entities.add({ name:"drawPointEntity", position:position, label: { text: pointText, show: true, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, font: '10px SimSun', fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 2, style: Cesium.LabelStyle.FILL_AND_OUTLINE, eyeOffset:new Cesium.Cartesian3(0,20,0), verticalOrigin: Cesium.VerticalOrigin.BOTTOM, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, disableDepthTestDistance: Number.POSITIVE_INFINITY, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0) }, billboard: { image: "../assets/images/icon/icon1.png", width: 40, height: 40, rotation: 0, verticalOrigin: Cesium.VerticalOrigin.TOP, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, disableDepthTestDistance: Number.POSITIVE_INFINITY,//广告牌不进行深度检测 heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0) } }); entity.title = pointText; var cartesian = entity._position._value let popup = new Popup({ viewer:viewer, geometry:cartesian, entity:entity, id: "pop_" + entity.id, type:'image', content:null, }) addTreeNode({ "title": entity.title, "id": entity.id, "field": "Entity", "checked": true, "spread": true, "children": [], "ext": { "lng": Cesium.Math.toDegrees(cartesian.x), "lat": Cesium.Math.toDegrees(cartesian.y) } }, "4"); saveDrawEntity("point",entity,entity.id); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } CesiumDraw.drawLabel = function (options) { drawHandler = drawHandler && drawHandler.destroy(); drawHandler = new Cesium.ScreenSpaceEventHandler(options.viewer.scene.canvas); drawHandler.setInputAction(function (movement) { //获取鼠标点击处的坐标 drawHandler = drawHandler && drawHandler.destroy(); let position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid); position = viewer.scene.pickPosition(movement.position); let labelText="文字" + new Date().format("yyyyMMddhhmmss"); var entity=viewer.entities.add({ name:"drawLabelEntity", position:position, label: { show: true, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, font: '30px SimSun', fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 2, style: Cesium.LabelStyle.FILL_AND_OUTLINE, text: labelText, eyeOffset:new Cesium.Cartesian3(0,20,0), disableDepthTestDistance: Number.POSITIVE_INFINITY, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0) }, billboard: { image: "../assets/images/icon/icon1.png", width: 40, height: 40, rotation: 0, verticalOrigin: Cesium.VerticalOrigin.TOP, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, disableDepthTestDistance: Number.POSITIVE_INFINITY,//广告牌不进行深度检测 heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0) } }); entity.title = labelText; var cartesian = entity._position._value let popup = new Popup({ viewer:viewer, geometry:cartesian, entity:entity, id: "pop_" + entity.id, type:'label', content:null, }) addTreeNode({ "title": entity.title, "id": entity.id, "field": "Entity", "checked": true, "spread": true, "children": [], "ext": { "lng": Cesium.Math.toDegrees(cartesian.x), "lat": Cesium.Math.toDegrees(cartesian.y) } }, "4"); saveDrawEntity("label",entity,entity.id); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } CesiumDraw.drawText = function (options) { drawHandler = drawHandler && drawHandler.destroy(); drawHandler = new Cesium.ScreenSpaceEventHandler(options.viewer.scene.canvas); drawHandler.setInputAction(function (movement) { let position = viewer.scene.pickPosition(movement.position); let labelText="标签" + new Date().format("yyyyMMddhhmmss"); var entity=viewer.entities.add({ name:"drawTextEtity", position:position, label: { show: true, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, font: '20px LiSu', fillColor: Cesium.Color.YELLOW, outlineColor: Cesium.Color.BLACK, outlineWidth: 2, style: Cesium.LabelStyle.FILL_AND_OUTLINE, text: labelText, disableDepthTestDistance: Number.POSITIVE_INFINITY, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0) }, }); entity.title = labelText; var cartesian = entity._position._value addTreeNode({ "title": entity.title, "id": entity.id, "field": "Entity", "checked": true, "spread": true, "children": [], "ext": { "lng": Cesium.Math.toDegrees(cartesian.x), "lat": Cesium.Math.toDegrees(cartesian.y) } }, "4"); saveDrawEntity("text",entity,entity.id); drawHandler = drawHandler && drawHandler.destroy(); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } CesiumDraw.clearDraw = function (options) { } CesiumDraw.clearDrawHandler = function () { drawHandler = drawHandler && drawHandler.destroy(); } return CesiumDraw; } if (typeof (CesiumDraw) === 'undefined') { window.CesiumDraw = define_CesiumDraw(); } else { console.log("CesiumDraw already defined."); } })(window);