同步代码

package.json

@@ -24,7 +24,7 @@
     "echarts": "^5.4.3",
     "lodash": "^4.17.21",
     "mars3d": "~3.6.0",
-    "mars3d-cesium": "^1.110.0",
+    "mars3d-cesium": "~1.111.1",
     "monaco-editor": "^0.33.0",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",

public/config/example.json

@@ -608,12 +608,14 @@
           {
             "name": "双屏对比",
             "thumbnail": "map-double-compare.jpg",
-            "main": "map/double/compare"
+            "main": "map/double/compare",
+            "hasPannel": true
           },
           {
             "name": "卷帘对比",
             "thumbnail": "control-basis-mapSplit.jpg",
-            "main": "control/basis/mapSplit"
+            "main": "control/basis/mapSplit",
+            "hasPannel": true
           },
           {
             "name": "鹰眼地图",
@@ -950,6 +952,11 @@
             "resources": ["/temp/css/divGraphic.css", "/lib/dom2img/dom-to-image.js"]
           },
           {
+            "name": "全景点展示",
+            "thumbnail": "graphic-entity-billboard-panorama.jpg",
+            "main": "graphic/entity/billboard-panorama"
+          },
+          {
             "name": "Plane 平面",
             "thumbnail": "graphic-entity-plane.jpg",
             "main": "graphic/entity/plane",
@@ -1484,6 +1491,12 @@
             "thumbnail": "graphic-combine-water.jpg",
             "main": "graphic/combine/water",
             "hasPannel": true
+          },
+          {
+            "name": "河流断面水面动态升降",
+            "thumbnail": "graphic-combine-water-section.jpg",
+            "main": "graphic/combine/water-section",
+            "resources": ["water-data.js"]
           }
         ]
       },
