综合空间分析工具

src/App.vue

@@ -20,7 +20,7 @@ const instance = getCurrentInstance();
 const marsOnload = (map) => {
   window.globalMap = map;
   //发送地图初始化完成的通知
-  instance?.proxy?.$emitter.emit("mapOnLoad"); 
+  instance?.proxy?.$emitter.emit("mapOnLoad",map); 
   //把配置文件的图层传到MapTree组件，生成图层树
   instance?.proxy?.$emitter.emit("loadLayerTree", map.options.layers);
 

src/components/map/map.less

@@ -303,3 +303,26 @@
 .analysisMeasureLabel{
   line-height: 50px;
 }
+.bufferMeasureContatiner{
+  right: 20px;
+  top: 50px;
+  padding: 0 20px 30px;
+}
+.ta-r{
+  text-align: right;
+}
+.flex{
+  display: flex;
+}
+.ai-c{
+  align-items: center;
+}
+.jc-c{
+  justify-content: center;
+}
+.jc-e{
+  justify-content: end;
+}
+.fz-14{
+  font-size: 14px;
+}

src/components/map/mapFenXi.vue

@@ -20,36 +20,68 @@
     <div>
       <div class="maptool-container-btn">
         <el-button @click="handlerMeasureSection">剖面分析</el-button>
-        <el-button>方量分析</el-button>
-        <el-button>通视分析</el-button>
-        <el-button>缓冲分析</el-button>
-        <el-button>可视域分析</el-button>
-        <el-button>淹没分析</el-button>
-        <el-button>日照分析</el-button>
-        <el-button>天际线分析</el-button>
-        <el-button>开敞度分析</el-button>
+        <el-button @click="handlerAnalysisMeasure">方量分析</el-button>
+        <el-button @click="handlerLineMeasure">通视分析</el-button>
+        <el-button @click="handlerCircleMeasure">圆形通视分析</el-button>
+        <el-button @click="dataSet.bufferMeasureShow = true">缓冲分析</el-button>
+        <el-button @click="viewshedMeasureClick">可视域分析</el-button>
+        <el-button @click="dataSet.floodMeasureShow = true">淹没分析</el-button>
+        <el-button @click="sunshineMeasureClick">日照分析</el-button>
+        <el-button @click="skylineMeasureClick">天际线分析</el-button>
+        <el-button @click="opennessMeasureClick">开敞度分析</el-button>
       </div>
     </div>
   </div>
+  <!-- 剖面分析 -->
   <sectionMeasure v-show="dataSet.sectionMeasureShow" />
-  <analysisMeasure/>
+  <!-- 方量分析 -->
+  <analysisMeasure v-show="dataSet.analysisMeasureShow" />
+  <!-- 缓冲分析 -->
+  <bufferMeasure v-show="dataSet.bufferMeasureShow" />
+  <!-- 可视域分析 -->
+  <viewshedMeasure v-show="dataSet.viewshedMeasureShow" />
+  <!-- 淹没分析 -->
+  <floodDiaMeasure v-show="dataSet.floodMeasureShow" />
+  <!-- 日照分析 -->
+  <sunshineDiaMeasure v-show="dataSet.sunshineMeasureShow" />
 </template>
 
 <script setup>
 import { reactive, getCurrentInstance } from "vue";
 import "./map.less";
 import * as mars3d from "mars3d";
-import { ElLoading } from "element-plus";
+import { ElLoading,ElMessage } from "element-plus";
 import sectionMeasure from "./widget/sectionMeasure.vue";
 import analysisMeasure from "./widget/analysisMeasure.vue";
+import bufferMeasure from "./widget/bufferMeasure.vue";
+import viewshedMeasure from "./widget/viewshedMeasure.vue";
+import floodDiaMeasure from "./widget/floodMeasure.vue";
+import sunshineDiaMeasure from "./widget/sunshineMeasure.vue";
+
 const Cesium = mars3d.Cesium;
+let eventTarget = new mars3d.BaseClass()
 let measure;
 let loading;
+let sightline;
+let buffergraphicLayer;
+let bufferwidth=100;
+let bufferlastgeojson;
+let viewshedgraphicLayer;
+let floodByGraphic;
+let drawfloodPotions;
+let sunshineshadows;
+let skylinegraphicLayer;
+let openNessgraphicLayer;
 
 const instance = getCurrentInstance();
 const dataSet = reactive({
   show: false,
   sectionMeasureShow: false,
+  analysisMeasureShow: false,
+  bufferMeasureShow: false,
+  viewshedMeasureShow: false,
+  floodMeasureShow: false,
+  sunshineMeasureShow: false
 });
 
 instance?.proxy?.$emitter.on("showMapFenXi", () => {
@@ -88,13 +120,83 @@ const initMeasure = () => {
   measure.on(mars3d.EventType.start, function (e) {
     openLoading();
   });
+  sightline = new mars3d.thing.Sightline({
+    visibleColor: new Cesium.Color(0, 1, 0, 0.4),
+    hiddenColor: new Cesium.Color(1, 0, 0, 0.4)
+    // depthFailColor: Cesium.Color.fromCssColorString("#db2c8f"),
+  })
+  window.globalMap.addThing(sightline)
+
+  buffergraphicLayer = new mars3d.layer.GraphicLayer({
+    hasEdit: false,
+    isAutoEditing: false // 绘制完成后是否自动激活编辑
+  })
+  window.globalMap.addLayer(buffergraphicLayer)
+  buffergraphicLayer.on(mars3d.EventType.drawCreated, function (e) {
+    updateBuffer(e.graphic)
+  })
+
+  buffergraphicLayer.on(mars3d.EventType.editMovePoint, function (e) {
+    updateBuffer(e.graphic)
+  })
+
+  buffergraphicLayer.on(mars3d.EventType.editRemovePoint, function (e) {
+    updateBuffer(e.graphic)
+  })
+
+  viewshedgraphicLayer = new mars3d.layer.GraphicLayer()
+  window.globalMap.addLayer(viewshedgraphicLayer)
+
+  skylinegraphicLayer = new mars3d.layer.GraphicLayer()
+  window.globalMap.addLayer(skylinegraphicLayer)
+
+  openNessgraphicLayer = new mars3d.layer.GraphicLayer()
+  window.globalMap.addLayer(openNessgraphicLayer)
+
+
+  floodByGraphic = new mars3d.thing.FloodByGraphic({
+    // perPositionHeight: true, // 是否每个分析点高度都不一样
+    style: {
+      color: "#007be6",
+      opacity: 0.5,
+      outline: false
+    }
+  })
+  floodByGraphic.on(mars3d.EventType.change, function (e) {
+    console.log('e1e',e)
+    const height = e.height
+    instance?.proxy?.$emitter.emit("floodHeightChange",height);
+  })
+  window.globalMap.addThing(floodByGraphic)
+
+  sunshineshadows = new mars3d.thing.Shadows({
+    multiplier: 1600,
+    time: new Date(`${'2023-10-25'} ${'12'}:${'00'}:00`)
+  })
+  window.globalMap.addThing(sunshineshadows)
+
+  sunshineshadows.on(mars3d.EventType.change, function () {
+    const shadowTime = sunshineshadows.time
+    let date = new Date(shadowTime)
+    let sunshadowrate = date.getHours()*60 + date.getMinutes()
+    instance?.proxy?.$emitter.emit("onSunShadowRotateEmit",sunshadowrate);
+    eventTarget.fire("changeShadows", { shadowTime })
+  })
+
   measure.on(mars3d.EventType.end, function (e) {
     closeLoading();
+    console.log('eeee',e)
+    console.log('mars3d.graphic',mars3d.graphic)
     //剖面分析绘制完成后
     if (e.graphic?.type === mars3d.graphic.SectionMeasure.type) {
       dataSet.sectionMeasureShow = true;
       instance?.proxy?.$emitter.emit("onSectionMeasureEnd",e);
     }
+    if (e.graphic?.type === mars3d.graphic.VolumeMeasure.type) {
+      dataSet.analysisMeasureShow = true;
+      instance?.proxy?.$emitter.emit("onVolumeMeasureEnd",e);
+    }
+    
   });
 };
 //清除
@@ -103,6 +205,29 @@ const handlerClear = () => {
   instance?.proxy?.$emitter.emit("measureClear");
   //隐藏剖面分析弹窗
   dataSet.sectionMeasureShow = false;
+  //隐藏方量分析弹窗
+  dataSet.analysisMeasureShow = false;
+  //通视分析清除
+  sightline.clear()
+  window.globalMap.graphicLayer.clear()
+  // 缓冲分析清楚
+  buffergraphicLayer.clear()
+  dataSet.bufferMeasureShow = false
+  bufferlastgeojson = null
+  //可视域清除
+  viewshedgraphicLayer.clear()
+  dataSet.viewshedMeasureShow = false
+  //淹没分析清除
+  floodByGraphic.clear()
+  dataSet.floodMeasureShow = false
+  //日照分析清除
+  sunshineshadows.pause()
+  dataSet.sunshineMeasureShow = false
+  sunshineshadows.time = new Date(`${'2023-10-25'} ${'12'}:${'00'}:00`)
+  //天际线分析清除
+  skylinegraphicLayer.clear()
+  //开敞度分析清除
+  openNessgraphicLayer.clear()
 };
 //空间距离
 const handlerMeasureLength = () => {
@@ -157,6 +282,423 @@ const handlerMeasureSection = () => {
     ...measureLineOption(false),
   });
 };
+instance?.proxy?.$emitter.on("onVolumeMeasureStart", (e) => {
+  handlerAnalysisMeasure()
+});
+//方量分析
+const handlerAnalysisMeasure = () => {
+  measure.volume({
+    ...measureLineOption(false),
+  });
+};
+//通视分析
+
+const handlerLineMeasure = () => {
+  window.globalMap.graphicLayer.clear()
+  window.globalMap.graphicLayer.startDraw({
+    type: "polyline",
+    maxPointNum: 2,
+    style: {
+      color: "#55ff33",
+      width: 3
+    },
+    success: function (graphic) {
+      // 绘制成功后回调
+      const positions = graphic.positionsShow
+      window.globalMap.graphicLayer.clear()
+      window.globalMap.scene.globe.depthTestAgainstTerrain = true
+
+      const center = positions[0]
+      const targetPoint = positions[1]
+      sightline.add(center, targetPoint, { offsetHeight: 1.5 }) // 1.5是加人的身高等因素，略微抬高一些
+
+      createPoint(center, true)
+      createPoint(targetPoint, false)
+
+      window.globalMap.scene.globe.depthTestAgainstTerrain = false
+    }
+  })
+};
+//圆形通视分析
+const handlerCircleMeasure = () => {
+  window.globalMap.graphicLayer.startDraw({
+    type: "circle",
+    style: {
+      color: "#ffff00",
+      opacity: 0.2,
+      clampToGround: true
+    },
+    success: function (graphic) {
+      // 绘制成功后回调
+      let center = graphic.positionShow
+      center = mars3d.PointUtil.addPositionsHeight(center, 1.5) // 加人的身高等因素，略微抬高一些
+      const targetPoints = graphic.getOutlinePositions(false, 45)
+      window.globalMap.graphicLayer.clear()
+      window.globalMap.scene.globe.depthTestAgainstTerrain = true
+      for (let i = 0; i < targetPoints.length; i++) {
+        let targetPoint = targetPoints[i]
+        targetPoint = mars3d.PointUtil.getSurfacePosition(window.globalMap.scene, targetPoint)
+        sightline.add(center, targetPoint)
+      }
+      createPoint(center, true)
+
+      window.globalMap.scene.globe.depthTestAgainstTerrain = false
+    }
+  })
+};
+
+const createPoint = (position, isFirst) =>{
+  const graphic = new mars3d.graphic.PointEntity({
+    position: position,
+    style: {
+      color: Cesium.Color.fromCssColorString("#3388ff"),
+      pixelSize: 6,
+      outlineColor: Cesium.Color.fromCssColorString("#ffffff"),
+      outlineWidth: 2,
+      scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 0.2),
+      label: {
+        text: isFirst ? "观察位置" : "目标点",
+        font_size: 17,
+        font_family: "楷体",
+        color: Cesium.Color.AZURE,
+        outline: true,
+        outlineColor: Cesium.Color.BLACK,
+        outlineWidth: 2,
+        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        pixelOffset: new Cesium.Cartesian2(0, -20), // 偏移量
+        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 2000000)
+      }
+    }
+  })
+  window.globalMap.graphicLayer.addGraphic(graphic)
+
+  return graphic
+}
+// 缓冲分析
+instance?.proxy?.$emitter.on("bufferNumChange", (e) => {
+  bufferwidth = e*100
+  if (bufferlastgeojson) {
+    updateBuffer()
+  }
+})
+const updateBuffer = (graphic) =>{
+  let buffere
+  
+  const geojson = graphic ? graphic.toGeoJSON() : bufferlastgeojson
+    buffere = mars3d.PolyUtil.buffer(geojson, bufferwidth)
+  bufferlastgeojson = geojson
+  
+  const graphicsOptions = mars3d.Util.geoJsonToGraphics(buffere, {
+    type: "polygon",
+    style: {
+      color: "rgba(255,0,0,0.4)",
+      clampToGround: true
+    }
+  })
+
+  window.globalMap.graphicLayer.clear()
+  window.globalMap.graphicLayer.addGraphic(graphicsOptions)
+}
+
+instance?.proxy?.$emitter.on("bufferbtnClick", (e) => {
+  buffergraphicLayer.clear()
+  window.globalMap.graphicLayer.clear()
+  if(e == 'point'){
+    buffergraphicLayer.startDraw({
+      type: "point",
+      style: {
+        pixelSize: 12,
+        color: "#ffff00"
+      }
+    })
+  }
+  if(e == 'line'){
+    buffergraphicLayer.startDraw({
+      type: "polyline",
+      style: {
+        color: "#ffff00",
+        width: 3,
+        clampToGround: true
+      }
+    })
+  }
+  if(e == 'polygon'){
+    buffergraphicLayer.startDraw({
+      type: "polygon",
+      style: {
+        color: "#ffff00",
+        outline: true,
+        outlineColor: "#f0ce22",
+        outlineWidth: 4,
+        opacity: 0.5,
+        clampToGround: true
+      }
+    })
+  }
+});
+// 可视域分析
+let selectedViewshed
+const viewshedMeasureClick = () => {
+  viewshedgraphicLayer.clear()
+  viewshedgraphicLayer.startDraw({
+    type: "viewShed",
+    style: {
+      angle: 60,
+      angle2: 30,
+      distance: 57,
+      heading: 109,
+      pitch: 2,
+      addHeight: 0.5 // 在坐标点增加的高度值，规避遮挡，效果更友好
+    },
+    success: (graphic) => {
+      selectedViewshed = viewshedgraphicLayer.getGraphicById(graphic.id)
+    }
+  })
+  //
+};
+instance?.proxy?.$emitter.on("onChangeAngle", (e) => {
+  selectedViewshed.angle = e
+});
+instance?.proxy?.$emitter.on("onChangeAngle2", (e) => {
+  selectedViewshed.angle2 = e
+});
+instance?.proxy?.$emitter.on("onChangeDistance", (e) => {
+  selectedViewshed.distance = e
+});
+instance?.proxy?.$emitter.on("onChangeHeading", (e) => {
+  selectedViewshed.heading = e
+});
+instance?.proxy?.$emitter.on("onChangePitch", (e) => {
+  selectedViewshed.pitch = e
+});
+instance?.proxy?.$emitter.on("showFrustum", (e) => {
+  selectedViewshed.showFrustum = e
+});
+instance?.proxy?.$emitter.on("onChangeOpacity", (e) => {
+  selectedViewshed.opacity = e
+});
+instance?.proxy?.$emitter.on("onClickSelView", (e) => {
+  window.globalMap.graphicLayer.startDraw({
+    type: "point",
+    success: (graphic) => {
+      const point = graphic.point
+      graphic.remove() // 删除绘制的点
+      selectedViewshed.targetPosition = point
+    }
+  })
+});
+// 淹没分析
+//绘制矩形
+instance?.proxy?.$emitter.on("drawPolygonClick", (e) => {
+  drawfloodPotions = null
+  window.globalMap.graphicLayer.clear()
+  if (floodByGraphic) {
+    floodByGraphic.clear()
+  }
+  window.globalMap.graphicLayer.startDraw({
+    type: "rectangle",
+    style: {
+      color: "#007be6",
+      opacity: 0.8,
+      outline: false
+    },
+    success: function (graphic) {
+      // 绘制成功后回调
+      const positions = graphic.getOutlinePositions(false)
+      // 区域
+      drawfloodPotions = positions
+
+      if (floodByGraphic.options.perPositionHeight) {
+        // eslint-disable-next-line
+        let obj = [100,100]
+        instance?.proxy?.$emitter.emit("drawPolygonClickBack",obj);
+      } else {
+        // 求最大、最小高度值
+        graphic.show = false // 会遮挡深度图，所以需要隐藏
+        mars3d.PolyUtil.interPolygonByDepth({ scene: window.globalMap.scene, positions }).then((result) => {
+          graphic.show = true // 恢复显示
+          let obj = [result.minHeight,result.maxHeight]
+          instance?.proxy?.$emitter.emit("drawPolygonClickBack",obj);
+        })
+      }
+    }
+  })
+});
+//绘制多边形
+instance?.proxy?.$emitter.on("drawPolygonClick1", (e) => {
+  drawfloodPotions = null
+  window.globalMap.graphicLayer.clear()
+  if (floodByGraphic) {
+    floodByGraphic.clear()
+  }
+  window.globalMap.graphicLayer.startDraw({
+    type: "polygon",
+    style: {
+      color: "#007be6",
+      opacity: 0.5,
+      outline: false
+    },
+    success: function (graphic) {
+      const positions = graphic.positionsShow
+
+      drawfloodPotions = positions
+
+      if (floodByGraphic.options.perPositionHeight) {
+        let obj = [100,100]
+        instance?.proxy?.$emitter.emit("drawPolygonClickBack1",obj);
+      } else {
+        // 求最大、最小高度值
+        graphic.show = false // 会遮挡深度图，所以需要隐藏
+        mars3d.PolyUtil.interPolygonByDepth({ scene: window.globalMap.scene, positions }).then((result) => {
+          graphic.show = true // 恢复显示
+          let obj = [result.minHeight,result.maxHeight]
+          instance?.proxy?.$emitter.emit("drawPolygonClickBack1",obj);
+        })
+      }
+    }
+  })
+})
+//开始分析
+instance?.proxy?.$emitter.on("beginMeasureClick", (data) => {
+  if (drawfloodPotions == null) {
+    ElMessage({
+      message: '请首先绘制分析区域！',
+      type: 'warning',
+    })
+    return
+  }
+  window.globalMap.graphicLayer.clear()
+
+  floodByGraphic.setOptions({
+    positions: drawfloodPotions,
+    minHeight: Number(data.minHeight),
+    maxHeight: Number(data.maxHeight),
+    speed: Number(data.speed)
+  })
+  floodByGraphic.start()
+
+})
+//高度选择
+instance?.proxy?.$emitter.on("onChangeFloodHeight", (data) => {
+  floodByGraphic.height = data.height
+})
+///////////////////
+//日照分析
+const sunshineMeasureClick = () => {
+  dataSet.sunshineMeasureShow = true
+}
+instance?.proxy?.$emitter.on("startPlaySunshine", (e) => {
+  console.log('asd',e)
+  const currentTime = setShadows(e.date, e.hours, e.minutes)
+  const startDate = new Date(e.date + " 00:00:00")
+  const endDate = new Date(e.date + " 23:59:59")
+
+  sunshineshadows.multiplier = 1600
+  sunshineshadows.start(startDate, endDate, currentTime)
+})
+const setShadows = (date, hours, minutes) => {
+  const dateTime = new Date(`${date} ${hours}:${minutes}:00`)
+  console.log('dateTime',dateTime)
+  sunshineshadows.time = dateTime
+  console.log('sunshineshadows',sunshineshadows)
+  return dateTime
+}
+instance?.proxy?.$emitter.on("stopPlaySunshine", (e) => {
+  sunshineshadows.pause()
+})
+instance?.proxy?.$emitter.on("onChangeShadowTime", (e) => {
+  setShadows(e.date, e.hours, e.minutes)
+})
+instance?.proxy?.$emitter.on("drawPolygonShadow", (e) => {
+  drawShadowPolygon(e)
+})
+instance?.proxy?.$emitter.on("clearPolygonShadow", (e) => {
+  window.globalMap.graphicLayer.clear()
+  sunshineshadows.clear()
+})
+
+const drawShadowPolygon = (date) => {
+  window.globalMap.graphicLayer.clear()
+  window.globalMap.graphicLayer.startDraw({
+    type: "polygon",
+    style: {
+      color: "#007be6",
+      opacity: 0.5,
+      clampToGround: true
+    },
+    success: function (graphic) {
+      // 绘制成功后回调
+      const positions = graphic.positionsShow
+      window.globalMap.graphicLayer.clear()
+
+      console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))) // 方便测试拷贝坐标
+
+      // 求最大、最小高度值
+      sunshineshadows.multiplier = 14400
+      sunshineshadows
+        .startRate({
+          startDate: new Date(date + " 08:00:00"),
+          endDate: new Date(date + " 18:00:00"),
+
+          positions: positions,
+          step: 3,
+          minHeight: 20
+          // maxHeight: 30 //可以多层
+        })
+        .then((result) => {
+          showRateResult(result)
+        })
+    }
+  })
+}
+const showRateResult = (result) => {
+  console.log("分析结果", result)
+
+  window.globalMap.graphicLayer.clear()
+
+  result.positions.forEach((p, i) => {
+    const rate = p.rate * 100 // 阴影率，取值范围是0到1，0代表一直有光照，1代表一直无光照
+    const graphic = new mars3d.graphic.PointEntity({
+      position: p,
+      style: {
+        pixelSize: 10,
+        color: colorRamp.getColor(rate) // 计算颜色，色带颜色
+      },
+      popup: `阴影率: ${rate.toFixed(2)}%`
+    })
+    window.globalMap.graphicLayer.addGraphic(graphic)
+  })
+}
+const colorRamp = new mars3d.ColorRamp({
+  steps: [5, 15, 25, 35, 50, 80],
+  colors: ["rgb(0, 228, 0)", "rgb(256, 256, 0)", "rgb(256, 126, 0)", "rgb(256, 0, 0)", "rgb(153, 0, 76)", "rgb(126, 0, 35)"]
+})
+///////////////////////////////
+//天际线分析
+const skylineMeasureClick = () => {
+  const viewShed = new mars3d.graphic.SkylineBody({
+    style: {
+      color: "#00ffff",
+      opacity: 0.4
+    }
+  })
+  skylinegraphicLayer.addGraphic(viewShed)
+
+  viewShed.flyTo({ pitch: -45 })
+};
+/////开敞度分析
+const opennessMeasureClick = () => {
+  openNessgraphicLayer.startDraw({
+    type: "viewDome",
+    style: {
+      radius: 50
+    }
+  })
+};
+
+
+
 //返回距离的style
 const measureLineOption = (clampToGround) => {
   return {

src/components/map/widget/analysisMeasure.vue

@@ -26,7 +26,7 @@
           type="number"
           @change="baseHeight"
           id="inputNumber"
-          v-model:value="baseValue"
+          v-model:value="dataSet.baseValue"
           step="0.1"
         />
       </el-col>
@@ -43,7 +43,7 @@
           type="number"
           @change="txtMinHeight"
           id="inputNumber"
-          v-model:value="bottomValue"
+          v-model:value="dataSet.bottomValue"
           step="0.1"
         />
       </el-col>
@@ -57,7 +57,7 @@
           type="number"
           @change="txtMaxHeight"
           id="inputNumber"
-          v-model:value="topValue"
+          v-model:value="dataSet.topValue"
           step="0.1"
         />
       </el-col>
@@ -65,5 +65,48 @@
   </div>
 </template>
 <script setup>
-import "../map.less";
+import { onMounted, getCurrentInstance,reactive } from "vue";
+import * as mars3d from "mars3d";
+import '../map.less'
+const Cesium = mars3d.Cesium;
+const instance = getCurrentInstance();
+const dataSet = reactive({
+  baseValue: '',
+  bottomValue: '',
+  topValue: ''
+}); 
+
+onMounted(() => {
+   
+});
+window.onresize = function () {
+   
+};
+// 监听绘制完成的通知
+instance?.proxy?.$emitter.on("onVolumeMeasureEnd", (e) => {
+  console.log('eee',e)
+  // setSectionMeasureEchart(e);
+  // dataSet.baseValue = e.height.toFixed(1)
+  dataSet.bottomValue = e.minHeight.toFixed(1)
+  dataSet.topValue = getFixedNum(e.maxHeight)
+});
+
+const getFixedNum = (val) =>{
+  return Math.ceil(val * 10) / 10
+}
+//监听清除按钮的通知，清除
+instance?.proxy?.$emitter.on("measureClear", () => {
+  
+   
+});
+const analysisMeasure = () => {
+  instance?.proxy?.$emitter.emit("onVolumeMeasureStart");
+};
+
+ 
+
+ 
+
+ 
+ 
 </script>

src/components/map/widget/bufferMeasure.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="measureView bufferMeasureContatiner">
+      <el-row>
+        <el-col :span="6" class="ta-r">
+          <span class="analysisMeasureLabel">缓冲半径:</span>
+        </el-col>
+        <el-col :span="11" :offset="1" style="line-height:50px;">
+          <el-input
+            type="number"
+            @change="bufferNumChange"
+            v-model="dataSet.baseValue"
+          />
+        </el-col>
+        <el-col :span="4" :offset="1">
+            <span class="analysisMeasureLabel">公里</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="6" class="ta-r">
+          <span class="analysisMeasureLabel">绘制:</span>
+        </el-col>
+        <el-col :span="16" :offset="1" style="line-height:50px;">
+            <el-button size="mini" type="primary" @click="bufferClick('point')">点</el-button>
+            <el-button size="mini" type="primary" @click="bufferClick('line')">线</el-button>
+            <el-button size="mini" type="primary" @click="bufferClick('polygon')">面</el-button>
+        </el-col>
+      </el-row>
+    </div>
+  </template>
+  <script setup>
+  import { onMounted, getCurrentInstance,reactive } from "vue";
+  import * as mars3d from "mars3d";
+  import '../map.less'
+  const Cesium = mars3d.Cesium;
+  const instance = getCurrentInstance();
+  const dataSet = reactive({
+    baseValue: 1
+  }); 
+  
+  onMounted(() => {
+     
+  });
+  window.onresize = function () {
+     
+  };
+  
+  const bufferClick = (e) => {
+    instance?.proxy?.$emitter.emit("bufferbtnClick",e);
+  };
+  const bufferNumChange = () => {
+    instance?.proxy?.$emitter.emit("bufferNumChange",dataSet.baseValue);
+  };
+  
+   
+  
+   
+  
+   
+   
+  </script>
+  

src/components/map/widget/floodMeasure.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="measureView bufferMeasureContatiner" style="width:345px;">
+        <el-row>
+            <el-col :span="6" class="jc-e flex ai-c">
+            <span class="analysisMeasureLabel fz-14">分析区域:</span>
+            </el-col>
+            <el-col :span="16" :offset="1" class="flex ai-c">
+                <el-button size="mini" type="primary" @click="drawPolygonClick">绘制矩形</el-button>
+                <el-button size="mini" type="primary" @click="drawPolygonClick1">绘制多边形</el-button>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="6" class="jc-e flex ai-c">
+                <span class="analysisMeasureLabel fz-14">最低海拔:</span>
+            </el-col>
+            <el-col :span="11" :offset="1" class="flex ai-c">
+            <el-input
+                type="number"
+                @change="bufferNumChange"
+                v-model="formState.minHeight"
+            />
+            </el-col>
+            <el-col :span="4" :offset="1">
+                <span class="analysisMeasureLabel">（米）</span>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="6" class="jc-e flex ai-c">
+                <span class="analysisMeasureLabel fz-14">最高海拔:</span>
+            </el-col>
+            <el-col :span="11" :offset="1" class="flex ai-c">
+            <el-input
+                type="number"
+                @change="bufferNumChange"
+                v-model="formState.maxHeight"
+            />
+            </el-col>
+            <el-col :span="4" :offset="1">
+                <span class="analysisMeasureLabel">（米）</span>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="6" class="jc-e flex ai-c">
+                <span class="analysisMeasureLabel fz-14">淹没速度:</span>
+            </el-col>
+            <el-col :span="9" :offset="1" class="flex ai-c">
+            <el-input
+                type="number"
+                @change="bufferNumChange"
+                v-model="formState.speed"
+            />
+            </el-col>
+            <el-col :span="6" :offset="1">
+                <span class="analysisMeasureLabel">（米/秒）</span>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="6" class="jc-e flex ai-c">
+                <span class="analysisMeasureLabel fz-14">高度选择:</span>
+            </el-col>
+            <el-col :span="14" :offset="2" class="flex ai-c">
+                <el-slider @change="onChangeHeight" v-model="formState.height" :min="formState.minHeight" :max="formState.maxHeight" :step="1" />
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="6" class="jc-e flex ai-c">
+                <span class="analysisMeasureLabel fz-14">当前高度:</span>
+            </el-col>
+            <el-col :span="14" :offset="2" class="flex ai-c">
+                <span class="analysisMeasureLabel fz-14">{{ formState.height }}</span>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="24" class="flex ai-c jc-c" style="margin-top:15px;">
+                <el-button size="mini" type="primary" @click="beginMeasureClick">开始分析</el-button>
+            </el-col>
+        </el-row>
+    </div>
+  </template>
+  <script setup>
+  import { onMounted, getCurrentInstance,reactive } from "vue";
+  import * as mars3d from "mars3d";
+  import '../map.less'
+  const Cesium = mars3d.Cesium;
+  const instance = getCurrentInstance();
+  const formState = reactive({
+    minHeight: 0,
+    maxHeight: 0,
+    speed: 10,
+    height: 0
+  }); 
+  
+  onMounted(() => {
+     
+  });
+  instance?.proxy?.$emitter.on("drawPolygonClickBack", (e) => {
+    formState.minHeight = Math.ceil(e[0])
+    formState.maxHeight = Math.ceil(e[1])
+  })
+  instance?.proxy?.$emitter.on("floodHeightChange", (e) => {
+    formState.height = e
+  })
+  const drawPolygonClick = (e) => {
+    instance?.proxy?.$emitter.emit("drawPolygonClick",e);
+  };
+
+  const beginMeasureClick = (e) => {
+    instance?.proxy?.$emitter.emit("beginMeasureClick",formState);
+  };
+
+  const onChangeHeight = (e) => {
+    instance?.proxy?.$emitter.emit("onChangeFloodHeight",formState);
+  };
+
+  const drawPolygonClick1 = (e) => {
+    instance?.proxy?.$emitter.emit("drawPolygonClick1",e);
+  };
+  instance?.proxy?.$emitter.on("drawPolygonClickBack1", (e) => {
+    formState.minHeight = Math.ceil(e[0])
+    formState.maxHeight = Math.ceil(e[1])
+  })
+  
+  
+   
+  
+   
+  
+   
+   
+  </script>
+  

src/components/map/widget/sunshineMeasure.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="measureView bufferMeasureContatiner"  style="width:320px;">
+        <el-row>
+            <el-col :span="24" class="">
+                <span class="analysisMeasureLabel">日照效果:</span>
+            </el-col>
+        </el-row>
+        <el-row class="fz-14">
+            <el-col :span="6" class="ta-r">
+                <span class="analysisMeasureLabel">日期选择:</span>
+            </el-col>
+            <el-col :span="16" :offset="1" style="line-height:50px;">
+                <el-date-picker
+                    style="width: 100%;"
+                    v-model="dataSet.currDate"
+                    type="date"
+                    placeholder="选择日期"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                />
+            </el-col>
+        </el-row>
+        <el-row class="fz-14">
+            <el-col :span="6" class="ta-r">
+                <span class="analysisMeasureLabel">时间选择:</span>
+            </el-col>
+            <el-col :span="16" :offset="1" class="flex ai-c">
+                <el-slider @change="onChangeShadowTime" v-model="dataSet.timeVal" :min="0" :max="1440" :step="1" />
+            </el-col>
+        </el-row>
+        <el-row class="fz-14">
+            <el-col :span="6" class="ta-r">
+                <span class="analysisMeasureLabel">当前时间:</span>
+            </el-col>
+            <el-col :span="16" :offset="1" class="flex ai-c">
+                <span class="analysisMeasureLabel">{{ dataSet.currDate }} {{ dataSet.hours }} 时 {{ dataSet.minutes }}分</span>
+            </el-col>
+        </el-row>
+        <el-row class="fz-14">
+            <el-col :span="6" class="ta-r">
+            <span class="analysisMeasureLabel">自动播放:</span>
+            </el-col>
+            <el-col :span="16" :offset="1" style="line-height:50px;">
+                <el-button size="mini" type="primary" @click="startPlaySunshine">播放</el-button>
+                <el-button size="mini" type="primary" @click="stopPlaySunshine">暂停</el-button>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="24" class="">
+                <span class="analysisMeasureLabel">阴影率分析:</span>
+            </el-col>
+        </el-row>
+        <el-row class="fz-14">
+            <el-col :span="6" class="ta-r">
+             
+            </el-col>
+            <el-col :span="16" :offset="1" style="line-height:50px;">
+                <el-button size="mini" type="primary" @click="drawPolygonShadow">绘制面</el-button>
+                <el-button size="mini" type="primary" @click="clearPolygonShadow">清除</el-button>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script setup>
+    import { onMounted, getCurrentInstance,reactive } from "vue";
+    import * as mars3d from "mars3d";
+    import '../map.less'
+    const Cesium = mars3d.Cesium;
+    const instance = getCurrentInstance();
+    const dataSet = reactive({
+        currDate: '',
+        timeVal: '',
+        hours: '',
+        minutes: ''
+    }); 
+  
+    onMounted(() => {
+        let yy = new Date().getFullYear();
+        var mm =
+        new Date().getMonth() < 9
+            ? "0" + (new Date().getMonth() + 1)
+            : new Date().getMonth() + 1;
+        var dd =
+        new Date().getDate() < 10
+            ? "0" + new Date().getDate()
+            : new Date().getDate();
+        let hh = new Date().getHours();
+        let mf =
+        new Date().getMinutes() < 10
+            ? "0" + new Date().getMinutes()
+            : new Date().getMinutes();
+        let ss =
+        new Date().getSeconds() < 10
+            ? "0" + new Date().getSeconds()
+            : new Date().getSeconds();
+        dataSet.currDate = yy + '-' + mm + '-' + dd
+        dataSet.hours = hh
+        dataSet.minutes = mf
+        dataSet.timeVal = hh*60 + mf
+        console.log('dataSet.timeVa',dataSet.timeVal)
+    });
+
+    instance?.proxy?.$emitter.on("onSunShadowRotateEmit", (e) => {
+        dataSet.timeVal = e
+    });
+  
+    const stopPlaySunshine = (e) => {
+        instance?.proxy?.$emitter.emit("stopPlaySunshine");
+    };
+    const startPlaySunshine = () => {
+        let param = {
+            date: dataSet.currDate,
+            hours: dataSet.hours,
+            minutes: dataSet.minutes,
+        }
+        instance?.proxy?.$emitter.emit("startPlaySunshine",param);
+    };
+    const onChangeShadowTime = (e) => {
+        let time = dataSet.timeVal/60
+        dataSet.hours = Math.floor(time)
+        dataSet.minutes = dataSet.timeVal % 60
+        let param = {
+            date: dataSet.currDate,
+            hours: Math.floor(time),
+            minutes: dataSet.timeVal % 60,
+        }
+        instance?.proxy?.$emitter.emit("onChangeShadowTime",param);
+    };
+    const drawPolygonShadow = (e) => {
+        instance?.proxy?.$emitter.emit("drawPolygonShadow",dataSet.currDate);
+    };
+    const clearPolygonShadow = (e) => {
+        instance?.proxy?.$emitter.emit("clearPolygonShadow");
+    };
+  
+    
+  
+   
+  
+   
+   
+</script>
+  

src/components/map/widget/viewshedMeasure.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="measureView bufferMeasureContatiner" style="width:320px;">
+    <el-row>
+      <el-col :span="8" class="jc-e flex ai-c">
+        <span class="analysisMeasureLabel fz-14">水平张角:</span>
+      </el-col>
+      <el-col :span="14" :offset="1" class="flex ai-c">
+        <el-slider @change="onChangeAngle" v-model="dataSet.cameraAngle" :min="1" :max="60" :step="0.1" />
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8" class="jc-e flex ai-c">
+        <span class="analysisMeasureLabel fz-14">垂直张角:</span>
+      </el-col>
+      <el-col :span="14" :offset="1" class="flex ai-c">
+        <el-slider @change="onChangeAngle2" v-model="dataSet.cameraAngle2" :min="1" :max="30" :step="0.1" />
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8" class="jc-e flex ai-c">
+        <span class="analysisMeasureLabel fz-14">投射距离:</span>
+      </el-col>
+      <el-col :span="14" :offset="1" class="flex ai-c">
+        <el-slider @change="onChangeDistance" v-model="dataSet.distanceValue" :min="1" :max="9999" :step="1" />
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8" class="jc-e flex ai-c">
+        <span class="analysisMeasureLabel fz-14">四周方向:</span>
+      </el-col>
+      <el-col :span="6" :offset="1" class="flex ai-c">
+        <el-slider @change="onChangeHeading" v-model="dataSet.heading" :min="-180" :max="180" :step="0.1" />
+      </el-col>
+      <el-col :span="8" :offset="1" class="jc-e flex ai-c">
+        <el-button size="mini" type="primary" @click="onClickSelView">图上选点</el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8" class="jc-e flex ai-c">
+        <span class="analysisMeasureLabel fz-14">俯仰角度:</span>
+      </el-col>
+      <el-col :span="14" :offset="1" class="flex ai-c">
+        <el-slider @change="onChangePitch" v-model="dataSet.pitchValue" :min="1" :max="60" :step="0.1" />
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8" class="jc-e flex ai-c">
+        <span class="analysisMeasureLabel fz-14">视椎框线:</span>
+      </el-col>
+      <el-col :span="14" :offset="1" class="flex ai-c">
+        <el-checkbox  @change="showFrustum" v-model="dataSet.showFrustum" label="是否显示" size="large" />
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8" class="jc-e flex ai-c">
+        <span class="analysisMeasureLabel fz-14">可视域透明度:</span>
+      </el-col>
+      <el-col :span="14" :offset="1" class="flex ai-c">
+        <el-slider @change="onChangeOpacity" v-model="dataSet.opacity" :min="0" :max="1" :step="0.1" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup>
+  import { onMounted, getCurrentInstance,reactive } from "vue";
+  import * as mars3d from "mars3d";
+  import '../map.less'
+  const Cesium = mars3d.Cesium;
+  const instance = getCurrentInstance();
+  const dataSet = reactive({
+    cameraAngle: 60,
+    cameraAngle2: 30,
+    distanceValue: 57,
+    heading: 109,
+    pitchValue: 2,
+    showFrustum: false,
+    opacity: 0.6
+  }); 
+  
+  onMounted(() => {
+    
+  });
+  window.onresize = function () {
+     
+  };
+
+  
+  const onChangeAngle = (e) => {
+    instance?.proxy?.$emitter.emit("onChangeAngle",dataSet.cameraAngle);
+  };
+  const onChangeAngle2 = (e) => {
+    instance?.proxy?.$emitter.emit("onChangeAngle2",dataSet.cameraAngle2);
+  };
+  const onChangeDistance = (e) => {
+    instance?.proxy?.$emitter.emit("onChangeDistance",dataSet.distanceValue);
+  };
+  const onChangeHeading = (e) => {
+    instance?.proxy?.$emitter.emit("onChangeHeading",dataSet.heading);
+  };
+  const onChangePitch = (e) => {
+    instance?.proxy?.$emitter.emit("onChangePitch",dataSet.pitchValue);
+  };
+  const showFrustum = (e) => {
+    instance?.proxy?.$emitter.emit("showFrustum",dataSet.showFrustum);
+  };
+  const onClickSelView = (e) => {
+    instance?.proxy?.$emitter.emit("onClickSelView");
+  };
+  const onChangeOpacity = (e) => {
+    instance?.proxy?.$emitter.emit("onChangeOpacity",dataSet.opacity);
+  };
+  
+  
+
+  instance?.proxy?.$emitter.on("viewshedgraphicLayer", (data) => {
+    console.log('ddd',data)
+    
+
+    // video.cameraAngle = graphic.angle
+    // video.cameraAngle2 = graphic.angle2
+    // video.distanceValue = graphic.distance
+    // video.pitchValue = graphic.pitch
+    // video.opacity = graphic.opacity
+    // video.heading = graphic.heading
+    // video.showFrustum = graphic.showFrustum
+
+ 
+  })
+  
+   
+  
+   
+  
+   
+   
+</script>
+<style>
+  .el-checkbox__label{
+    color: #fff;
+  }
+  .el-slider__button{
+    width: 15px;
+    height: 15px;
+  }
+</style>
+