综合展示分析

Surpriseplus

2022-12-13 950c7bf191b173b45eedd08fd2d576bb093186ca

 src/components/mapviewTwo.vue

@@ -51,41 +51,41 @@
</template>

<script>
import ImageWMS from "ol/source/ImageWMS";
import Map from "ol/Map";
import XYZ from "ol/source/XYZ";
import View from "ol/View";
import Image from "ol/layer/Image";
import TileLayer from "ol/layer/Tile";
import { transform } from "ol/proj";
import ImageWMS from 'ol/source/ImageWMS';
import Map from 'ol/Map';
import XYZ from 'ol/source/XYZ';
import View from 'ol/View';
import Image from 'ol/layer/Image';
import TileLayer from 'ol/layer/Tile';
import { transform } from 'ol/proj';
// import { Image as ImageLayer, Tile as TileLayer } from "ol/layer"
import echart11 from "./echart11.vue";
import echart12 from "./echart12.vue";
import echart13 from "./echart13.vue";
import echart14 from "./echart14.vue";
import echart15 from "./echart15.vue";
import echart16 from "./echart16.vue";
import echart21 from "./echart21.vue";
import echart22 from "./echart22.vue";
import echart23 from "./echart23.vue";
import echart24 from "./echart24.vue";
import echart25 from "./echart25.vue";
import echart26 from "./echart26.vue";
import echart31 from "./echart31.vue";
import echart32 from "./echart32.vue";
import echart33 from "./echart33.vue";
import echart34 from "./echart34.vue";
import echart35 from "./echart35.vue";
import echart36 from "./echart36.vue";
import echart41 from "./echart41.vue";
import echart42 from "./echart42.vue";
import echart43 from "./echart43.vue";
import echart44 from "./echart44.vue";
import echart45 from "./echart45.vue";
import echart46 from "./echart46.vue";
import echart11 from './echart11.vue';
import echart12 from './echart12.vue';
import echart13 from './echart13.vue';
import echart14 from './echart14.vue';
import echart15 from './echart15.vue';
import echart16 from './echart16.vue';
import echart21 from './echart21.vue';
import echart22 from './echart22.vue';
import echart23 from './echart23.vue';
import echart24 from './echart24.vue';
import echart25 from './echart25.vue';
import echart26 from './echart26.vue';
import echart31 from './echart31.vue';
import echart32 from './echart32.vue';
import echart33 from './echart33.vue';
import echart34 from './echart34.vue';
import echart35 from './echart35.vue';
import echart36 from './echart36.vue';
import echart41 from './echart41.vue';
import echart42 from './echart42.vue';
import echart43 from './echart43.vue';
import echart44 from './echart44.vue';
import echart45 from './echart45.vue';
import echart46 from './echart46.vue';
export default {
  name: "webmap",
  props: ["typeIndex"],
  name: 'webmap',
  props: ['typeIndex'],
  components: {
    echart11,
    echart12,
@@ -123,13 +123,13 @@
      isActive: true,
      isMenuLayer: false,
      title: [
        "管道基础数据专题图",
        "用户使用情况专题图",
        "项目基本情况专题图",
        "项目进度管理专题图",
        "全球项目分布专题图",
        "全国管网分布专题图",
        "全国项目足迹专题图",
        '管道基础数据专题图',
        '用户使用情况专题图',
        '项目基本情况专题图',
        '项目进度管理专题图',
        '全球项目分布专题图',
        '全国管网分布专题图',
        '全国项目足迹专题图',
      ],
    };
  },
@@ -157,15 +157,22 @@
    },
    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);
      this.$emit('close', false);
    },
    changeFlag(res) {
      this.layerFlag = res;
@@ -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,34 +255,53 @@
      this.isMenuLayer = false;
      this.setLayerVisible();
      if (this.wmsLayer != null) {
        this.map.removeLayer(this.wmsLayer);
        this.wmsLayer.deleteObject();
        this.wmsLayer = null;
      }
      var value;
      if (res == 3 || res == 4 || res == 7) {
        value = "xmzj";
        value = 'xmzj';
      } else if (res == 1 || res == 2 || res == 6) {
        value = "lfgd";
        value = 'lfgd';
      } else if (res == 5) {
        value = "qqxm";
        value = 'qqxm';
      }
      this.wmsLayer = new Image({
        source: new ImageWMS({
          ratio: 1,
          url: "http://192.168.20.39:9055/gisserver/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;

@@ -315,7 +384,7 @@
  box-shadow: 3px 3px 6px #666;
  border: 1px solid rgba(204, 204, 204, 0.76);
  border-radius: 5px;
   cursor: pointer;
  cursor: pointer;
}
.center1 {
  right: 1%;
@@ -337,7 +406,7 @@
.active {
  width: 100%;
  height: 100%;
  background: url("../assets/img/Layer/imgLayer2.png") no-repeat center;
  background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;
@@ -345,7 +414,7 @@
.menuLayer {
  width: 100%;
  height: 100%;
  background: url("../assets/img/Layer/imgLayer1.png") no-repeat center;
  background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;