底图切换

Surpriseplus

2023-03-17 9468898e83478c60165b987350f35edb6d1c77f8

底图切换

 src/assets/img/imageLayer/arcgis_image.png

 src/assets/img/imageLayer/arcgis_map.png

 src/assets/img/imageLayer/baidu_dark.jpg

 src/assets/img/imageLayer/baidu_gdh.jpg

 src/assets/img/imageLayer/baidu_jj.jpg

 src/assets/img/imageLayer/baidu_map.jpg

 src/assets/img/imageLayer/baidu_pink.jpg

 src/assets/img/imageLayer/baidu_qbj.jpg

 src/assets/img/imageLayer/baidu_qcl.jpg

 src/assets/img/imageLayer/baidu_qxl.jpg

 src/assets/img/imageLayer/baidu_red.jpg

 src/assets/img/imageLayer/baidu_wyl.jpg

 src/assets/img/imageLayer/baidu_zrl.jpg

 src/assets/img/imageLayer/gdmap_image.jpg

 src/assets/img/imageLayer/gdmap_label.jpg

 src/assets/img/imageLayer/gdmap_map.jpg

 src/assets/img/imageLayer/geoq_cs.png

 src/assets/img/imageLayer/geoq_dark.png

 src/assets/img/imageLayer/geoq_hs.png

 src/assets/img/imageLayer/geoq_ns.png

 src/assets/img/imageLayer/geoq_sx.png

 src/assets/img/imageLayer/geoq_xzqh.png

 src/assets/img/imageLayer/geoq_yw.png

 src/assets/img/imageLayer/tdmap_image.jpg

 src/assets/img/imageLayer/tdmap_label.jpg

 src/assets/img/imageLayer/tdmap_map.jpg

 src/assets/img/imageLayer/txmap_dark.png

 src/assets/img/imageLayer/txmap_image.png

 src/assets/img/imageLayer/txmap_label.png

 src/assets/img/imageLayer/txmap_map.png

 src/assets/img/imageLayer/txmap_tm.png

 src/components/MapDiv.vue

@@ -23,20 +23,25 @@
    >
      <mapol></mapol>
    </div>
    <add-online-map ref="addOnlineMap" />
  </div>
</template>

<script>

import mapsdk from "./mapsdk"
import mapol from "./mapol"
import { transform } from "ol/proj"
import ol from "ol"
import $ from "jquery"
import AddOnlineMap from '../views/Tools/AddOnlineMap.vue'
export default {
  name: "",

  components: {
    mapsdk,
    mapol,
    AddOnlineMap
  },
  data() {
    return {
@@ -222,8 +227,17 @@
      }
      return this.levelArray[this.levelArray.length - 1]
    },
    showBaseMapLayer() {
      this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.open("地下模式", null);
    }
  },
  mounted() {
    this.$bus.$on("setChangeBaseMapLayer", (res) => {
      this.showBaseMapLayer()


    })
    // 
    this.$bus.$on("changemap", e => {
      if (this.isSplitFlag == 1) {
        this.changeMap(3)

 src/components/mapol.vue

@@ -95,24 +95,24 @@
  methods: {

    init2DMap() {
      var 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}",
        }),
      })
      var 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}",
        }),
      })
      // var 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}",
      //   }),
      // })
      // var 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.map = new Map({
        target: "mapol",
        layers: [imageLayer, vectorLayer],
        layers: [],
        view: new View({
          center: [105.02, 34.9],
          zoom: 4,
          projection: "EPSG:4326",
          minZoom: 4,
          minZoom: 5,
        }),
        controls: defaultControls().extend([
          new FullScreen(),
@@ -120,6 +120,20 @@
        ]),
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      })

      window.olBaseMapLayer = new TileLayer({
        title: "高德地图",
        source: new XYZ({
          url: gaoDeBaseUrl[1].url,
          wrapX: false
        })
      });
      window.map.addLayer(window.olBaseMapLayer);





      // var scaleLine = new  ScaleLine({
      //   units: "metric"
      // });
