更换底图

shuishen

2023-02-16 89fce9c42cdc306d77589cac483c9fe335cf67cd

更换底图

 src/components/map/dcMap.vue

@@ -1,157 +1,168 @@
<template>
  <div>
    <div id="viewer-container" :style="{ height: isDetail ? '95vh' : '40vh', width: '100%' }"></div>
    <div style="position: absolute;right:45%;top:-1%;z-index: 999999">
      <p style="margin-top: 10px" v-if="!isDetail">
        <el-button type="primary" size="small" @click="draw('polygon')">绘制区域</el-button>
        <el-button size="small" @click="clearDraw">重置</el-button>
      </p>
    <div>
        <div id="viewer-container" :style="{ height: isDetail ? '95vh' : '40vh', width: '100%' }"></div>
        <div style="position: absolute;right:45%;top:-1%;z-index: 999999">
            <p style="margin-top: 10px" v-if="!isDetail">
                <el-button type="primary" size="small" @click="draw('polygon')">绘制区域</el-button>
                <el-button size="small" @click="clearDraw">重置</el-button>
            </p>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "dcMap",
  props:['isDetail','range'],
  data(){
    return{
      polygonLayer:null,
      polyLineLayer:null,
      polygon:null,
      polyLine:null,
      //绘制工具
      plotTool:null,
      coordinates:[]
    }
  },
  created() {
    name: "dcMap",
    props: ['isDetail', 'range'],
    data () {
        return {
            polygonLayer: null,
            polyLineLayer: null,
            polygon: null,
            polyLine: null,
            //绘制工具
            plotTool: null,
            coordinates: []
        }
    },
    created () {

  },
  mounted() {
    let self = this
    global.DC.ready(() => {
      initViewer()
    })

    function initViewer() {
      //配置viewer
      global.viewer = new global.DC.Viewer('viewer-container',{
        contextOptions: {
          webgl: {
            alpha: true,
            stencil: true,
            preserveDrawingBuffer: true
          }
        },
        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
    },
    mounted () {
        let self = this
        global.DC.ready(() => {
            initViewer()
        })
      )

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

      //添加图层
      self.polyLineLayer = new global.DC.VectorLayer('polyLineLayer')
      global.viewer.addLayer(self.polyLineLayer)
            //加载地图
            //   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
            //     })
            //   )

      self.plotTool = new global.DC.Plot(global.viewer)
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
                    layer: "wmts_4326_361100",
                    style: "default",
                    format: "image/png",
                    tileMatrixSetID: "c",
                    tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                })
            )

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

            //添加图层
            self.polyLineLayer = new global.DC.VectorLayer('polyLineLayer')
            global.viewer.addLayer(self.polyLineLayer)

            self.plotTool = new global.DC.Plot(global.viewer)

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

    if (this.isDetail){
      this.showPolyLine(this.range)
    }

  },
  methods:{
    //开始绘画
    draw(type){
      if (this.polygon){
        this.clearDraw()
      }

      this.plotTool && this.plotTool.draw(type,overlay => {
        if(overlay){
          this.polygonLayer.addOverlay(overlay)
          overlay.positions.forEach(e=>{
            this.coordinates.push([e.lng,e.lat])
          })
          let toData = this.doData(this.coordinates)
          this.$emit('toData', toData)
        if (this.isDetail) {
            this.showPolyLine(this.range)
        }
      })

    },
    //重置
    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 += ","
    methods: {
        //开始绘画
        draw (type) {
            if (this.polygon) {
                this.clearDraw()
            }

            this.plotTool && this.plotTool.draw(type, overlay => {
                if (overlay) {
                    this.polygonLayer.addOverlay(overlay)
                    overlay.positions.forEach(e => {
                        this.coordinates.push([e.lng, e.lat])
                    })
                    let toData = this.doData(this.coordinates)
                    this.$emit('toData', toData)
                }
            })
        },
        //重置
        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 + '\''
        },
        //回显多边形
        showPolygon (positions) {
            let viewer = global.viewer
            positions = positions.replaceAll(",", ";").replaceAll(" ", ",")
            this.polygon = new global.DC.Polygon(positions)
            this.polygon.setStyle({
                material: global.DC.Color.RED
            })
            this.polygonLayer.addOverlay(this.polygon)
            viewer.flyTo(this.polygonLayer)
        },
        //回显线
        showPolyLine (positions) {
            let viewer = global.viewer
            positions = positions.replaceAll(",", ";").replaceAll(" ", ",")
            this.polyLine = new global.DC.Polyline(positions)
            this.polyLine.setStyle({
                material: global.DC.Color.RED
            })
            this.polyLineLayer.addOverlay(this.polyLine)
            viewer.flyTo(this.polyLineLayer)
        }
      }
      str = str + "," + `${val[0][0]} ${val[0][1]}`
      str += ")"
      // console.log(str)
      return '\'' + str + '\''
    },
    //回显多边形
    showPolygon(positions){
      let viewer = global.viewer
      positions = positions.replaceAll(",",";").replaceAll(" ",",")
      this.polygon = new global.DC.Polygon(positions)
      this.polygon.setStyle({
        material: DC.Color.RED
      })
      this.polygonLayer.addOverlay(this.polygon)
      viewer.flyTo(this.polygonLayer)
    },
    //回显线
    showPolyLine(positions){
      let viewer = global.viewer
      positions = positions.replaceAll(",",";").replaceAll(" ",",")
      this.polyLine = new global.DC.Polyline(positions)
      this.polyLine.setStyle({
        material: DC.Color.RED
      })
      this.polyLineLayer.addOverlay(this.polyLine)
      viewer.flyTo(this.polyLineLayer)
    }
  }
}
</script>

<style scoped>

</style>

 src/components/map/dcSearchMap.vue

@@ -48,12 +48,24 @@
                })

                //加载地图
                // 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.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
                    new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                        url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
                        layer: "wmts_4326_361100",
                        style: "default",
                        format: "image/png",
                        tileMatrixSetID: "c",
                        tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
                        tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                    })
                )

@@ -75,7 +87,7 @@
                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                        //设置坐标为上饶市信州区
                      117.966460, 28.431002, 5000.0
                        117.966460, 28.431002, 5000.0
                    ),
                    orientation: {
                        // 指向
@@ -105,7 +117,7 @@
                    self.pointLayer.removeOverlay(self.currentPoint)
                    self.currentPoint = null
                }
                let point = new global.DC.Billboard(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat),'img/dwicon.jpeg')
                let point = new global.DC.Billboard(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat), 'img/dwicon.jpeg')
                // point.setStyle({
                //     pixelSize: 10,
                //     color: global.DC.Color.RED, //颜色
@@ -148,7 +160,7 @@
                pointArray = pointData[1].split(" ")

                let position = new global.DC.Position(pointArray[0], pointArray[1])
                let point = new global.DC.Billboard(position,'img/dwicon.jpeg')
                let point = new global.DC.Billboard(position, 'img/dwicon.jpeg')
                // point.setStyle({
                //     pixelSize: 10,
                //     color: global.DC.Color.RED, //颜色