1

src/views/residentAnalysis/index.vue

@@ -2,7 +2,7 @@
   <div id="page">
     <div class="header">
       <div class="images flex a-c" v-for="item in imagesList" :key="item.id">
-        <img :src="item.src" />
+        <img :src="item.src" @click="drawRectangle" />
         <el-button
           class="form-btn"
           type="primary"
@@ -11,7 +11,6 @@
           >确定</el-button
         >
       </div>
-      <el-button class="btn" type="primary" size="mini">确定</el-button>
     </div>
 
     <div class="content flex j-s a-c">
@@ -21,12 +20,21 @@
           <div class="control-panel">
             <div class="title">范围</div>
             <el-form-item label="左上角">
-              <el-input v-model="form.leftTop"></el-input>
+              <el-input v-model="form.leftTop" @blur="updateArea"></el-input>
             </el-form-item>
             <el-form-item label="右下角">
-              <el-input v-model="form.rightBottom"></el-input>
+              <el-input v-model="form.rightBottom" @blur="updateArea">
+              </el-input>
             </el-form-item>
-            <div class="importJson flex j-c a-c">导入json文件</div>
+            <input
+              type="file"
+              ref="fileInput"
+              @change="handleFileUpload"
+              style="display: none"
+            />
+            <div class="importJson flex j-c a-c" @click="triggerFileUpload">
+              导入json文件
+            </div>
           </div>
 
           <!-- 权重 -->
@@ -85,9 +93,9 @@
           v-if="roadLineList.length > 0"
         >
           <vxe-column type="seq" width="70"></vxe-column>
-          <vxe-column field="name" title="Name"></vxe-column>
-          <vxe-column field="sex" title="Sex"></vxe-column>
-          <vxe-column field="age" title="Age"></vxe-column>
+          <vxe-column field="编码" title="编码"></vxe-column>
+          <vxe-column field="A" title="名称"></vxe-column>
+          <vxe-column field="图形特" title="图形特"></vxe-column>
         </vxe-table>
         <!-- 水点 -->
         <vxe-table