@@ -148,9 +162,10 @@
    },

    changeMenulayer() {
      this.isActive = !this.isActive
      this.isMenuLayer = !this.isMenuLayer
      this.setLayerVisible()
      this.$bus.$emit("setChangeBaseMapLayer", true)
      // this.isActive = !this.isActive
      // this.isMenuLayer = !this.isMenuLayer
      // this.setLayerVisible()
    },
    setLayerVisible() {
      if (this.isActive == true) {

 src/components/mapsdk.vue

@@ -575,6 +575,7 @@
      <!--          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"-->
      <!--        ></div>-->
      <!--      </div>-->

    </div>
  </div>
</template>
@@ -583,6 +584,7 @@
import $ from "jquery";
import mapMenuTop from "./MapView/mapMenuTop.vue";
import mapSpaceTop from "./MapView/mapSpaceTop.vue";

import {
  select_Comprehensive_ByPageAndCount,
  select_Comprehensive_SelectWktById,
@@ -596,6 +598,7 @@
  components: {
    mapMenuTop,
    mapSpaceTop,

  },
  data() {
    var validatePosition = (rule, value, callback) => {
@@ -801,35 +804,12 @@
      Viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(110, 33, 8000000),
      });
      this.layer1 = Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[0].url,
        })
      );

      this.layer2 = Viewer.imageryLayers.addImageryProvider(
      window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[1].url,
        })
      );
      // this.layer3 = Viewer.imageryLayers.addImageryProvider(
      //   new Cesium.UrlTemplateImageryProvider({
      //     url: gaoDeBaseUrl[2].url,
      //   })
      // );

      // window.ImageLayer3 = this.layer3;

      // for (var i in gaoDeBaseUrl) {
      //   sgworld.Creator.createUrlTemplateImageryProvider(
      //     gaoDeBaseUrl[i].label,
      //     gaoDeBaseUrl[i].url,
      //     '0',
      //     undefined,
      //     true,
      //     ''
      //   );
      // }

      Viewer._enableInfoOrSelection = false;
      //显示fps
@@ -841,24 +821,7 @@
      //开启深度检测
      // sgworld.Analysis.depthTestAgainstTerrain(true)
      Viewer.scene.globe.depthTestAgainstTerrain = true;
      //影像对比设置
      // var base = {
      //   url: 'https://a.tile.openstreetmap.org/',
      // };
      // window.openStreetMap = sgworld.Creator.createImageryProvider(
      //   'OpenStreetMap',
      //   'OpenStreetMap',
      //   base,
      //   '0',
      //   undefined,
      //   true,
      //   ''
      // );
      // openStreetMap.item.show = false;

      // Viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
      //   url: demLayer,
      // })
      var option = {
        url: window.sceneConfig.SGUrl,
        layerName: window.sceneConfig.mptName,
@@ -869,21 +832,15 @@
      window.elevationTool = new SmartEarth.ElevationTool(window.sgworld);
      elevationTool.setContourColor("#F1D487");

      // var helper = new Cesium.EventHelper();
      // helper.add(Viewer.scene.globe.tileLoadProgressEvent, function (e) {

      //   if (e == 0) {
      //     console.log("这个是加载最后一个矢量切片的回调");
      //   }
      //   helper.removeAll();
      //   helper = undefined;
      // });
    },

    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
      this.$bus.$emit("setChangeBaseMapLayer", true)
      // this.$refs && this.$refs.addOnlineMap && this.$refs.addOnlineMap.open("地下模式", null,);
      // this.isActive = !this.isActive;
      // this.isMenuLayer = !this.isMenuLayer;
      // this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {

 src/views/Tools/AddOnlineMap.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,320 @@
<template>
  <Popup
    ref="pop"
    :title="title"
    @close="close(true)"
    width="400px"
    @yes="addData"
    @cancel="close(false)"
  >

    <div
      id="archTopBox"
      class="archTopBox"
    >

      <div
        class="boxCard"
        v-for="(item,index) in mapList"
      >
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span style="font-size:14px">{{item.name}}</span>
            <div style="float: right; padding: 3px 0">
              <i
                v-show="!item.isShow"
                style="margin-left:10px"
                class="el-icon-arrow-up"
                :title="$t('archiveObj.fold')"
                @click="setCardChange(item)"
              ></i>
              <i
                v-show="item.isShow"
                style="margin-left:10px"
                class="el-icon-arrow-down"
                :title="$t('archiveObj.develop')"
                @click="setCardChange(item)"
              ></i>
            </div>
          </div>
          <div
            :id="item.id"
            style="margin:5px 1px"
            v-show="!item.isShow"
          >
            <div style="margin:10px;width:380px">
              <div
                class="map"
                v-for="(map, mapIndex) in item.list"
                @click="addImageLayer(map, item)"
              >
                <img
                  style="width: 60px; height: 60px"
                  :src="map.image"
                ></img>
                <div> <el-link :underline="false">
                    {{ map.name }}
                  </el-link></div>
              </div>
            </div>
          </div>
        </el-card>

      </div>

      <!-- <el-collapse :value="activeNames">
          <el-collapse-item
            v-for="(mapCollection, index) in mapList"
            :title="mapCollection.name"
            :name="mapCollection.name"
            :key="index"
          >
            <div
              class="map"
              v-for="(map, mapIndex) in mapCollection.list"
              :key="mapIndex"
              @click="addImageLayer(map, mapCollection)"
            >
              <el-image
                style="width: 60px; height: 60px"
                :src="require(`@assets/imageLayer/${map.image}`)"
                fit="fill"
              ></el-image>  
        <span>{{ map.name }}</span>
      </div>
      </el-collapse-item>
      </el-collapse> -->
    </div>
    </el-form>
  </Popup>
</template>

<script>
import Popup from "./Popup";
import TileLayer from "ol/layer/Tile"
import XYZ from "ol/source/XYZ"
// å½±åƒå›¾å±‚

