编辑线、面，文字标记和图片标记点

ansel0926

2022-05-15 ebc4c778854c8d2666b1bbaf3dcba2ba00f08453

 libs/Cesiumplus/CesiumDraw.js

@@ -262,6 +262,7 @@
               //    })
               // }
               addTreeNode(node, "4");
               saveDrawEntity("polygon",drawpointArr,measurePolyGonGroundEntity.id);
            }
            for (let i in drawpointArr) {
               viewer.entities.remove(drawpointArr[i]);
@@ -320,7 +321,6 @@
         measureLineGroundEntity.polyline.positions = new Cesium.CallbackProperty(function () {
            return measureLinePositonsArray;
         }, false)

         var drawpointArr = measureLineGroundEntity.drawpointArr;
         //节点添加标签
         function addPin(carPoi) {
@@ -455,6 +455,7 @@
                  // }

                  addTreeNode(node, "4");
                  saveDrawEntity("polyline",drawpointArr,measureLineGroundEntity.id);
               }
               for (let i in drawpointArr) {
                  viewer.entities.remove(drawpointArr[i]);
@@ -471,33 +472,44 @@
         drawHandler.setInputAction(function (movement) {
            //获取鼠标点击处的坐标
            drawHandler = drawHandler && drawHandler.destroy();
            var cartesian = options.viewer.scene.pickPosition(movement.position);
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var height = cartographic.height;//模型高度
            if (Number(height) < 0) {
               var ray = options.viewer.camera.getPickRay(movement.position);
               cartesian = options.viewer.scene.globe.pick(ray, options.viewer.scene);
            }
            cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            height = cartographic.height;//地形高度
            // var lng = Cesium.Math.toDegrees(cartographic.longitude);
            // var lat = Cesium.Math.toDegrees(cartographic.latitude);
            // var poiResult = lng + "," + lat + "," + height;
            // document.getElementById(options.printId).value = poiResult;
            // var drawPointEntity = options.viewer.entities.getById("drawPointEntity");
            // if(drawPointEntity == undefined){
            var entity = viewer.entities.add({
               name: 'drawPointEntity',
               position: cartesian.clone(),
               point: {
                  color: options.pointcolor,
                  pixelSize: 10,
                  outlineColor: Cesium.Color.WHITE,
                  outlineWidth: 2,
                  disableDepthTestDistance: Number.POSITIVE_INFINITY
            let position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
            let pointText="点" + new Date().format("yyyyMMddhhmmss");
            var entity=viewer.entities.add({
               name:"drawPointEntity",
               position:position,
               label: {
                  show: true,
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                  font: '10px SimSun',
                  fillColor: Cesium.Color.WHITE,
                  text: pointText,
                  disableDepthTestDistance: Number.POSITIVE_INFINITY,
                  heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000000.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: new Cesium.DistanceDisplayCondition(0, 200000000.0)
               }
            });
            entity.title =  "点" + new Date().format("yyyyMMddhhmmss");
            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,
@@ -506,62 +518,58 @@
               "spread": true,
               "children": [],
               "ext": {
                  "lng": Cesium.Math.toDegrees(cartographic.longitude),
                  "lat": Cesium.Math.toDegrees(cartographic.latitude)
                  "lng": Cesium.Math.toDegrees(cartesian.x),
                  "lat": Cesium.Math.toDegrees(cartesian.y)
               }
            }, "4");
            saveDrawEntity("point",entity,entity.id);
         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      }

      /**
       * options{
       *    viewer:CesiumViewer,
       *    label:{
       *       text:'文字',
       *       font: '24px Helvetica',
       *       fillColor: Cesium.Color.SKYBLUE,
       *       outlineColor: Cesium.Color.BLACK,
       *       outlineWidth: 2,
       *       style: Cesium.LabelStyle.FILL_AND_OUTLINE,
       *       scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 200, 0.4)
       *    }
       * }
       */
      CesiumDraw.drawLabel = function (options) {
         drawHandler = drawHandler && drawHandler.destroy();
         drawHandler = new Cesium.ScreenSpaceEventHandler(options.viewer.scene.canvas);
         drawHandler.setInputAction(function (movement) {
            var cartesian = options.viewer.scene.pickPosition(movement.position);
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var height = cartographic.height;//模型高度
            if (Number(height) < 0) {
               var ray = options.viewer.camera.getPickRay(movement.position);
               cartesian = options.viewer.scene.globe.pick(ray, options.viewer.scene);
            }
				
            cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            height = cartographic.height;//地形高度
            var entity = viewer.entities.add({
               name: 'drawLabelEtity',
               position: cartesian.clone(),
            //获取鼠标点击处的坐标
            drawHandler = drawHandler && drawHandler.destroy();
            let position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
            let labelText="文字" + new Date().format("yyyyMMddhhmmss");
            var entity=viewer.entities.add({
               name:"drawLabelEntity",
               position:position,
               label: {
                  text: options.label.text,
                  font: options.label.font,
                  fillColor: options.label.fillColor,
                  outlineColor: options.label.outlineColor,
                  outlineWidth: options.label.outlineWidth,
                  style: options.label.style,
                  //scaleByDistance: options.label.scaleByDistance,
                  //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
                  show: true,
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                  font: '30px SimSun',
                  fillColor: Cesium.Color.WHITE,
                  text: labelText,
                  disableDepthTestDistance: Number.POSITIVE_INFINITY,
                  heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                  distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000000000.0)
                  distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000000.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: new Cesium.DistanceDisplayCondition(0, 200000000.0)
               }
            });
            //entity.title = "文字" + new Date().format("yyyyMMddhhmmss"),
            entity.title =options.label.text,//修改树结构文字标题：zzf
            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,
@@ -570,11 +578,11 @@
               "spread": true,
               "children": [],
               "ext": {
                  "lng": Cesium.Math.toDegrees(cartographic.longitude),
                  "lat": Cesium.Math.toDegrees(cartographic.latitude)
                  "lng": Cesium.Math.toDegrees(cartesian.x),
                  "lat": Cesium.Math.toDegrees(cartesian.y)
               }
            }, "4");
            drawHandler = drawHandler && drawHandler.destroy();
            saveDrawEntity("label",entity,entity.id);
         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      }

@@ -592,4 +600,5 @@
   } else {
      console.log("CesiumDraw already defined.");
   }
})(window);
})(window);