@@ -2364,7 +2377,8 @@
           {
             "name": "双屏对比",
             "thumbnail": "map-double-compare.jpg",
-            "main": "map/double/compare"
+            "main": "map/double/compare",
+            "hasPannel": true
           },
           {
             "name": "二三维联动(与leaflet)",
@@ -2523,7 +2537,41 @@
         ]
       },
       {
-        "name": "各种特效",
+        "name": "其他",
+        "children": [
+          {
+            "name": "月球",
+            "thumbnail": "map-other-moon.jpg",
+            "main": "map/other/moon",
+            "resources": ["background.css"]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "特效",
+    "icon": "fa-futbol-o",
+    "children": [
+      {
+        "name": "对象交互特效",
+        "children": [
+          {
+            "name": "对象描边",
+            "thumbnail": "effect-outlineEffect.jpg",
+            "main": "effect/outlineEffect",
+            "hasPannel": true
+          },
+          {
+            "name": "对象泛光",
+            "thumbnail": "effect-bloomTarget.jpg",
+            "main": "effect/bloomTarget",
+            "hasPannel": true
+          }
+        ]
+      },
+      {
+        "name": "天气特效",
         "children": [
           {
             "name": "雾天气",
@@ -2547,17 +2595,16 @@
             "name": "云图",
             "thumbnail": "graphic-entity-rectangle-cloud.gif",
             "main": "graphic/entity/rectangle-cloud"
+          }
+        ]
       },
       {
-            "name": "对象描边",
-            "thumbnail": "effect-outlineEffect.jpg",
-            "main": "effect/outlineEffect",
-            "hasPannel": true
-          },
+        "name": "色彩特效",
+        "children": [
           {
-            "name": "对象泛光",
-            "thumbnail": "effect-bloomTarget.jpg",
-            "main": "effect/bloomTarget",
+            "name": "颜色校正",
+            "thumbnail": "effect-colorCorrection.jpg",
+            "main": "effect/colorCorrection",
             "hasPannel": true
           },
           {
@@ -2573,18 +2620,6 @@
             "hasPannel": true
           },
           {
-            "name": "夜视效果",
-            "thumbnail": "effect-nightVision.jpg",
-            "main": "effect/nightVision",
-            "hasPannel": true
-          },
-          {
-            "name": "黑白效果",
-            "thumbnail": "effect-blackAndWhite.jpg",
-            "main": "effect/blackAndWhite",
-            "hasPannel": true
-          },
-          {
             "name": "马赛克效果",
             "thumbnail": "effect-mosaic.jpg",
             "main": "effect/mosaic",
@@ -2595,17 +2630,18 @@
             "thumbnail": "effect-depthOfField.jpg",
             "main": "effect/depthOfField",
             "hasPannel": true
-          }
-        ]
           },
           {
-        "name": "其他",
-        "children": [
+            "name": "夜视效果",
+            "thumbnail": "effect-nightVision.jpg",
+            "main": "effect/nightVision",
+            "hasPannel": true
+          },
           {
-            "name": "月球",
-            "thumbnail": "map-other-moon.jpg",
-            "main": "map/other/moon",
-            "resources": ["background.css"]
+            "name": "黑白效果",
+            "thumbnail": "effect-blackAndWhite.jpg",
+            "main": "effect/blackAndWhite",
+            "hasPannel": true
           }
         ]
       }

public/img/textures/line-air.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36" height="36" viewBox="0 0 36 36"><defs><clipPath id="master_svg0_6_1"><rect x="0" y="0" width="36" height="36" rx="6"/></clipPath></defs><g clip-path="url(#master_svg0_6_1)"><g><rect x="3" y="16" width="30" height="4" rx="2" fill="#E63E3E" fill-opacity="1"/></g><g><rect x="17" y="3" width="2" height="30" rx="1" fill="#E63E3E" fill-opacity="1"/></g></g></svg>
\ No newline at end of file

public/lib/mars3d/mars3d.css

 /**
  * Mars3D三维可视化平台  mars3d
  *
- * 版本信息：v3.6.11
- * 编译日期：2023-11-04 00:00:59
+ * 版本信息：v3.6.12
+ * 编译日期：2023-11-07 21:55:21
  * 版权所有：Copyright by 火星科技  http://mars3d.cn
  * 使用单位：免费公开版 ，2023-03-17
  */

src/example/control/basis/mapSplit/index.tsx

+import * as mapWork from "./map.js"
+import { MarsPannel, MarsButton } from "@mars/components/MarsUI"
+import { Space } from "antd"
+
+const UIComponent = () => {
+  return (
+    <MarsPannel visible={true} right={10} top={10}>
+      <Space>
+        <MarsButton onClick={() => { mapWork.createControl() }}>创建控件</MarsButton>
+        <MarsButton onClick={() => { mapWork.destroyControl() }}>销毁控件</MarsButton>
+      </Space>
+    </MarsPannel>
+  )
+}
+export default UIComponent

src/example/effect/colorCorrection/index.less

+.ant-slider {
+  width: 120px !important;
+}
+
+.mars-slider.ant-slider {
+  margin: 0px 10px 3px 6px;
+}

src/example/effect/colorCorrection/index.tsx

+import { useState } from "react"
+import * as mapWork from "./map.js"
+import { MarsPannel, MarsSwitch, MarsSlider, MarsFormItem, MarsForm } from "@mars/components/MarsUI"
+import { Space } from "antd"
+import "./index.less"
+
+function UIComponent(props) {
+  const [brightness, setBrightness] = useState(1.0)
+  const [contrast, setContrast] = useState(1.0)
+  const [hue, setHue] = useState(0.0)
+  const [saturation, setSaturation] = useState(1.0)
+  return (
+    <MarsPannel visible={true} right="10" top="10" width={205}>
+      <MarsForm {...{ labelCol: { span: 6 } }}>
+        <MarsFormItem label="启用">
+          <MarsSwitch defaultChecked onChange={(v) => {
+            mapWork.setDepthOfField(v)
+          }}></MarsSwitch>
+        </MarsFormItem>
+
+        <MarsFormItem label="亮度">
+          <Space>
+            <MarsSlider
+              defaultValue={brightness}
+              min={0}
+              max={2.0}
+              step={0.1}
+              onChange={(data) => {
+                setBrightness(data)
+                mapWork.setBrightness(brightness)
+              }}
+            />
+          </Space>
+        </MarsFormItem>
+        <MarsFormItem label="对比度">
+          <Space>
+            <MarsSlider
+              defaultValue={contrast}
+              min={0}
+              max={2.0}
+              step={0.1}
+              onChange={(data) => {
+                setContrast(data)
+                mapWork.setContrast(contrast)
+              }}
+            />
+          </Space>
+        </MarsFormItem>
+        <MarsFormItem label="色调">
+          <Space>
+            <MarsSlider
+              defaultValue={hue}
+              min={0}
+              max={1.0}
+              step={0.1}
+              onChange={(data) => {
+                setHue(data)
+                mapWork.setHue(hue)
+              }}
+            />
+          </Space>
+        </MarsFormItem>
+        <MarsFormItem label="饱和度">
+          <Space>
+            <MarsSlider
+              defaultValue={saturation}
+              min={0}
+              max={2.0}
+              step={0.1}
+              onChange={(data) => {
+                setSaturation(data)
+                mapWork.setSaturation(saturation)
+              }}
+            />
+          </Space>
+        </MarsFormItem>
+      </MarsForm>
+    </MarsPannel>
+  )
+}
+
+export default UIComponent

src/example/effect/colorCorrection/map.js

+import * as mars3d from "mars3d"
+
+export let map // mars3d.Map三维地图对象
+let colorCorrection
+
+// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
+export const mapOptions = {
+  scene: {
+    center: { lat: 33.591015, lng: 119.032698, alt: 73, heading: 343, pitch: -21 }
+  }
+}
+
+/**
+ * 初始化地图业务，生命周期钩子函数（必须）
+ * 框架在地图初始化完成后自动调用该函数
+ * @param {mars3d.Map} mapInstance 地图对象
+ * @returns {void} 无
+ */
+export function onMounted(mapInstance) {
+  map = mapInstance // 记录map
+
+  // 添加参考三维模型
+  const tiles3dLayer = new mars3d.layer.TilesetLayer({
+    url: "//data.mars3d.cn/3dtiles/qx-simiao/tileset.json",
+    position: { alt: 38.8 },
+    maximumScreenSpaceError: 1,
+    dynamicScreenSpaceError: true,
+    cullWithChildrenBounds: false
+  })
+  map.addLayer(tiles3dLayer)
+
+  // 构造效果
+  colorCorrection = new mars3d.effect.ColorCorrectionEffect()
+  map.addEffect(colorCorrection)
+}
+
+/**
+ * 释放当前地图业务的生命周期函数
+ * @returns {void} 无
+ */
+export function onUnmounted() {
+  map = null
+}
+
+// 是否开启特效
+export function setDepthOfField(val) {
+  colorCorrection.enabled = val
+}
+// 修改对应参数
+export function setBrightness(val) {
+  colorCorrection.brightness = val
+}
+
+export function setContrast(val) {
+  colorCorrection.contrast = val
+}
+
+export function setHue(val) {
+  colorCorrection.hue = val
+}
+
+export function setSaturation(val) {
+  colorCorrection.saturation = val
+}

src/example/graphic/apply/district2/map.js

@@ -222,7 +222,8 @@ function addOutCircle(graphicLayer) {
         materialOptions: {
           image: item.image,
           opacity: 0.4
-        }
+        },
+        flat: true
       }
     })
     graphicLayer.addGraphic(graphic)

src/example/graphic/combine/water-section/map.js