export default {
  name: "AddOnlineMap",
  components: {
    Popup,
  },
  mixins: [],
  data() {
    return {
      title: "在线地图",
      left: undefined,
      tokne: "",
      data: {
        id: "",
        sourceType: "",
        name: "",
        urls: "",
        layer: "",
        alpha: 1,
        maximumLevel: 26,
        zIndex: undefined,
      },
      mapCollection: undefined,
      mapList: [
        {
          name: "天地图",
          sourceType: "tdmap",
          tokne: "94a34772eb88317fcbf8428e10448561",
          maximumLevel: 18,
          id: 1,
          isShow: true,
          list: [
            {
              name: "天地图地图",
              image: require("../../assets/img/imageLayer/tdmap_map.jpg"),
              urls: "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=",
              olUrls: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk='
            },
            {
              name: "天地图影像",
              image: require("../../assets/img/imageLayer/tdmap_image.jpg"),
              urls: "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=",
              olUrls: 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='
            },
            {
              name: "天地图地形",
              image: require("../../assets/img/imageLayer/tdmap_label.jpg"),
              urls: "http://t0.tianditu.com/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=",
              olUrls: 'http://t0.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk='
            },
          ],
        },
        {
          name: "高德地图",
          sourceType: "gdmap",
          maximumLevel: 18,
          id: 2,
          isShow: true,
          list: [
            {
              name: "高德地图",
              image: require("../../assets/img/imageLayer/gdmap_map.jpg"),
              urls: "https://webst02.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
            },
            {
              name: "高德影像",
              image: require("../../assets/img/imageLayer/gdmap_image.jpg"),
              urls: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            },

          ],
        },

      ],
    };
  },
  computed: {
    activeNames() {
      return this.mapList.map((item) => {
        return item.name;
      });
    },
  },
  methods: {
    setCardChange(res) {
      res.isShow = !res.isShow
    },
    // å…³é—­å¼¹çª—
    close(isCloseBtn, removeLayer = true) {
      //   removeLayer && this.removeImageLayer();

      // é‡ç½®data值
      Object.assign(this.$data, this.$options.data());
      !isCloseBtn && this.$refs.pop.close();
    },
    // æ‰“开弹窗
    open() {
      this.close(true);
      this.$refs.pop.open();
    },
    changeToken(token) {
      this.mapCollection.tokne = token;
    },
    removeImageLayer() {
      //   window.BaseMapLayer && window.BaseMapLayer.deleteObject();
      //   window.BaseMapLayer = undefined;
      window.Viewer.imageryLayers.remove(
        window.BaseMapLayer
      );
      window.map.removeLayer(window.olBaseMapLayer);
    },
    addImageLayer(map, mapCollection) {

      if (
        this.data.name === map.name &&
        (this.data.urls === map.urls || this.data.urls === mapCollection.urls)
      ) {
        return;
      }

      this.removeImageLayer();

      this.mapCollection = mapCollection;

      if (mapCollection.sourceType === "tdmap") {
        var tokne = mapCollection.tokne;
        //添加天地图影像

        window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
          url: map.urls + tokne,
          layer: "tdtImgLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
        }))
        window.olBaseMapLayer = new TileLayer({
          title: "高德地图",
          source: new XYZ({
            url: map.olUrls + tokne

          }),
          zIndex: -1
        });
        window.map.addLayer(window.olBaseMapLayer);
      } else if (mapCollection.sourceType === "gdmap") {

        window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
            url: map.urls,
            maximumLevel: this.data.maximumLevel,
          })
        );

        window.olBaseMapLayer = new TileLayer({
          title: "高德地图",
          source: new XYZ({
            url: map.urls,
            wrapX: false
          }),
          zIndex: -1
        });
        window.map.addLayer(window.olBaseMapLayer);
      }
      Viewer.imageryLayers.lowerToBottom(window.BaseMapLayer);//将图层移到最底层

      Viewer.imageryLayers.raise(window.BaseMapLayer);//将图层上移一层





    },
    // æ·»åŠ æ•°æ®
    addData() {
      if (this.data.urls && this.data.sourceType) {
        let data = {
          id: window.sgworld.Core.getuid(),
          ...this.data,
          Level: [0, 26],
        };
        if (data.sourceType === "tdmap") {
          data.urls += "&tk=" + this.tokne;
        } else if (data.sourceType === "bdmap") {
          data.style = this.mapCollection.style;
        }
        if (this.mapCollection.GCJ02) {
          data.GCJ02 = true;
        }

        data.item = window.BaseMapLayer;
        window.BaseMapLayer = undefined;

        this.$emit("success", data);
        this.close(false, false);
      } else {
        this.$message("请选择地图");
      }
    },
  },
};
</script>

<style scoped lang="less">
/deep/.el-card__body {
  padding: 0px !important;
}
.map {
  display: inline-block;
  cursor: pointer;
  margin: 5px;
  text-align: center;

  .el-image {
    border: 2px solid #fff;
    border-radius: 4px;
  }
}
.boxCard {
  margin-bottom: 5px;
}
</style>