huweili-cesium 1.2.17 → 1.2.18

package/js/measureDistance.js

@@ -26,16 +26,19 @@ export function measureDistance() {
       position: new Cesium.CallbackProperty(() => options.getPosition(), false),
       label: {
         text: new Cesium.CallbackProperty(() => options.getText(), false),
-        font: options.font || '10px Microsoft YaHei',
+        font: options.font || 'bold 10px Microsoft YaHei',
         fillColor: options.fillColor || Cesium.Color.WHITE,
+        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+        outlineColor: Cesium.Color.BLACK,
+        outlineWidth: 2,
         showBackground: true,
-        backgroundColor: Cesium.Color.fromCssColorString(options.backgroundColor || 'rgba(0, 0, 0, 0.6)'),
-        backgroundPadding: options.backgroundPadding || new Cesium.Cartesian2(10, 6),
+        backgroundColor: Cesium.Color.fromCssColorString(options.backgroundColor || 'rgba(0, 0, 0, 0.7)'),
+        backgroundPadding: options.backgroundPadding || new Cesium.Cartesian2(4, 4),
         verticalOrigin: options.verticalOrigin || Cesium.VerticalOrigin.BOTTOM,
         horizontalOrigin: options.horizontalOrigin || Cesium.HorizontalOrigin.LEFT,
-        pixelOffset: options.pixelOffset || new Cesium.Cartesian2(16, -16),
+        pixelOffset: options.pixelOffset || new Cesium.Cartesian2(18, -18),
         disableDepthTestDistance: Number.POSITIVE_INFINITY,
-        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, options.maxDistance || Number.POSITIVE_INFINITY)
+        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, options.maxDistance || 2000000)
       }
     })
   }
@@ -190,12 +193,13 @@ export function measureDistance() {
           id: tempIds.startPoint,
           position: startPosition,
           point: {
-            pixelSize: 10,
+            pixelSize: 6,
             color,
             outlineColor: Cesium.Color.WHITE,
-            outlineWidth: 2,
+            outlineWidth: 1.5,
             disableDepthTestDistance: Number.POSITIVE_INFINITY,
-            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.5, 5000000, 0.5)
           }
         })
       }
@@ -205,9 +209,13 @@ export function measureDistance() {
           id: tempIds.line,
           polyline: {
             positions: new Cesium.CallbackProperty(() => getLinePositions(), false),
-            width,
-            material: color,
-            clampToGround
+            width: width + 2,
+            material: new Cesium.PolylineGlowMaterialProperty({
+              color: color,
+              glowPower: 0.25
+            }),
+            clampToGround,
+            antialias: true
           }
         })
       }
@@ -218,16 +226,20 @@ export function measureDistance() {
           position: new Cesium.CallbackProperty(() => getMidPosition(), false),
           label: {
             text: new Cesium.CallbackProperty(() => formatDistance(getCurrentDistance()), false),
-            font: '14px Microsoft YaHei',
+            font: 'bold 10px Microsoft YaHei',
             fillColor: Cesium.Color.WHITE,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
             showBackground: true,
-            backgroundColor: Cesium.Color.fromCssColorString('rgba(0, 0, 0, 0.65)'),
-            backgroundPadding: new Cesium.Cartesian2(10, 6),
+            backgroundColor: Cesium.Color.fromCssColorString('rgba(0, 0, 0, 0.75)'),
+            backgroundPadding: new Cesium.Cartesian2(4, 4),
             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
             horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-            pixelOffset: new Cesium.Cartesian2(0, -12),
+            pixelOffset: new Cesium.Cartesian2(0, -16),
             disableDepthTestDistance: Number.POSITIVE_INFINITY,
-            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, Number.POSITIVE_INFINITY)
+            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.6)
           }
         })
       }
