管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2022-12-13 950c7bf191b173b45eedd08fd2d576bb093186ca
src/components/mapviewTwo.vue
@@ -157,12 +157,19 @@
    },
    setLayerVisible() {
      if (this.isActive == true) {
        this.vectorLayer.setVisible(true);
        this.imageLayer.setVisible(false);
        MapViewer.imageryLayers.get(2).show = true;
        MapViewer.imageryLayers.get(1).show = false;
      } else {
        this.vectorLayer.setVisible(false);
        this.imageLayer.setVisible(true);
        MapViewer.imageryLayers.get(2).show = false;
        MapViewer.imageryLayers.get(1).show = true;
      }
      // if (this.isActive == true) {
      //   this.vectorLayer.setVisible(true);
      //   this.imageLayer.setVisible(false);
      // } else {
      //   this.vectorLayer.setVisible(false);
      //   this.imageLayer.setVisible(true);
      // }
    },
    close() {
      this.$emit('close', false);
@@ -177,25 +184,68 @@
    },
    // 初始化地图
    initMap() {
      this.vectorLayer = new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
      // this.vectorLayer = new TileLayer({
      //   source: new XYZ({
      //     url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
      //   }),
      // });
      // this.imageLayer = new TileLayer({
      //   source: new XYZ({
      //     url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
      //   }),
      // });
      // this.map = new Map({
      //   target: 'map',
      //   layers: [this.imageLayer, this.vectorLayer],
      //   view: new View({
      //     center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
      //     zoom: 4,
      //     projection: 'EPSG:3857',
      //   }),
      // });
      //地图初始化
      window.SG = new SmartEarth.SGWorld('map', {
        licenseServer: window.sceneConfig.licenseServer,
      });
      this.imageLayer = new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
        }),
      window.MapViewer = window.SG._Viewer;
      //定位
      SG.Navigate.jumpTo({
        //跳转视角
        destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
      });
      this.map = new Map({
        target: 'map',
        layers: [this.imageLayer, this.vectorLayer],
        view: new View({
          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4,
          projection: 'EPSG:3857',
        }),
      });
      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );
      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtVecBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );
      MapViewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtAnnoLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
        })
      );
      if (this.wmsLayer == null) {
        this.getWmsLayerUrl(this.layerFlag);
      }
@@ -205,7 +255,7 @@
      this.isMenuLayer = false;
      this.setLayerVisible();
      if (this.wmsLayer != null) {
        this.map.removeLayer(this.wmsLayer);
        this.wmsLayer.deleteObject();
        this.wmsLayer = null;
      }
      var value;
@@ -216,23 +266,42 @@
      } else if (res == 5) {
        value = 'qqxm';
      }
      this.wmsLayer = new Image({
        source: new ImageWMS({
          ratio: 1,
          url: gisServerUrl + '/wmsserver/' + value,
          crossOrigin: 'anonymous',
          //serverType: 'geoserver',
          params: {
            VERSION: '1.3.0',
            FORMAT: 'image/png',
            LAYERS: '',
            srs: 'EPSG:900913',
            tiled: true,
            styles: '',
      var urls = gisServerUrl + '/wmsserver/' + value;
      console.log('hehe', urls);
      this.wmsLayer = SG.Creator.createImageryProvider(
        'gisserver',
        'wms',
        {
          url: urls,
          layers: '',
          parameters: {
            format: 'image/png',
            transparent: true,
          },
        }),
      });
      this.map.addLayer(this.wmsLayer);
        },
        '0',
        undefined,
        true,
        ''
      );
      //
      // this.wmsLayer = new Image({
      //   source: new ImageWMS({
      //     ratio: 1,
      //     url: gisServerUrl + '/wmsserver/' + value,
      //     crossOrigin: 'anonymous',
      //     //serverType: 'geoserver',
      //     params: {
      //       VERSION: '1.3.0',
      //       FORMAT: 'image/png',
      //       LAYERS: '',
      //       srs: 'EPSG:900913',
      //       tiled: true,
      //       styles: '',
      //     },
      //   }),
      // });
      // this.map.addLayer(this.wmsLayer);
    },
  },
  beforeDestroy() {},
@@ -250,7 +319,7 @@
.header_box {
  height: 40px;
  background: rgb(59, 77, 110);
  background: #454545;
  padding: 0 20px;
  display: flex;