+import * as mars3d from "mars3d"
+
+export let map // mars3d.Map三维地图对象
+export let graphicLayer // 图层
+
+// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
+export const mapOptions = {
+  scene: {
+    center: { lat: 41.065687, lng: 123.791582, alt: 5276.9, heading: 207.3, pitch: -22.5 },
+    globe: {
+      depthTestAgainstTerrain: true
+    }
+  }
+}
+
+/**
+ * 初始化地图业务，生命周期钩子函数（必须）
+ * 框架在地图初始化完成后自动调用该函数
+ * @param {mars3d.Map} mapInstance 地图对象
+ * @returns {void} 无
+ */
+export function onMounted(mapInstance) {
+  map = mapInstance // 记录map
+
+  // 创建矢量数据图层
+  graphicLayer = new mars3d.layer.GraphicLayer()
+  map.addLayer(graphicLayer)
+
+  bindLayerPopup()
+
+  // 加一些演示数据
+  addDemoGraphic1()
+}
+
+/**
+ * 释放当前地图业务的生命周期函数
+ * @returns {void} 无
+ */
+export function onUnmounted() {
+  map = null
+}
+
+let polygonGraphic
+function addDemoGraphic1() {
+  const waterJson = window.waterJson // 在 ./water-data.js
+
+  const arrData = []
+
+  for (let index = 1, len = waterJson.length; index < len; index++) {
+    const item1 = waterJson[index - 1]
+    const item2 = waterJson[index]
+
+    const arrPoints = []
+
+    const height1 = item1.height + 15
+    for (let j = 0; j < item1.points.length; j++) {
+      const point = item1.points[j]
+      arrPoints.push([...point, height1])
+    }
+
+    const height2 = item2.height + 15
+    for (let j = item2.points.length - 1; j >= 0; j--) {
+      const point = item2.points[j]
+      arrPoints.push([...point, height2])
+    }
+
+    arrData.push({
+      positions: arrPoints,
+      style: {
+        normalMap: "img/textures/waterNormals.jpg", // 水正常扰动的法线图
+        frequency: 8000.0, // 控制波数的数字。
+        animationSpeed: 0.02, // 控制水的动画速度的数字。
+        amplitude: 5.0, // 控制水波振幅的数字。
+        specularIntensity: 0.8, // 控制镜面反射强度的数字。
+        baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
+        blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
+        opacity: 0.6, // 透明度
+
+        offsetAttribute: Cesium.GeometryOffsetAttribute.ALL, // 需要有
+        offsetHeight: 0
+      },
+      attr: { index: index, height1: height1, height2: height2 }
+    })
+  }
+
+  // 多个面对象的合并渲染。
+  polygonGraphic = new mars3d.graphic.WaterCombine({
+    instances: arrData
+  })
+  graphicLayer.addGraphic(polygonGraphic)
+
+  globalMsg(`共加载了${arrData.length}条断面数据`)
+
+  setInterval(() => {
+    if (polygonGraphic.isDestroy) {
+      return
+    }
+    polygonGraphic.eachInstances((item, index) => {
+      item.style.offsetHeight += 0.1
+    })
+    polygonGraphic.setOffsetHeight()
+  }, 10)
+}
+
+// 在图层绑定Popup弹窗
+export function bindLayerPopup() {
+  graphicLayer.bindPopup(function (event) {
+    const attr = event.graphic.attr || {}
+    return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr })
+  })
+}

src/example/graphic/combine/water/map.js

