zbcx_ckyc 1.0.0

package/src/plugins/app/com/MapMethods.js

@@ -0,0 +1,355 @@
+export default
+{
+  data()
+  {
+    return {
+
+    }
+  },
+  methods: {
+    /**
+     * 缩小
+    */
+    reduceHeight()
+    {
+      let eye = window.Viewer.camera.positionCartographic
+      window.Viewer.camera.setView({ destination: Cesium.Cartesian3.fromRadians(eye.longitude, eye.latitude, eye.height - eye.height / 5) })
+    },
+
+    /**
+     * 放大
+    */
+    addHeight()
+    {
+      let eye = window.Viewer.camera.positionCartographic
+      window.Viewer.camera.setView({ destination: Cesium.Cartesian3.fromRadians(eye.longitude, eye.latitude, eye.height + eye.height / 5) })
+    },
+
+    loadDataPntAll(ret)
+    {
+      this.loadDataPnt(ret)
+      this.loadImportPnt(this.importData)
+    },
+
+    loadDataLineAll(ret)
+    {
+      this.loadDataLine(ret)
+    },
+
+    loadDataPolAll(ret)
+    {
+      this.loadDataPol(ret)
+      this.loadImportPol(this.importData)
+    },
+
+    /**
+     * 加载点数据
+     * @param {*} ret
+     */
+    loadDataPnt(ret)
+    {
+      if (ret[0].pnt)
+      {
+        let pnt = JSON.parse(ret[0].pnt)
+        this.pointsByDataBase = pnt
+        this.tool.addVector(pnt, 6, false, true)
+        let labels = pnt.map(i => ({ ...i, lat: i.lat }))
+        this.tool.addLabel(labels)
+      }
+    },
+
+    loadImportPnt(pnt)
+    {
+      // 根据bz属性分组
+      const group = this.groupByProp(pnt, 'bz', 'ASC')
+      const result = pnt.map(i =>
+      {
+        const coor = this.transformCoor(i.geom.coordinates, false)
+        const obj = { lng: coor[0], lat: coor[1], tag: 'layer-tree' }
+        // 通过bz属性取出组，始终取出第一个，取出透明度
+        const { tmd } = group[i.bz][0]
+        // 判断透明度属性值是否存在
+        const isExistTmd = tmd >= 0 && tmd !== ''
+        const color = Cesium.Color.fromCssColorString(isExistTmd ? `rgba(0, 0, 255, ${tmd})` : 'rgba(0, 0, 255, 1)')
+        obj.style = { color, outlineColor: color }
+        return obj
+      })
+      this.tool.addVector(result, 1, false, true)
+    },
+
+    loadImportLine(lines)
+    {
+      let lineCoor = []
+      const group = this.groupByProp(lines, 'bz', 'ASC')
+      for (let i = 0; i < lines.length; i++)
+      {
+        const item = lines[i]
+        const coordinates = item.geom.coordinates
+        let jwd = this.PublicMethods.getCxeCoor(coordinates.map(k => this.transformCoor(k, false)))
+        // 通过bz属性取出组，始终取出第一个，取出透明度
+        const { tmd } = group[item.bz][0]
+        // 判断透明度属性值是否存在
+        const isExistTmd = tmd >= 0 && tmd !== ''
+        const color = isExistTmd ? `rgba(0, 0, 255, ${tmd})` : 'rgba(0, 0, 255, 1)'
+
+        lineCoor.push({ jwd, tag: 'layer-tree', lineColor: color })
+      }
+      if (this.tool)
+        this.tool.addVector(lineCoor, 2, false, true)
+      else
+        window.tool.addVector(lineCoor, 2, false, true)
+    },
+
+    loadImportPol(pols)
+    {
+      // 根据 bz 属性分组
+      let group = this.groupByProp(pols, 'bz', 'ASC')
+      let polCoor = []
+    
+      for (let i = 0; i < pols.length; i++)
+      {
+        const item = pols[i]
+        const geom = item.geom
+        const type = geom.type
+        const coordinates = geom.coordinates
+    
+        // 获取组信息和透明度
+        const { tmd } = group[item.bz][0]
+        const isExistTmd = tmd >= 0 && tmd !== ''
+        const color = isExistTmd ? `rgba(0, 0, 255, ${tmd})` : 'rgba(0, 0, 255, 1)'
+    
+        if (type === 'Polygon')
+        {
+          // 处理 Polygon 类型
+          let jwd = this.PublicMethods.getCxeCoor(coordinates[0].map(k => this.transformCoor(k, false)))
+          polCoor.push({ jwd, tag: 'layer-tree', fillColor: color })
+        }
+        else if (type === 'MultiPolygon')
+        {
+          // 处理 MultiPolygon 类型
+          for (let j = 0; j < coordinates.length; j++)
+          {
+            let polyCoords = coordinates[j]
+            for (let k = 0; k < polyCoords.length; k++)
+            {
+              let ring = polyCoords[k]
+              let jwd = this.PublicMethods.getCxeCoor(ring.map(l => this.transformCoor(l, false)))
+              polCoor.push({ jwd, tag: 'layer-tree', fillColor: color })
+            }
+          }
+        }
+        else
+          console.warn(`Unsupported geometry type: ${type}`)
+      }
+      if (this.tool)
+        this.tool.addVector(polCoor, 3, false, true)
+      else
+        window.tool.addVector(polCoor, 3, false, true)
+
+      // excel 数据，每个拐点都需要加标注
+      if (pols[0].datasource === 'excel')
+      {
+        const labels = JSON.parse(pols[0].conf).map(i => ({ lng: i.经度, lat: i.纬度, label: String(i.序号), tag: 'layer-tree' }))
+        window.tool.addLabel(labels.slice(0, -1))
+      }
+    },
+
+    // loadImportPol(pols)
+    // {
+    //   // 根据bz属性分组
+    //   let group = this.groupByProp(pols, 'bz', 'ASC')
+    //   let polCoor = []
+    //   for (let i = 0; i < pols.length; i++)
+    //   {
+    //     const item = pols[i]
+    //     const coordinates = item.geom.coordinates
+    //     let jwd = this.PublicMethods.getCxeCoor(coordinates[0].map(k => this.transformCoor(k, false)))
+    //     // 通过bz属性取出组，始终取出第一个，取出透明度
+    //     const { tmd } = group[item.bz][0]
+    //     // 判断透明度属性是否存在
+    //     const isExistTmd = tmd >= 0 && tmd !== ''
+    //     const color = isExistTmd ? `rgba(0, 0, 255, ${tmd})` : 'rgba(0, 0, 255, 1)'
+    //     polCoor.push({ jwd, tag: 'layer-tree', fillColor: color })
+    //   }
+    //   this.tool.addVector(polCoor, 3, false, true)
+    // },
+
+    /**
+     * 对数组对象根据某个属性值进行分组
+     * @param {Array} array 需要分组的数组对象
+     * @param {String} key 需要分组的属性名
+     * @param {'DESC' | 'ASC'} sort 排序方式，DESC为降序，ASC为升序，默认不排序
+     * @returns {Object<Array>} 分组后的结果——对象数组
+     */
+    groupByProp(array, key, sort)
+    {
+      if (!array.length) return array
+      const group = array.reduce((p, c) =>
+      {
+        const name = c[key];
+        (p[name] = p[name] || []).push(c)
+        return p
+      }, {})
+      if (sort === 'DESC')
+        for (let key in group) group[key].sort((a, b) => b.id - a.id)
+      else if (sort === 'ASC')
+        for (let key in group) group[key].sort((a, b) => a.id - b.id)
+      return group
+    },
+
+    /**
+     * 加载线数据
+     * @param {*} ret
+     */
+    loadDataLine(ret)
+    {
+      if (ret[0].line)
+      {
+        let line = JSON.parse(ret[0].line)
+        this.linesByDataBase = line
+        this.tool.addVector(line, 2, false, true)
+        this.tool.addLabel(line)
+      }
+    },
+
+    /**
+     * 加载面数据
+     * @param {*} ret
+     */
+    loadDataPol(ret)
+    {
+      if (ret[0].surface)
+      {
+        let pol = JSON.parse(ret[0].surface)
+        this.polsByDataBase = pol
+        this.tool.addVector(pol, 3, false, true)
+        this.tool.addLabel(pol)
+      }
+    },
+
+    async loadUploadData(type)
+    {
+      let importData = await cx.svr.data.query(11, 10131,
+        {
+          args:
+          [
+            ['glmajor', '=', 11, 'and'],
+            ['glminor', '=', 10008, 'and'],
+            ['prj_id', '=', $g.checkedPrj.id, 'and'],
+            ['bz', 'in', type, 'and']
+          ],
+          geometry: 1
+        })
+      let ret = importData.filter(i => type.includes(i.bz))
+      if (ret[0])
+      {
+        const pnt = ret.filter(i => i.geom.type === 'Point')
+        const line = ret.filter(i => i.geom.type === 'LineString')
+        const pol = ret.filter(i => ['Polygon', 'MultiPolygon'].includes(i.geom.type))
+        pnt.length && this.loadImportPnt(pnt)
+        line.length && this.loadImportLine(line)
+        pol.length && this.loadImportPol(pol)
+      }
+    },
+
+    clearVector()
+    {
+      this.tool.clear()
+    },
+
+    /**
+     * 坐标定位i
+     * @param {*} obj { lng: 113, lat: 33, alt: 10000 }
+     */
+    locatePos(obj)
+    {
+      this.tool.addVector([{ lng: obj.lng, lat: obj.lat }], 1, true, false)
+      this.tool.flyToPos(obj)
+    },
+
+    /**
+     * 地名定位i
+     * @param {*} obj {centery: 24.49571499 centerx: 98.8355523187, name: '龙陵县', …}
+     */
+    locateArea(obj)
+    {
+      let coors = obj.geom.coordinates[0][0]
+      let jwd = ''
+      coors.forEach(i =>
+      {
+        jwd += i.join(',') + ';'
+      })
+      this.tool.addVector([{ jwd }], 2, true, true)
+      this.tool.addLabel([{ lng: obj.centerx, lat: obj.centery, label: obj.name }])
+    },
+
+    /**
+     * 坐标转换
+     * @param {*} coor           坐标数组 [a, b]
+     * @param {*} bool           true： 4326坐标系转其他坐标系    false: 其他坐标系转4326坐标系
+     * @returns                  转换后的坐标 [c, d]
+     */
+    transformCoor(coor, bool)
+    {
+      if (!$g.checkedPrj.epsg) return coor
+      let val = $g.checkedPrj.epsg
+      if (bool)
+        return window.proj4('EPSG:4326', `EPSG:${val}`, coor)
+      return window.proj4(`EPSG:${val}`, 'EPSG:4326', coor)
+    },
+
+    /**
+     * 鼠标移动事件
+     * @param {} handler 句柄
+     */
+    initMouseMove(handler)
+    {
+      handler.setInputAction(e =>
+      {
+        if (e.startPosition && e.startPosition.x)
+        // 获取当前鼠标位置
+        {
+          const cartesian = this.Viewer.camera.pickEllipsoid(e.endPosition)
+          if (cartesian)
+          {
+            const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+            // 弧度转为角度（经纬度）
+            const lon = Cesium.Math.toDegrees(cartographic.longitude)
+            const lon1 = this.tool.decimalToDMS(lon)
+            const lat = Cesium.Math.toDegrees(cartographic.latitude)
+            const lat1 = this.tool.decimalToDMS(lat)
+            const coor = this.transformCoor([lon, lat], true)
+            const arr = document.getElementsByClassName('mouse-location')[0].innerHTML.split('\n')
+            document.getElementsByClassName('mouse-location')[0].innerHTML = '\n <span>经度：' + lon.toFixed(2) + '(' + lon1 + ')' + '</span>\n <span>纬度：' + lat.toFixed(2) + '(' + lat1 + ')' + '</span>\n' + '</br>\n     <span>X：' + coor[0].toFixed(2) + '</span>\n      <span>Y：' + coor[1].toFixed(2) + '</span>\n' + arr.at(-1)
+          }
+        }
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+    },
+
+    /**
+     * 删除临时绘制的要素
+     */
+    removeTempVector()
+    {
+      // 先删除临时记录，避免混淆
+      window.Viewer.layers.getLayers()[0].getOverlays().filter(i => i.att.mark === 'temp').forEach(j =>
+      {
+        window.Viewer.layers.getLayers()[0].removeOverlay(j)
+      })
+    },
+
+    // 数据预览定位
+    async locateLoadUploadData(ret, type)
+    {
+      if (ret[0])
+      {
+        const pnt = ret.filter(i => i.geom.type === 'Point')
+        const line = ret.filter(i => i.geom.type === 'LineString')
+        const pol = ret.filter(i => ['Polygon', 'MultiPolygon'].includes(i.geom.type))
+        pnt.length && this.loadImportPnt(pnt)
+        line.length && this.loadImportLine(line)
+        pol.length && this.loadImportPol(pol)
+      }
+    }
+  }
+}