@@ -239,41 +251,80 @@ export function measureDistance() {
         id: tempIds.endPoint,
         position: endPosition,
         point: {
-          pixelSize: 10,
+          pixelSize: 6,
           color,
           outlineColor: Cesium.Color.WHITE,
-          outlineWidth: 2,
+          outlineWidth: 1.5,
           disableDepthTestDistance: Number.POSITIVE_INFINITY,
-          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.5, 5000000, 0.5)
         }
       })
     }
 
     const createDeleteButtonEntity = () => {
       if (deleteButtonEntity || !endPosition) return
+      const outerGlow = map.entities.add({
+        id: `${tempIds.deleteButton}_outer_glow`,
+        position: new Cesium.CallbackProperty(() => getMidPosition(), false),
+        point: {
+          pixelSize: 32,
+          color: new Cesium.Color(0, 0.83, 1, 0.15),
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.5)
+        }
+      })
+      const ring = map.entities.add({
+        id: `${tempIds.deleteButton}_ring`,
+        position: new Cesium.CallbackProperty(() => getMidPosition(), false),
+        ellipse: {
+          semiMinorAxis: 14,
+          semiMajorAxis: 14,
+          material: new Cesium.Color(0, 0.83, 1, 0.6),
+          outline: true,
+          outlineColor: new Cesium.Color(0, 0.83, 1, 0.9),
+          outlineWidth: 2,
+          height: 10,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.5)
+        }
+      })
       deleteButtonEntity = map.entities.add({
         id: tempIds.deleteButton,
-        position: new Cesium.CallbackProperty(() => endPosition, false),
+        position: new Cesium.CallbackProperty(() => getMidPosition(), false),
+        point: {
+          pixelSize: 18,
+          color: new Cesium.Color(0.1, 0.2, 0.35, 0.95),
+          outlineColor: new Cesium.Color(0, 0.83, 1, 1),
+          outlineWidth: 2,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.5)
+        },
         label: {
-          text: '删除',
-          font: '700 13px Microsoft YaHei',
+          text: '✕',
+          font: 'bold 12px Arial',
+          fillColor: new Cesium.Color(0, 0.83, 1, 1),
           style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.fromCssColorString('#b71c1c'),
-          outlineWidth: 4,
-          showBackground: true,
-          backgroundColor: Cesium.Color.fromCssColorString('rgba(244, 67, 54, 0.96)'),
-          backgroundPadding: new Cesium.Cartesian2(12, 7),
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
-          pixelOffset: new Cesium.Cartesian2(16, -34),
+          outlineColor: new Cesium.Color(0, 0.5, 1, 0.8),
+          outlineWidth: 3,
+          verticalOrigin: Cesium.VerticalOrigin.CENTER,
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
           disableDepthTestDistance: Number.POSITIVE_INFINITY,
-          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, Number.POSITIVE_INFINITY)
+          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000),
+          scaleByDistance: new Cesium.NearFarScalar(1000, 1.2, 5000000, 0.5)
         }
       })
+      deleteButtonEntity.outerGlow = outerGlow
+      deleteButtonEntity.ring = ring
     }
 
     const removeTemporaryEntities = () => {
+      if (deleteButtonEntity) {
+        if (deleteButtonEntity.outerGlow) map.entities.remove(deleteButtonEntity.outerGlow)
+        if (deleteButtonEntity.ring) map.entities.remove(deleteButtonEntity.ring)
+      }
       ;[startPointEntity, endPointEntity, lineEntity, distanceLabelEntity, deleteButtonEntity, tipEntity].forEach((entity) => {
         if (entity) map.entities.remove(entity)
       })
@@ -312,13 +363,30 @@ export function measureDistance() {
     const finalize = () => {
       if (isFinished || !startPosition || !endPosition) return null
       isFinished = true
-      destroyHandler()
+      if (handler) {
+        handler.destroy()
+        handler = null
+      }
       if (tipEntity) {
         map.entities.remove(tipEntity)
         tipEntity = null
       }
       createEndPointEntity()
       createDeleteButtonEntity()
+      deleteHandler = new Cesium.ScreenSpaceEventHandler(map.scene.canvas)
+      deleteHandler.setInputAction((movement) => {
+        const picked = map.scene.pick(movement.position)
+        if (!Cesium.defined(picked)) return
+        const pickedEntity = picked.id
+        if (!Cesium.defined(pickedEntity)) return
+        if (typeof pickedEntity === 'string' && pickedEntity === tempIds.deleteButton) {
+          destroyGraphic()
+          if (typeof options.onDelete === 'function') options.onDelete(options.id)
+        } else if (pickedEntity === deleteButtonEntity) {
+          destroyGraphic()
+          if (typeof options.onDelete === 'function') options.onDelete(options.id)
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
       const result = buildResult()
       const graphic = {
         id: options.id,
@@ -376,15 +444,6 @@ export function measureDistance() {
       cancel()
     }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
 
-    deleteHandler = new Cesium.ScreenSpaceEventHandler(map.scene.canvas)
-    deleteHandler.setInputAction((movement) => {
-      const picked = map.scene.pick(movement.position)
-      const pickedEntity = picked?.id
-      if (!Cesium.defined(pickedEntity) || pickedEntity !== deleteButtonEntity) return
-      destroyGraphic()
-      if (typeof options.onDelete === 'function') options.onDelete(options.id)
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-
     return {
       id: options.id,
       finish: finalize,
@@ -430,3 +489,4 @@ export function measureDistance() {
     formatDistance
   }
 }
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "huweili-cesium",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "description": "基于 Cesium 的地图工具库（无人机态势、轨迹、围栏、工具栏等）",
   "type": "module",
   "main": "./index.js",