更新

shuishen

2023-02-15 c3a857ffa767fa8a59c0c4814546d280f6bc9fea

更新

 package-lock.json

@@ -4694,6 +4694,15 @@
        "safer-buffer": "^2.1.0"
      }
    },
    "echarts": {
      "version": "5.4.1",
      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.1.tgz",
      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
      "requires": {
        "tslib": "2.3.0",
        "zrender": "5.4.1"
      }
    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -12728,6 +12737,11 @@
      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
      "dev": true
    },
    "tslib": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
    },
    "tty-browserify": {
      "version": "0.0.0",
      "resolved": "https://registry.npmmirror.com/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -14237,6 +14251,14 @@
          "dev": true
        }
      }
    },
    "zrender": {
      "version": "5.4.1",
      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.1.tgz",
      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
      "requires": {
        "tslib": "2.3.0"
      }
    }
  }
}

 src/components/map/dcSearchMap.vue

@@ -1,169 +1,168 @@
<template>
  <div>
    <div id="search-viewer-container" style="height: 100%; width: 100%"></div>
  </div>
    <div>
        <div id="search-viewer-container" style="height: 50vh; width: 100%"></div>
    </div>
</template>

<script>
export default {
  name: "dcSearchMap",
  props: ['isDetail','point'],
  data() {
    return {
      pointLayer: null,
      currentPoint:null,
      //绘制工具
      plotTool: null,
      coordinates: []
    }
  },
  created() {
    name: "dcSearchMap",
    props: ['isDetail', 'point'],
    data () {
        return {
            pointLayer: null,
            currentPoint: null,
            //绘制工具
            plotTool: null,
            coordinates: []
        }
    },
    created () {

  },
  mounted() {
    },
    mounted () {

  },
  methods: {
    init(){
      let self = this
      if (global.viewer != null) {
        global.viewer = null
      }

      global.DC.ready(() => {
        initViewer()
      })

      function initViewer() {
        //配置viewer
        global.viewer = new global.DC.Viewer('search-viewer-container', {
          contextOptions: {
            webgl: {
              alpha: true,
              stencil: true,
              preserveDrawingBuffer: true
    },
    methods: {
        init () {
            let self = this
            if (global.searchViewer != null) {
                global.searchViewer = null
            }
          },
          sceneMode: 2
        })

        //加载地图
        global.viewer.imageryLayers.addImageryProvider(
          new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            url: 'https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal',
            format: 'image/jpeg',
            show: true,
            maximumLevel: 18
          })
        )
            global.DC.ready(() => {
                initViewer()
            })

        //添加图层
        self.pointLayer = new global.DC.VectorLayer('polygonLayer')
        global.viewer.addLayer(self.pointLayer)
            function initViewer () {
                //配置viewer
                global.searchViewer = new global.DC.Viewer('search-viewer-container', {
                    contextOptions: {
                        webgl: {
                            alpha: true,
                            stencil: true,
                            preserveDrawingBuffer: true
                        }
                    },
                    sceneMode: 2
                })

        self.plotTool = new global.DC.Plot(global.viewer,{
          icon_center: "/img/dwicon.jpeg", // 自定义的中心点图标
          icon_anchor: "/img/dwicon.jpeg", //自定义的锚点图标
          icon_midAnchor: "/img/dwicon.jpeg", //自定义的中心锚点图标
          icon_size: [12, 12],//自定义的中心锚点大小
          clampToModel:false // 点位是否获取模型表面坐标
        })
                //加载地图
                global.searchViewer.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: 'https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal',
                        format: 'image/jpeg',
                        show: true,
                        maximumLevel: 18
                    })
                )

        //初始化定位
        global.viewer.camera.setView({
          // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
          // fromDegrees()方法，将经纬度和高程转换为世界坐标
          destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
            //设置坐标为上饶市
            117.951478782, 28.447896798, 1800.0
          ),
          orientation: {
            // 指向
            heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
            // 视角
            pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
            roll: 0.0
          }
        })
                //添加图层
                self.pointLayer = new global.DC.VectorLayer('polygonLayer')
                global.searchViewer.addLayer(self.pointLayer)

      }
                self.plotTool = new global.DC.Plot(global.searchViewer, {
                    icon_center: "/img/dwicon.jpeg", // 自定义的中心点图标
                    icon_anchor: "/img/dwicon.jpeg", //自定义的锚点图标
                    icon_midAnchor: "/img/dwicon.jpeg", //自定义的中心锚点图标
                    icon_size: [12, 12],//自定义的中心锚点大小
                    clampToModel: false // 点位是否获取模型表面坐标
                })

      this.showPoint(this.point)
                //初始化定位
                global.searchViewer.camera.setView({
                    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                        //设置坐标为上饶市
                        117.951478782, 28.447896798, 1800.0
                    ),
                    orientation: {
                        // 指向
                        heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                        // 视角
                        pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                        roll: 0.0
                    }
                })

      this.draw()
            }

    },
    //开始绘画
    draw() {
      const self = this
      if (this.polygon) {
        this.clearDraw()
      }
      //鼠标左键事件
      let leftClick = function (event) {
        if (self.currentPoint){
          self.pointLayer.removeOverlay(self.currentPoint)
          self.currentPoint = null
        }
        let point = new global.DC.Point(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat))
        point.setStyle({
          pixelSize: 10,
          color: global.DC.Color.RED, //颜色
          outlineColor: global.DC.Color.WHITE, //边框颜色
          outlineWidth: 2, //边框大小，
        })
        self.currentPoint = point
        self.pointLayer.addOverlay(point)
        let pointLonLat = [event.wgs84SurfacePosition.lng,event.wgs84SurfacePosition.lat]
        self.$emit("getMapData", pointLonLat)
      }
      //添加鼠标左键事件
      global.viewer.on(global.DC.MouseEventType.LEFT_DOWN,leftClick)
    },
    //重置
    clearDraw() {
      this.polygonLayer.clear()
    },
    //转换成数据库数据
    doData(val) {
      let str = "LINESTRING("
      for (let k = 0; k < val.length; k++) {
        str += `${val[k][0]} ${val[k][1]}`
        if (k != val.length - 1) {
          str += ","
        }
      }
      str = str + "," + `${val[0][0]} ${val[0][1]}`
      str += ")"
      // console.log(str)
      return '\'' + str + '\''
    },
    //回显点
    showPoint(positions) {
      let viewer = global.viewer
      if (positions){
        let pointData = ""
        let pointArray = []
        pointData = positions.match(/\(([^)]*)\)/)
        pointArray = pointData[1].split(" ")
            this.showPoint(this.point)

        let position = new global.DC.Position(pointArray[0],pointArray[1])
        let point = new global.DC.Point(position)
        point.setStyle({
          pixelSize: 10,
          color: global.DC.Color.RED, //颜色
          outlineColor: global.DC.Color.WHITE, //边框颜色
          outlineWidth: 2, //边框大小，
        })
        this.currentPoint = point
        this.pointLayer.addOverlay(point)
        viewer.flyTo(this.pointLayer)
      }
    },
  }
            this.draw()

        },
        //开始绘画
        draw () {
            const self = this
            if (this.polygon) {
                this.clearDraw()
            }
            //鼠标左键事件
            let leftClick = function (event) {
                if (self.currentPoint) {
                    self.pointLayer.removeOverlay(self.currentPoint)
                    self.currentPoint = null
                }
                let point = new global.DC.Point(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat))
                point.setStyle({
                    pixelSize: 10,
                    color: global.DC.Color.RED, //颜色
                    outlineColor: global.DC.Color.WHITE, //边框颜色
                    outlineWidth: 2, //边框大小，
                })
                self.currentPoint = point
                self.pointLayer.addOverlay(point)
                let pointLonLat = [event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat]
                self.$emit("getMapData", pointLonLat)
            }
            //添加鼠标左键事件
            global.searchViewer.on(global.DC.MouseEventType.LEFT_DOWN, leftClick)
        },
        //重置
        clearDraw () {
            this.polygonLayer.clear()
        },
        //转换成数据库数据
        doData (val) {
            let str = "LINESTRING("
            for (let k = 0; k < val.length; k++) {
                str += `${val[k][0]} ${val[k][1]}`
                if (k != val.length - 1) {
                    str += ","
                }
            }
            str = str + "," + `${val[0][0]} ${val[0][1]}`
            str += ")"
            // console.log(str)
            return '\'' + str + '\''
        },
        //回显点
        showPoint (positions) {
            let viewer = global.searchViewer
            if (positions) {
                let pointData = ""
                let pointArray = []
                pointData = positions.match(/\(([^)]*)\)/)
                pointArray = pointData[1].split(" ")

                let position = new global.DC.Position(pointArray[0], pointArray[1])
                let point = new global.DC.Point(position)
                point.setStyle({
                    pixelSize: 10,
                    color: global.DC.Color.RED, //颜色
                    outlineColor: global.DC.Color.WHITE, //边框颜色
                    outlineWidth: 2, //边框大小，
                })
                this.currentPoint = point
                this.pointLayer.addOverlay(point)
                viewer.flyTo(this.pointLayer)
            }
        },
    }
}
</script>

<style scoped>

</style>

 src/main.js

@@ -48,6 +48,7 @@

global.DC = DC // 将DC提升到全局变量，方便在工程中直接使用
global.viewer = null // 将viewer提升到全局变量，方便在工程中直接使用
global.searchViewer = null // 将viewer提升到全局变量，方便在工程中直接使用

global.echarts = echarts // 将DC提升到全局变量，方便在工程中直接使用