@@ -107,26 +107,26 @@ export function addRandomGraphicByCount(count) {
   //   // graphic.setOffsetHeight(height, 0) // 更新第0个数据
   // }, 10)
 
-  setInterval(() => {
-    if (graphic.isDestroy) {
-      return
-    }
-    graphic.eachInstances((item, index) => {
-      // 下面只是为了方便演示，生成的区间高度值
-      if (!Cesium.defined(item.isUp)) {
-        item.isUp = Math.random() > 0.5 ? -1 : 1
-      }
-      if (item.style.offsetHeight > 1000) {
-        item.isUp = -1
-      }
-      if (item.style.offsetHeight < 0) {
-        item.isUp = 1
-      }
+  // setInterval(() => {
+  //   if (graphic.isDestroy) {
+  //     return
+  //   }
+  //   graphic.eachInstances((item, index) => {
+  //     // 下面只是为了方便演示，生成的区间高度值
+  //     if (!Cesium.defined(item.isUp)) {
+  //       item.isUp = Math.random() > 0.5 ? -1 : 1
+  //     }
+  //     if (item.style.offsetHeight > 1000) {
+  //       item.isUp = -1
+  //     }
+  //     if (item.style.offsetHeight < 0) {
+  //       item.isUp = 1
+  //     }
 
-      item.style.offsetHeight += item.isUp
-    })
-    graphic.setOffsetHeight()
-  }, 10)
+  //     item.style.offsetHeight += item.isUp
+  //   })
+  //   graphic.setOffsetHeight()
+  // }, 10)
 
   graphicLayer.enabledEvent = true // 恢复事件
   return result.points.length

src/example/graphic/entity/arrow/map.js

@@ -224,9 +224,7 @@ function addDemoGraphic9(graphicLayer) {
   const graphic = new mars3d.graphic.BillboardEntity({
     position: [116.699972, 29.004322],
     style: {
-      image: "img/marker/80800.png",
-      width: 100,
-      height: 100,
+      image: "img/marker/qianjin.png",
       horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 横向的定位点，LEFT左侧
       verticalOrigin: Cesium.VerticalOrigin.BOTTOM // 竖向的定位点，BOTTOM底部
     },

src/example/graphic/entity/billboard-panorama/map.js

+import * as mars3d from "mars3d"
+
+export let map // mars3d.Map三维地图对象
+
+// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
+export const mapOptions = {
+  scene: {
+    center: { lat: 31.649617, lng: 117.081721, alt: 444, heading: 348, pitch: -25 }
+  }
+}
+
+/**
+ * 初始化地图业务，生命周期钩子函数（必须）
+ * 框架在地图初始化完成后自动调用该函数
+ * @param {mars3d.Map} mapInstance 地图对象
+ * @returns {void} 无
+ */
+export function onMounted(mapInstance) {
+  map = mapInstance // 记录map
+
+  // 加载石化工厂模型
+  const tiles3dLayer = new mars3d.layer.TilesetLayer({
+    name: "石化工厂",
+    url: "http://data.mars3d.cn/3dtiles/max-shihua/tileset.json",
+    position: { lng: 117.077158, lat: 31.659116, alt: -2.0 },
+    maximumScreenSpaceError: 1,
+    popup: "all"
+  })
+  map.addLayer(tiles3dLayer)
+
+  // 创建DIV数据图层
+  const graphicLayer = new mars3d.layer.GraphicLayer()
+  map.addLayer(graphicLayer)
+
+  graphicLayer.on(mars3d.EventType.click, function (event) {
+    console.log("您单击了", event)
+  })
+
+  // 在layer上绑定右键菜单
+  graphicLayer.bindContextMenu(
+    [
+      {
+        text: "查看摄像头",
+        icon: "fa fa-trash-o",
+        callback: (e) => {
+          const graphic = e.graphic
+
+          globalMsg("右键菜单示例")
+        }
+      }
+    ],
+    { offsetY: -170 }
+  )
+
+  graphicLayer.bindPopup(
+    (event) => {
+      const attr = event.graphic.attr || {}
+      if (!attr) {
+        return
+      }
+
+      return `<iframe style="width: 600px; height: 300px; border: none; "src="${attr.url}"></iframe> `
+    }
+  )
+
+  // 添加数据
+  addRandomGraphicByCount(graphicLayer, [117.080397, 31.656139, 33.3])
+  addRandomGraphicByCount(graphicLayer, [117.078006, 31.65649, 49.4])
+  addRandomGraphicByCount(graphicLayer, [117.080571, 31.657898, 50.2])
+  addRandomGraphicByCount(graphicLayer, [117.078331, 31.660016, 47.2])
+
+  // console.log("导出数据测试", graphicLayer.toJSON())
+  // const layer = mars3d.LayerUtil.create(json)
+}
+
+/**
+ * 释放当前地图业务的生命周期函数
+ * @returns {void} 无
+ */
+export function onUnmounted() {
+  map = null
+}
+
+function addRandomGraphicByCount(graphicLayer, position) {
+  const graphic = new mars3d.graphic.BillboardEntity({
+    position: position,
+    style: {
+      image: "img/marker/lace-blue.png",
+      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+      verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+    },
+    attr: { url: "https://www.720yun.com/vr/b32jOOkmvm5", name: "上海浦江郊野公园" }
+  })
+  graphicLayer.addGraphic(graphic)
+}

src/example/graphic/entity/circle/map.js

@@ -384,7 +384,7 @@ function addDemoGraphic10(graphicLayer) {
         width: 12,
         materialType: mars3d.MaterialType.Image2,
         materialOptions: {
-          image: "/img/textures/airline.svg",
+          image: "/img/textures/line-air.svg",
           repeat: new mars3d.Cesium.Cartesian2(1000, 1)
         }
       }

src/example/graphic/primitive/billboard/map.js

@@ -41,6 +41,7 @@ export function onMounted(mapInstance) {
   addDemoGraphic12(graphicLayer)
   addDemoGraphic13(graphicLayer)
   addDemoGraphic14(graphicLayer)
+  addDemoGraphic15(graphicLayer)
 }
 
 /**
@@ -347,6 +348,94 @@ function getSampledPositionProperty(points) {
   return property
 }
 
+function addDemoGraphic15(graphicLayer) {
+  const build = buildProgress(87, { color: "#2B3946" })
+
+  const graphic = new mars3d.graphic.BillboardPrimitive({
+    position: new mars3d.LngLatPoint(116.095828, 30.734919, 805),
+    style: {
+      image: "img/marker/street.png",
+      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+      ...build
+    },
+    attr: { remark: "示例15" }
+  })
+  graphicLayer.addGraphic(graphic)
+}
+
+function buildProgress(progress, options) {
+  options = {
+    color: "#e3e3e3",
+    unit: "%",
+    fontSize: 24,
+    fontFamily: "Gilroy-Bold",
+    fontWeight: "bold",
+    ...options
+  }
+
+  const width = Math.ceil(Math.max(getTextWidth(progress, options), 82))
+  const halfWidth = width / 2
+  const reduce = width - 82
+
+  const height = 50
+  const base64 = svgTobase64(`<svg width="${width * 2}px" height="${
+    height * 2
+  }px" viewBox="0 0 ${width} 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+      <path d="M8,0 L${74 + reduce},0 C${78.418278 + reduce},-8.11624501e-16 ${82 + reduce},3.581722 ${82 + reduce},8 L${82 + reduce},35 C${
+        82 + reduce
+      },39.418278 ${78.418278 + reduce},43 ${74 + reduce},43 L${49.6878172 + reduce},43 L${49.6878172 + reduce / 2},43 L${41 + reduce / 2},50 L${
+        32.3121828 + reduce / 2
+      },43 L8,43 C3.581722,43 5.41083001e-16,39.418278 0,35 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z" id="path-1"></path>
+      <filter x="-7.9%" y="-13.0%" width="115.9%" height="126.0%" filterUnits="objectBoundingBox" id="filter-3">
+          <feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+          <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+          <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+          <feColorMatrix values="0 0 0 0 0.721568627   0 0 0 0 0.823529412   0 0 0 0 0.862745098  0 0 0 1 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
+          <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="shadowBlurInner2"></feGaussianBlur>
+          <feOffset dx="0" dy="-5" in="shadowBlurInner2" result="shadowOffsetInner2"></feOffset>
+          <feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
+          <feColorMatrix values="0 0 0 0 0.639215686   0 0 0 0 0.752941176   0 0 0 0 0.807843137  0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
+          <feMerge>
+              <feMergeNode in="shadowMatrixInner1"></feMergeNode>
+              <feMergeNode in="shadowMatrixInner2"></feMergeNode>
+          </feMerge>
+      </filter>
+  </defs>
+  <use fill="#E5F0F4" fill-rule="evenodd" xlink:href="#path-1"></use>
+  <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
+  <text font-family="Gilroy-Bold, Gilroy,Arial, Helvetica, sans-serif" style="font-weight:bold;dominant-baseline:middle;text-anchor:middle;fill: ${
+    options.color
+  };font-size: ${options.fontSize}px; white-space: pre; text-anchor: middle" x="${halfWidth}" y="24">${progress}D</text>
+</svg>`)
+
+  return {
+    image: base64,
+    width: width,
+    height: height
+  }
+}
+function getTextWidth(text, options) {
+  // 获取 canvas 元素和上下文对象
+  const canvas = document.createElement("canvas")
+  const ctx = canvas.getContext("2d")
+
+  // 设置字体样式
+  const fontSize = `${options.fontSize}px`
+  const fontFamily = options.fontFamily
+  const fontWeight = options.fontWeight
+  ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`
+  // 计算文本的宽度
+  const width = 28 + ctx.measureText(`${text}${options.unit}`).width
+  return width
+}
+
+function svgTobase64(source) {
+  const url = "data:image/svg+xml;base64," + window.btoa(decodeURIComponent(encodeURIComponent(source)))
+  return url
+}
+
 // 生成演示数据(测试数据量)
 export function addRandomGraphicByCount(count) {
   graphicLayer.clear()

src/example/graphic/primitive/frustum/map.js

@@ -68,7 +68,7 @@ function addDemoGraphic1(graphicLayer) {
     targetPosition: [116.317411, 30.972581, 1439.7], // 可选
     style: {
       angle: 10,
-      angle2: 20,
+      angle2: 10,
       // length: 4000, // targetPosition存在时无需传
       color: "#02ff00",
       opacity: 0.4,
@@ -151,6 +151,10 @@ export function onClickSelPoint() {
   })
 }
 
+export function clear() {
+  map.graphicLayer.clear()
+}
+
 export function getRayEarthPositions() {
   map.graphicLayer.clear()
 

src/example/layer-graphic/draw/draw-model-list/map.js

@@ -104,6 +104,25 @@ export function openGeoJSON(file) {
         flyTo: true
       })
     }
+  } else if (fileType === "glb" || fileType === "gltf") {
+    graphicLayer.clear()
+    const reader = new FileReader()
+    reader.readAsArrayBuffer(file)
+    reader.onloadend = function (e) {
+      const arrayBuffer = this.result
+      const graphic = new mars3d.graphic.ModelPrimitive({
+        position: [117.221674, 31.823752, 34.7],
+        style: {
+          url: new Uint8Array(arrayBuffer),
+          scale: 1,
+          minimumPixelSize: 50
+        },
+        hasEdit: false
+      })
+      graphicLayer.addGraphic(graphic)
+
+      graphic.flyTo({ radius: 1000 })
+    }
   } else {
     globalMsg("暂不支持 " + fileType + " 文件类型的数据！")
   }

src/example/layer-graphic/draw/draw-model/map.js

@@ -33,7 +33,6 @@ export function onMounted(mapInstance) {
   graphicLayer.on(mars3d.EventType.click, function (event) {
     console.log("监听layer，单击了矢量对象", event)
   })
-
 }
 
 /**
@@ -59,8 +58,6 @@ export function startDrawModel(url, isProxy) {
   })
 }
 
-
-
 // 地形
 export function chkHasTerrain(isStkTerrain) {
   map.hasTerrain = isStkTerrain
@@ -100,6 +97,25 @@ export function openGeoJSON(file) {
         flyTo: true
       })
     }
+  } else if (fileType === "glb" || fileType === "gltf") {
+    graphicLayer.clear()
+    const reader = new FileReader()
+    reader.readAsArrayBuffer(file)
+    reader.onloadend = function (e) {
+      const arrayBuffer = this.result
+      const graphic = new mars3d.graphic.ModelPrimitive({
+        position: [117.221674, 31.823752, 34.7],
+        style: {
+          url: new Uint8Array(arrayBuffer),
+          scale: 1,
+          minimumPixelSize: 50
+        },
+        hasEdit: false
+      })
+      graphicLayer.addGraphic(graphic)
+
+      graphic.flyTo({ radius: 1000 })
+    }
   } else {
     globalMsg("暂不支持 " + fileType + " 文件类型的数据！")
   }

src/example/layer-graphic/draw/draw/map.js

@@ -59,8 +59,11 @@ export function onMounted(mapInstance) {
   })
   map.addLayer(graphicLayer)
 
-  // mars3d.Lang["_双击完成绘制"][0] = "右击完成绘制"
-  // mars3d.Lang["_右击删除点"][0] = "中键单击完成绘制"
+  // 修改文本
+  // map.setLangText({
+  //   _双击完成绘制: "右击完成绘制",
+  //   _右击删除点: "中键单击完成绘制"
+  // })
 
   // map.on(mars3d.EventType.mouseOver, function (event) {
   //   console.log("mouseover")
@@ -120,9 +123,11 @@ export function onMounted(mapInstance) {
   // })
 
   // 自定义提示
-  // mars3d.Lang["_单击开始绘制"][0] = "新的提示内容";
-  // mars3d.Lang["_单击增加点右击删除点"][0] = "新的提示内容";
-  // mars3d.Lang["_双击完成绘制"][0] = "";
+  // map.setLangText({
+  //   _双击完成绘制: "",
+  //   _单击开始绘制: "新的提示内容",
+  //   _单击增加点右击删除点: "新的提示内容"
+  // })
 }
 
 /**

src/example/layer-graphic/geojson/basis/map.js

@@ -255,7 +255,12 @@ export function showRegion() {
         },
         // 高亮时的样式
         highlight: {
-          opacity: 0.9
+          opacity: 0.9,
+          outlineStyle: {
+            width: 6,
+            color: "#ff0000",
+            addHeight: 100
+          }
         },
         label: {
           // 面中心点，显示文字的配置

src/example/layer-graphic/other/graticule/map.js

@@ -25,8 +25,9 @@ export function onMounted(mapInstance) {
     //   color: '#ffff00',
     // },
     // labelStyle: {
-    //   color: '#ffff00',
-    // },
+    //   color: "#ffff00",
+    //   pixelOffset: new Cesium.Cartesian2(0, 0)
+    // }
   })
   map.addLayer(tileLayer)
 }

src/example/layer-tile/manage/tile-alpha/map.js

@@ -7,7 +7,7 @@ export const mapOptions = {
   scene: {
     center: { lat: 28.118943, lng: 114.834765, alt: 4038547, heading: 351, pitch: -83 },
     mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
-    mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL// 2D下左右一直可以滚动重复世界地图
+    mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL // 2D下左右一直可以滚动重复世界地图
   },
   control: {
     timeline: true,
@@ -115,11 +115,31 @@ async function showImagesByGraphic() {
       materialType: mars3d.MaterialType.Image2,
       materialOptions: {
         image: property
-      },
-      hasShadows: false
+      }
     }
   })
   graphicLayer.addGraphic(graphic)
+
+  // RectanglePrimitive
+  // const graphic = new mars3d.graphic.RectanglePrimitive({
+  //   positions: [
+  //     [63.8148899733, 12.7700338517],
+  //     [143.536486117, 56.3833398551]
+  //   ],
+  //   style: {
+  //     materialType: mars3d.MaterialType.Image2,
+  //     materialOptions: {
+  //       image: property.getValue(map.clock.currentTime)
+  //     },
+  //     flat: true
+  //   }
+  // })
+  // graphicLayer.addGraphic(graphic)
+
+  // // 更新
+  // setInterval(() => {
+  //   graphic.uniforms.image = property.getValue(map.clock.currentTime)
+  // }, 1000)
 }
 
 // ImageLayer的方式，直接替换
@@ -224,7 +244,8 @@ function showImagesByAlpha() {
     layer2.alpha = 0
 
     clearInterval(idxTimer)
-    idxTimer = window.setInterval(function () {
+    idxTimer = window.setInterval(
+      function () {
         layer1.alpha -= alphaStep
         layer2.alpha += alphaStep
 
@@ -233,7 +254,9 @@ function showImagesByAlpha() {
           step++
           changeRadarAlpha(time)
         }
-    }, time * 1000 * alphaStep)
+      },
+      time * 1000 * alphaStep
+    )
   }
 
   changeRadarAlpha(1)

src/example/layer-tileset/type/basis/map.js

@@ -371,7 +371,7 @@ export function showMaxShihuaDemo() {
     url: "//data.mars3d.cn/3dtiles/max-shihua/tileset.json",
     position: { lng: 117.077158, lat: 31.659116, alt: -2.0 },
     maximumScreenSpaceError: 1,
-
+    // shadows: Cesium.ShadowMode.DISABLED,
     // 以下参数可以参考用于3dtiles总数据大，清晰度过高情况下进行性能优化。这不是一个通用的解决方案，但可以以此为参考。
     skipLevelOfDetail: true,
     loadSiblings: true,

src/example/map/double/compare/index.tsx

+import * as mapWork from "./map.js"
+import { MarsPannel, MarsButton } from "@mars/components/MarsUI"
+import { Space } from "antd"
+
+const UIComponent = () => {
+  return (
+    <MarsPannel visible={true} right={10} top={10}>
+      <Space>
+        <MarsButton onClick={() => { mapWork.createControl() }}>创建控件</MarsButton>
+        <MarsButton onClick={() => { mapWork.destroyControl() }}>销毁控件</MarsButton>
+      </Space>
+    </MarsPannel>
+  )
+}
+export default UIComponent

src/example/map/options/lang/CustomLang.js

+const CustomLang = {
+  /** 标识语言的唯一标识 */
+  type: "en",
+
+  // Cesium renderError 错误弹窗
+  RenderingHasStopped: "An error occurred while rendering.  Rendering has stopped.",
+  ErrorConstructingCesiumWidget: "Error constructing CesiumWidget.",
+
+  // src\control\czm\Animation.js
+  Today: "Today",
+  TodayRealTime: "Today (real-time)",
+  Pause: "Pause",
+  PlayReverse: "Play Reverse",
+  PlayForward: "Play Forward",
+  CurrentTimeNotInRange: "Current time not in range",
+
+  // src\control\czm\BaseLayerPicker.js
+  Imagery: "Imagery",
+  CesiumIon: "Cesium ion",
+  Other: "Other",
+  Terrain: "Terrain",
+  EllipsoidTerrainProvider: "WGS84 Ellipsoid",
+  EllipsoidTerrainProviderTooltip: "WGS84 standard ellipsoid, also known as EPSG:4326",
+  TerrainProvider: "World Terrain",
+  TerrainProviderTooltip: "High-resolution global terrain tileset curated from several datasources",
+
+  // src\control\czm\BaseLayerPicker.js
+  FullScreen: "Full screen",
+  ExitFullScreen: "Exit full screen",
+  FullScreenUnavailable: "Full screen unavailable",
+
+  // src\control\czm\Geocoder.js
+  EnterAnAddressOrLandmark: "Enter an address or landmark...",
+  Searching: "Searching...",
+
+  // src\control\czm\HomeButton.js
+  ViewHome: "View Home",
+
+  // src\control\czm\NavigationHelpButton.js
+  NavigationInstructions: "Navigation Instructions",
+  Mouse: "Mouse",
+  Touch: "Touch",
+  PanView: "Pan view",
+  LeftClickDrag: "Left click + drag",
+  ZoomView: "Zoom view",
+  RightClick: "Right click + drag, or",
+  MouseWheelScroll: "Mouse wheel scroll",
+  RotateView: "Rotate view",
+  MiddleClickDrag: "Middle click + drag, or",
+  CtrlAndClickDrag: "CTRL + Left/Right click + drag",
+  OneFingerDrag: "One finger drag",
+  TwoFingerPinch: "Two finger pinch",
+  TiltView: "Tilt view",
+  TwoFingerDragSameDirection: "Two finger drag, same direction",
+  TwoFingerDragOppositeDirection: "Two finger drag, opposite direction",
+
+  // src\control\czm\ProjectionPicker.js
+  PerspectiveProjection: "Perspective Projection",
+  OrthographicProjection: "Orthographic Projection",
+
+  // src\control\czm\SceneModePicker.js
+  _2D: "2D",
+  _3D: "3D",
+  ColumbusView: "Columbus View",
+
+  // src\control\czm\VRButton.js
+  EnterVRMode: "Enter VR mode",
+  ExitVRMode: "Exit VR mode",
+  VRModeIsUnavailable: "VR mode is unavailable",
+
+  // src\control\Zoom.js
+  _放大: "Zoom In",
+  _缩小: "Zoom Out",
+
+  // src\control\ClockAnimate.js
+  _暂停: "Pause",
+  _继续: "Continue",
+
+  // src\control\Compass.js
+  _导航球: "Navigation ball",
+  _拖拽调整俯仰角: "Drag to adjust pitch Angle",
+  _拖拽调整四周方向角: "Drag to adjust the Heading Angle, double-click to return to true north",
+
+  // 右键菜单 src\map\core\getDefaultContextMenu.js
+  _查看此处坐标: "Location info",
+  _位置信息: "The location information",
+  _经度: "Lon",
+  _纬度: "Lat",
+  _海拔: "Alt",
+  _横坐标: "X",
+  _纵坐标: "Y",
+
+  _查看当前视角: "Camera info",
+  _当前视角信息: "Current Camera Information",
+
+  _视角切换: "Camera",
+  _禁止进入地下: "Do not go underground",
+  _允许进入地下: "Access to the ground",
+  _绕此处环绕飞行: "Fly around here",
+  _关闭环绕飞行: "Close off circling",
+  _移动到此处: "Move it over here",
+  _第一视角站到此处: "First view is here",
+  _开启键盘漫游: "Enable keyboard roaming",
+  _关闭键盘漫游: "Turn off keyboard roaming",
+  _跟踪锁定: "TrackedEntity",
+  _取消锁定: "Unlocked",
+
+  _三维模型: "3DTiles",
+  _显示三角网: "Display Wireframe",
+  _关闭三角网: "Close Wireframe",
+  _显示包围盒: "Display BoundingVolume",
+  _关闭包围盒: "Close BoundingVolume",
+
+  _地形服务: "Terrain",
+  _开启地形: "Open terrain",
+  _关闭地形: "Close terrain",
+
+  _图上标记: "Drawing",
+  _标记点: "Mark points",
+  _标记线: "Tag line",
+  _标记面: "Mark surface",
+  _标记圆: "Mark round",
+  _标记矩形: "Mark rectangular",
+  _允许编辑: "Allowed to edit",
+  _禁止编辑: "Prohibit to edit",
+  _导出GeoJSON: "Export GeoJSON",
+  _清除所有标记: "Clear",
+
+  _特效效果: "Effects",
+  _开启下雨: "Enable rain",
+  _关闭下雨: "Close rain",
+  _开启下雪: "Enable snow",
+  _关闭下雪: "Close snow",
+  _开启雾天气: "Enable fog",
+  _关闭雾天气: "Close fog",
+  _开启泛光: "Enable bloom",
+  _关闭泛光: "Close bloom",
+  _开启亮度: "Enable brightness",
+  _关闭亮度: "Close brightness",
+  _开启夜视: "Enable night vision",
+  _关闭夜视: "Close night vision",
+  _开启黑白: "Enable black and white",
+  _关闭黑白: "Close black and white",
+  _开启拾取高亮: "Enable Pick highlighted",
+  _关闭拾取高亮: "Close Pick highlighted",
+
+  _场景设置: "Scene",
+  _开启深度监测: "Enable depth test against terrain",
+  _关闭深度监测: "Close depth test against terrain",
+  _显示星空背景: "Enable skyBox",
+  _关闭星空背景: "Close skyBox",
+  _开启日照阴影: "Enable shadow",
+  _关闭日照阴影: "Close shadow",
+  _开启大气渲染: "Enable sky atmosphere",
+  _关闭大气渲染: "Close sky atmosphere",
+  _场景出图: "Export image",
+
+  _图上量算: "Measure",
+  _删除测量: "Delete",
+
+  // 图上量算 tooltip
+  _角度: "Angle",
+  _距离: "Distance",
+  _面积: "Area",
+  _总长: "Total distance",
+  _起点: "Start",
+  _高度差: "Height difference",
+  _空间距离: "Space distance",
+  _水平距离: "Horizontal distance",
+  _正在计算体积: "Calculating volume",
+  _填方体积: "The volume of fill",
+  _挖方体积: "Excavation volume",
+  _横切面积: "Crosscutting area",
+  _面上: "Up",
+  _面下: "Down",
+  _米: "m",
+  _公里: "km",
+  _万米: "myriametre",
+  _海里: "mile",
+  _丈: "zhang",
+  _平方米: "m²",
+  _平方公里: "km²",
+  _亩: "mu",
+  _公顷: "ha",
+  _立方米: "m³",
+  _万立方米: "wm³",
+
+  // 标绘 tooltip
+  _单击开始绘制: "Click to start drawing",
+  _单击完成绘制: "Click to finish drawing",
+  _双击完成绘制: "Double click to finish drawing",
+  _单击增加点: "left click add point",
+  _右击删除点: "right click delete point",
+
+  _单击后激活编辑: "Click to activate editing",
+  _右击菜单删除: "Right click menu to delete",
+  _更多功能请右击: "For more functions, right click",
+
+  _停止编辑: "Stop editing",
+  _删除该点: "Delete that point",
+  _按轴平移: "Translation by axis",
+  _停止按轴平移: "Stop translation along axis",
+  _按轴旋转: "Rotation on axis",
+  _停止按轴旋转: "Stop rotation on axis",
+  _调整比例: "Edit Scale",
+  _停止调整比例: "Stop edit scale",
+
+  _释放后完成修改: "Complete the modification after release",
+  _该对象不允许编辑: "This object does not allow editing",
+  _拖动该点后: "Drag that point",
+  _拖动对象后: "Drag that object",
+  _修改位置: "Modify the position",
+  _整体平移: "The overall translation",
+  _增加点: "Add point",
+  _修改高度: "Modify the height",
+  _修改半径: "Modify the radius",
+  _修改长度: "Modify the length(X direction )",
+  _修改宽度: "Change the width(Y direction)",
+  _修改方向: "Change direction",
+  _修改缩放比例: "Modify the Scale",
+  _无法删除不能少于最小点数:
+    "Cannot delete, the number of dots cannot be less than",
+  _删除: "Delete",
+  _半径: "Radius",
+
+  // src\graphic\entity\ModelEntity.js
+  _加载模型中: "Load Model…"
+}

src/example/map/options/lang/index.less

@@ -3,4 +3,10 @@
     margin-right: 8px;
     margin-bottom: 8px;
   }
+}
+.language_change {
+  .mars-button {
+    margin-right: 8px;
+    margin-bottom: 8px;
   }
+}

src/example/map/options/lang/index.tsx

@@ -35,6 +35,19 @@ function UIComponent() {
     <MarsPannel visible={true} top={10} right={10} width={355}>
       <div className="f-mb">Tip: The default language is Chinese中文简体, you can switch to English, etc.</div>
 
+      <div className="language_change">
+        <Row>
+          <Col span={8}>语言切换:</Col>
+          <Col span={16}>
+                <MarsButton onClick={() => mapWork.toCustomLang()}>
+                  English
+                </MarsButton>
+                <MarsButton onClick={() => mapWork.toDefaultLange()}>
+                  中文简体
+                </MarsButton>
+          </Col>
+        </Row>
+      </div>
       <div className="lang-button-contain">
         <Row>
           <Col span={8}>Plot:</Col>

src/example/thing/analysis/measure-volume/map.js

@@ -52,6 +52,24 @@ function addMeasure() {
   measure.on(mars3d.EventType.end, function (event) {
     console.log("分析完成", event)
     hideLoading()
+
+    // const resultInter = event.graphic.interPolygonObj
+    // const cutHeight = event.graphic.height
+
+    // let totalArea = 0
+    // for (let i = 0, len = resultInter.list.length; i < len; i++) {
+    //   const item = resultInter.list[i]
+
+    //   const pt1 = item.point1
+    //   const pt2 = item.point2
+    //   const pt3 = item.point3
+
+    //   const height = (pt1.height + pt2.height + pt3.height) / 3
+    //   if (height < cutHeight) {
+    //     totalArea += item.area
+    //   }
+    // }
+    // console.log(totalArea, mars3d.MeasureUtil.formatArea(totalArea))
   })
 
   // 加一些演示数据

src/example/thing/analysis/measure/map.js

@@ -185,3 +185,37 @@ function addDemoGraphic2(graphicLayer) {
   })
   graphicLayer.addGraphic(graphic)
 }
+
+export function openJSON(file) {
+  const fileName = file.name
+  const fileType = fileName?.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase()
+
+  if (fileType === "json") {
+    const reader = new FileReader()
+    console.log("reader")
+    console.log(reader)
+    reader.readAsText(file, "UTF-8")
+    reader.onloadend = function (e) {
+      const geojson = JSON.parse(this.result)
+      console.log("打开了json文件", geojson)
+
+      if (geojson.type === "graphic" && geojson.data) {
+        measure.graphicLayer.addGraphic(geojson.data)
+        measure.graphicLayer.flyTo()
+      } else {
+        measure.graphicLayer.loadGeoJSON(geojson, { flyTo: true })
+      }
+    }
+  } else {
+    globalMsg("暂不支持 " + fileType + " 文件类型的数据！")
+  }
+}
+
+export function saveJSON() {
+  if (measure.graphicLayer.length === 0) {
+    globalMsg("当前没有标注任何数据，无需保存！")
+    return
+  }
+  const geojson = measure.graphicLayer.toJSON()
+  mars3d.Util.downloadFile("测量结果.json", JSON.stringify(geojson))
+}

src/example/thirdParty/turf/buffer/map.js

 import * as mars3d from "mars3d"
 
+export const mapOptions = {
+  scene: {
+    center: { lat: 31.967015, lng: 117.316406, alt: 9150, heading: 206, pitch: -42 },
+    fxaa: true
+  }
+}
+
 export let map // mars3d.Map三维地图对象
 export let graphicLayer // 矢量图层对象
+let pointLayer
+
+const pointStyle = {
+  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+  scale: 1,
+  scaleByDistance: true,
+  scaleByDistance_far: 20000,
+  scaleByDistance_farValue: 0.7,
+  scaleByDistance_near: 1000,
+  scaleByDistance_nearValue: 1,
+  clampToGround: true
+}
 
 /**
  * 初始化地图业务，生命周期钩子函数（必须）
@@ -12,6 +31,20 @@ export let graphicLayer // 矢量图层对象
 export function onMounted(mapInstance) {
   map = mapInstance // 记录map
 
+  pointLayer = new mars3d.layer.GeoJsonLayer({
+    name: "体育设施点",
+    url: "//data.mars3d.cn/file/geojson/hfty-point.json",
+    symbol: {
+      styleOptions: {
+        ...pointStyle,
+        image: "img/marker/mark-blue.png"
+      }
+    },
+    popup: "{项目名称}",
+    zIndex: 10
+  })
+  map.addLayer(pointLayer)
+
   graphicLayer = new mars3d.layer.GraphicLayer({
     hasEdit: true,
     isAutoEditing: true // 绘制完成后是否自动激活编辑
@@ -80,10 +113,11 @@ export function drawPolygon() {
   })
 }
 
-function deleteAll() {
+export function deleteAll() {
   graphicLayer.clear()
   map.graphicLayer.clear()
   lastgeojson = null
+  removeSelect()
 }
 
 let width
@@ -117,8 +151,40 @@ function updateBuffer(graphic) {
       color: "rgba(255,0,0,0.4)",
       clampToGround: true
     }
-  })
+  })[0]
 
   map.graphicLayer.clear()
-  map.graphicLayer.addGraphic(graphicsOptions)
+
+  const drawGraphic = map.graphicLayer.addGraphic(graphicsOptions)
+  updateSelect(drawGraphic)
+}
+
+let selectGraphic = []
+function updateSelect(drawGraphic) {
+  removeSelect()
+  if (!drawGraphic) {
+    return
+  }
+
+  pointLayer.eachGraphic((graphic) => {
+    const position = graphic.positionShow
+
+    const isInArea = drawGraphic.isInPoly(position)
+    if (isInArea) {
+      graphic.setStyle({
+        image: "img/marker/mark-red.png"
+      })
+      selectGraphic.push(graphic)
+    }
+  })
+}
+
+export function removeSelect() {
+  for (let i = 0; i < selectGraphic.length; i++) {
+    const graphic = selectGraphic[i]
+    graphic.setStyle({
+      image: "img/marker/mark-blue.png"
+    })
+  }
+  selectGraphic = []
 }

src/example/thirdParty/turf/nearestPoint/map.js

@@ -4,6 +4,13 @@ export let map // mars3d.Map三维地图对象
 let pointLayer
 let graphicLayer
 
+export const mapOptions = {
+  scene: {
+    center: { lat: 31.967015, lng: 117.316406, alt: 9150, heading: 206, pitch: -42 },
+    fxaa: true
+  }
+}
+
 const pointStyle = {
   verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
   scale: 1,
@@ -15,13 +22,6 @@ const pointStyle = {
   clampToGround: true
 }
 
-export const mapOptions = {
-  scene: {
-    center: { lat: 31.967015, lng: 117.316406, alt: 9150, heading: 206, pitch: -42 },
-    fxaa: true
-  }
-}
-
 /**
  * 初始化地图业务，生命周期钩子函数（必须）
  * 框架在地图初始化完成后自动调用该函数
@@ -50,11 +50,6 @@ export function onMounted(mapInstance) {
     zIndex: 20
   })
   map.addLayer(graphicLayer)
-
-  // 地球点击事件
-  map.on(mars3d.EventType.click, (e) => {
-    clickPoint(e.cartesian)
-  })
 }
 
 /**
@@ -65,6 +60,23 @@ export function onUnmounted() {
   map = null
 }
 
+export function drawPoint() {
+  clearAll()
+
+  graphicLayer
+    .startDraw({
+      type: "billboard",
+      style: {
+        ...pointStyle,
+        image: "img/marker/route-start.png"
+      }
+    })
+    .then((graphic) => {
+      clickPoint(graphic.positionShow)
+      graphic.remove()
+    })
+}
+
 function clickPoint(position) {
   if (pointLayer.length === 0) {
     globalMsg("正在加载数据,请稍等......")
@@ -84,10 +96,8 @@ function clickPoint(position) {
   })
   graphicLayer.addGraphic(queryPoint)
 
-
   console.log(`分析${pointLayer.length}个数据中的最近点`)
 
-
   // turf分析
   const targetPoint = queryPoint.toGeoJSON()
   const points = pointLayer.toGeoJSON()
@@ -98,6 +108,9 @@ function clickPoint(position) {
 
   const nearestPoint = mars3d.Util.geoJsonToGraphics(nearest)[0]
 
+  const graphic = pointLayer.getGraphicById(nearestPoint.attr.id)
+  updateSelect(graphic)
+
   // 连线
   const polyline = new mars3d.graphic.PolylineEntity({
     positions: [position, nearestPoint.position],
@@ -134,5 +147,29 @@ function clickPoint(position) {
 }
 
 export function clearAll() {
+  removeSelect()
   graphicLayer.clear()
 }
+
+let selectGraphic
+function updateSelect(graphic) {
+  removeSelect()
+
+  if (graphic) {
+    selectGraphic = graphic
+    selectGraphic.setStyle({
+      image: "img/marker/mark-red.png"
+    })
+  }
+}
+
+export function removeSelect() {
+  if (!selectGraphic) {
+    return
+  }
+
+  selectGraphic.setStyle({
+    image: "img/marker/mark-blue.png"
+  })
+  selectGraphic = undefined
+}