@@ -126,114 +134,14 @@ export default {
   data() {
     return {
       imagesList: [{id: 1, src: require('@/assets/image/crop.png')}],
-      roadPointList: [
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-      ],
-      roadLineList: [
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-      ],
-      waterPointList: [
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-      ],
-      waterLineList: [
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-        {
-          id: 10001,
-          name: 'Test1',
-          role: 'Develop',
-          sex: 'Man',
-          age: 28,
-          address: 'test abc',
-        },
-      ],
+      roadPointList: [],
+      roadLineList: [],
+      waterPointList: [],
+      waterLineList: [],
 
       form: {
-        leftTop: '114.33,27.8',
-        rightBottom: '114.34, 27.79',
+        leftTop: '',
+        rightBottom: '',
         slopePer: 0.5,
         peoplePer: 0.2,
         plantPer: 0.2,
@@ -245,9 +153,12 @@ export default {
       },
       analyzing: false,
       rectCount: 0,
+      isHand: false,
 
       selectedRect: null,
       rectangles: [],
+      labels: [],
+
       peopleGeo: null,
       plantGeo: null,
       soilGeo: null,
@@ -283,22 +194,14 @@ export default {
     },
   },
 
-  watch: {
-    positions: {
-      deep: true,
-      handler(val) {
-        this.drawInitialArea(val)
-      },
-    },
-  },
-
   mounted() {
     this.getMapJson()
     this.getColorList()
   },
 
   beforeDestroy() {
-    delete window.mars3d
+    delete window.viewer
+    delete window.graphicLayer
   },
 
   methods: {
@@ -321,6 +224,46 @@ export default {
       })
     },
 
+    // 导入json文件
+    triggerFileUpload() {
+      this.$refs.fileInput.click()
+    },
+
+    handleFileUpload(event) {
+      const file = event.target.files[0]
+      if (file) {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          try {
+            const uploadedJson = JSON.parse(e.target.result)
+            this.importJson(uploadedJson)
+          } catch (error) {
+            console.error('解析 JSON 文件失败:', error)
+            this.$message.error('解析 JSON 文件失败')
+          }
+        }
+        reader.readAsText(file)
+      }
+    },
+
+    async importJson(uploadedJson) {
+      if (!uploadedJson) {
+        this.$message.warning('请先选择一个 JSON 文件')
+        return
+      }
+      // 清除现有矩形
+      if (
+        this.polygon &&
+        (uploadedJson?.leftTop || uploadedJson?.rightBottom)
+      ) {
+        window.graphicLayer.removeGraphic(this.polygon)
+      }
+
+      this.form.leftTop = uploadedJson.leftTop
+      this.form.rightBottom = uploadedJson.rightBottom
+      this.drawInitialArea()
+    },
+
     getColorList() {
       this.colorList = colorMap.createColormap({
         colormap: 'jet',
@@ -342,7 +285,7 @@ export default {
       window.shortestPathLayer = new window.mars3d.layer.GraphicLayer()
       window.viewer.addLayer(window.shortestPathLayer)
 
-      this.drawInitialArea()
+      // this.drawInitialArea()
       this.loadGeoJson()
     },
 
@@ -375,10 +318,12 @@ export default {
       }
 
       // 默认只加载一个，其他按需加载
-      this.loadLayers(['people', 'plant', 'soil'], (results) => {
-        console.log('所有图层加载完成', results)
-      })
-      // this.loadLayer('people')
+      // this.loadLayers(['people', 'plant', 'soil'], (results) => {
+      //   console.log('所有图层加载完成', results)
+      // })
+      this.loadLayer('people')
+      this.loadLayer('plant', false)
+      this.loadLayer('soil', false)
     },
 
     createLayerConfig(url, color, type = 'polygon') {
@@ -449,7 +394,7 @@ export default {
       return baseConfig
     },
 
-    async loadLayer(layerName) {
+    async loadLayer(layerName, isLoad = true) {
       if (this.layers[layerName].layer) {
         this.layers[layerName].layer.show = !this.layers[layerName].layer.show
         return
@@ -459,11 +404,11 @@ export default {
         this.layers[layerName].config
       )
 
-      await window.viewer.addLayer(this.layers[layerName].layer)
+      isLoad ? await window.viewer.addLayer(this.layers[layerName].layer) : null
     },
 
     // 新增方法：同时加载多个图层
-    async loadLayers(names = [], cb) {
+    async loadLayers(names = [], cb, show = true) {
       const tasks = names.map((name) => {
         const cfg = this.layers[name]
         if (!cfg) return Promise.resolve(null) // 无配置直接过
@@ -544,14 +489,20 @@ export default {
     },
 
     // 判断矩形与 mars3d GeoJSON 图层是否相交（不转 GeoJSON）
-    getIntersectId(position, layer, bufferDistance = 0.001) {
+    getIntersectId(position, layer) {
       console.log('position===>', position, layer)
       if (!position || !layer || !layer.graphics) return null
 
       const rectCoords = position.concat([position[0]]) // 闭合
+
+      console.log('rectCoords===>', rectCoords)
+
       const rectPoly = turf.polygon([rectCoords])
+      console.log('rectPoly===>', rectPoly)
       const [minX, minY, maxX, maxY] = turf.bbox(rectPoly) // 矩形 bbox
 
+      console.log('minX, minY, maxX, maxY===>', minX, minY, maxX, maxY)
+
       let fc = this._polyCache.get(layer)
 
       if (!fc) {
@@ -636,7 +587,13 @@ export default {
 
     // 手动绘制矩形
     async drawRectangle(clampToGround) {
-      const graphic = await window.graphicLayer.startDraw({
+      this.clearRectangles()
+      if (this.polygon) {
+        window.graphicLayer.removeGraphic(this.polygon)
+      }
+      this.isHand = true
+      let isEntityGraphic = false
+      this.polygon = await window.graphicLayer.startDraw({
         type: isEntityGraphic ? 'rectangle' : 'rectangleP',
         style: {
           color: clampToGround ? '#ffff00' : '#3388ff',
@@ -648,7 +605,9 @@ export default {
         },
       })
 
-      console.log('标绘完成', graphic.toJSON())
+      let positions = this.polygon.toJSON().positions
+      this.form.leftTop = positions[0][0] + ',' + positions[0][1]
+      this.form.rightBottom = positions[1][0] + ',' + positions[1][1]
     },
 
     // 绘制矩形区域
@@ -660,7 +619,7 @@ export default {
             Cesium.Cartesian3.fromDegrees(p[0], p[1], 0)
           ),
           style: {
-            color: '#00ff00',
+            color: '#ffff00',
             opacity: 0.3,
             outline: true,
             outlineColor: '#ffffff',
@@ -687,11 +646,15 @@ export default {
       }
     },
 
-    updateArea(val) {
+    updateArea() {
+      if (this.isHand) {
+        this.isHand = false
+        return
+      }
       if (!this.polygon) return
 
       // 将经纬度转换为笛卡尔坐标
-      const cartesianPositions = val.map((p) =>
+      const cartesianPositions = this.positions.map((p) =>
         Cesium.Cartesian3.fromDegrees(p[0], p[1], 0)
       )
 
@@ -703,11 +666,15 @@ export default {
         this.polygon.update()
       }
 
-      console.log('区域已更新', val)
+      console.log('区域已更新', this.positions)
     },
 
     // 分析平均坡度
     async analyzeAverageSlope() {
+      if (!this.form.leftTop || !this.form.rightBottom) {
+        return this.$message.warning('请选择范围！')
+      }
+
       console.log('开始坡度分析')
       this.analyzing = true
       this.selectedRect = null
@@ -844,7 +811,7 @@ export default {
         }
       } catch (e) {
         console.error('坡度分析失败', e)
-        alert('坡度分析失败，请检查地形数据')
+        this.$message.error('坡度分析失败，请检查地形数据')
       } finally {
         this.drawLabelAndRec()
       }
@@ -919,32 +886,26 @@ export default {
       }
 
       /* 3. 批量创建 Graphic（底层一次性构造，避免反复 new） */
-      const rectGraphics = rectOpts.map(
+      this.rectangles = rectOpts.map(
         (opt) => new mars3d.graphic.PolygonEntity(opt)
       )
-      const labelGraphics = labelOpts.map(
-        (opt) => new mars3d.graphic.LabelEntity(opt)
-      )
+      this.labels = labelOpts.map((opt) => new mars3d.graphic.LabelEntity(opt))
 
       /* 4. 一次性添加到图层（mars3d 支持数组）*/
-      window.graphicLayer.addGraphic(rectGraphics)
-      window.graphicLayer.addGraphic(labelGraphics)
+      window.graphicLayer.addGraphic(this.rectangles)
+      window.graphicLayer.addGraphic(this.labels)
 
       /* 5. 图层级事件委托：只监听矩形图形的点击事件 */
       window.graphicLayer.off(mars3d.EventType.click, this._selectRect, this) // 先清旧监听
 
       // 为每个矩形图形单独绑定点击事件
-      rectGraphics.forEach((rectGraphic) => {
+      this.rectangles.forEach((rectGraphic) => {
         rectGraphic.on(mars3d.EventType.click, (event) => {
           this._selectRect(event)
         })
       })
 
-      /* 6. 保存引用 */
-      this.rectangles = rectGraphics
-      this.labels = labelGraphics
-
-      /* 7. 事件处理函数 */
+      /* 6. 事件处理函数 */
       this._selectRect = (event) => {
         const graphic = event.graphic
         // 确保只有矩形图形会触发选择
@@ -952,6 +913,7 @@ export default {
           this.selectRectangle(graphic)
         }
       }
+      this.$message.success('计算成功！')
     },
 
     /**
@@ -1058,15 +1020,11 @@ export default {
         id: rect.id,
         center: rect.center,
       }
-      if (!this.roadPointGeo) {
-        this.loadLayer('roadPoint')
-      } else if (!this.roadLineGeo) {
-        this.loadLayer('roadLine')
-      } else if (!this.waterPointGeo) {
-        this.loadLayer('waterPoint')
-      } else if (!this.waterLineGeo) {
-        this.loadLayer('waterLine')
-      }
+
+      this.roadPointList = []
+      this.roadLineList = []
+      this.waterPointList = []
+      this.waterLineList = []
 
       if (!this.roadWaterLock) {
         this.loadLayers(
@@ -1082,38 +1040,69 @@ export default {
     },
 
     getRoadWaterIds(rect) {
+      const positions = rect.points.map((d) => [d.lng, d.lat])
+
       let roadPointId = this.getIntersectId(
-        rect.points,
+        positions,
         this.layers['roadPoint'].layer
       )
       let roadLineId = this.getIntersectId(
-        rect.points,
+        positions,
         this.layers['roadLine'].layer
       )
       let waterPointId = this.getIntersectId(
-        rect.points,
+        positions,
         this.layers['waterPoint'].layer
       )
       let waterLineId = this.getIntersectId(
-        rect.points,
+        positions,
         this.layers['waterLine'].layer
       )
 
+      if (roadPointId) {
+        this.roadPointList.push(
+          this.layers['roadPoint'].layer.getGraphicById(roadPointId).options
+            .attr
+        )
+      } else if (roadLineId) {
+        this.roadLineList.push(
+          this.layers['roadLine'].layer.getGraphicById(roadLineId).options.attr
+        )
+      } else if (waterPointId) {
+        this.waterPointList.push(
+          this.layers['waterPoint'].layer.getGraphicById(waterPointId).options
+            .attr
+        )
+      } else if (waterLineId) {
+        this.waterLineList.push(
+          this.layers['waterLine'].layer.getGraphicById(waterLineId).options
+            .attr
+        )
+      }
+
       console.log(
         'roadPointId===>',
-        roadPointId,
-        roadLineId,
-        waterPointId,
-        waterLineId
+        this.roadPointList,
+        this.roadLineList,
+        this.waterPointList,
+        this.waterLineList
       )
     },
 
     // 清除所有矩形
     clearRectangles() {
-      this.rectangles.forEach((rect) => {
-        window.graphicLayer.removeGraphic(rect)
-      })
+      if (this.rectangles.length > 0) {
+        this.rectangles.forEach((rect) => {
+          window.graphicLayer.removeGraphic(rect)
+        })
+      }
+      if (this.labels.length > 0) {
+        this.labels.forEach((label) => {
+          window.graphicLayer.removeGraphic(label)
+        })
+      }
       this.rectangles = []
+      this.labels = []
     },
   },
 }
@@ -1202,6 +1191,7 @@ export default {
     width: 452px;
     height: 100%;
     background-color: #d4e5db;
+    padding-left: 20px;
     overflow: auto;
 
     .item {