代码更新

surprise

2024-05-09 e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf

 src/views/Tools/AddOnlineMap.vue

@@ -1,92 +1,53 @@
<template>
  <Popup
    ref="pop"
    :title="title"
    @close="close(true)"
    width="400px"
    @yes="addData"
    @cancel="close(false)"
  >
  <Popup ref="pop"
         :title="title"
         @close="close(true)"
         width="400px"
         @yes="addData"
         @cancel="close(false)">

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

      <div
        class="boxCard"
        v-for="(item,index) in mapList"
      >
      <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 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>
              <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 :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">
              <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>
                  </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>
@@ -97,16 +58,16 @@
import TileLayer from "ol/layer/Tile"
import XYZ from "ol/source/XYZ"
// 影像图层

import mapLayers from "./layer";
export default {
  name: "AddOnlineMap",
  components: {
    Popup,
  },
  mixins: [],
  data() {
  data () {
    return {
      title: "在线地图",
      title: "3D在线地图",
      left: undefined,
      tokne: "",
      data: {
@@ -120,251 +81,127 @@
        zIndex: undefined,
      },
      mapCollection: undefined,
      mapList: [{
        name: "Cesium",
        sourceType: "cesium",
        tokne: "94a34772eb88317fcbf8428e10448561",
        maximumLevel: 18,
        id: 1,
        isShow: true,
        list: [{
          name: "Cesium影像",
          image: require("../../assets/img/imageLayer/tdmap_image.jpg"),
          urls: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        },],
      },

      {
        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}",
          },

        ],
      }, {
        name: '本地服务',
        sourceType: 'localmap',
        maximumLevel: 22,
        id: 3,
        isShow: true,
        list: [
          {
            name: "地图",
            image: require("../../assets/img/imageLayer/gdmap_map.jpg"),
            urls: "http://{host}/LFData/2d/tiles/vec/{z}/{x}/{y}.png",
          },
          {
            name: "影像",
            image: require("../../assets/img/imageLayer/gdmap_image.jpg"),
            urls: "http://{host}/LFData/2d/tiles/img/{z}/{x}/{y}.png",
          },
          {
            name: "地形",
            image: require("../../assets/img/imageLayer/dixing.png"),
            urls: "http://{host}/LFData/2d/tiles/ter/{z}/{x}/{y}.png",
          },
          {
            name: "1:20万区域地质图",
            image: require("../../assets/img/imageLayer/25dizhi.png"),
            urls: "http://{host}/LFData/2d/tiles/20w_qydz/{z}/{x}/{y}.png",
          },
        ],
      }

      ],
      mapList: mapLayers,
    };
  },
  computed: {
    activeNames() {
    activeNames () {
      return this.mapList.map((item) => {
        return item.name;
      });
    },
  },
  methods: {
    setCardChange(res) {
      res.isShow = !res.isShow
    setCardChange (res) {
      res.isShow=!res.isShow
    },
    // 关闭弹窗
    close(isCloseBtn, removeLayer = true) {
    close (isCloseBtn,removeLayer=true) {
      //   removeLayer && this.removeImageLayer();

      // 重置data值
      Object.assign(this.$data, this.$options.data());
      !isCloseBtn && this.$refs.pop.close();
      Object.assign(this.$data,this.$options.data());
      !isCloseBtn&&this.$refs.pop.close();
    },
    // 打开弹窗
    open() {
    open () {
      this.close(true);
      this.$refs.pop.open();

    },
    changeToken(token) {
      this.mapCollection.tokne = token;
    changeToken (token) {
      this.mapCollection.tokne=token;
    },
    removeImageLayer() {
    removeImageLayer () {
      //   window.BaseMapLayer && window.BaseMapLayer.deleteObject();
      //   window.BaseMapLayer = undefined;
      window.Viewer.imageryLayers.remove(
        window.BaseMapLayer
      );
      window.map.removeLayer(window.olBaseMapLayer);
      if (!is_production) {
        if (window.vectorLayer) {
          window.map.removeLayer(window.vectorLayer);
        }
      }
    },
    addImageLayer(map, mapCollection) {

      if (
        this.data.name === map.name &&
        (this.data.urls === map.urls || this.data.urls === mapCollection.urls)
    },
    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 === "cesium") {
        window.olBaseMapLayer = new TileLayer({
          title: "高德地图",
          source: new XYZ({
            url: map.urls,
            wrapX: false
          }),
          zIndex: -1
        });
        window.map.addLayer(window.olBaseMapLayer);
        return;
      } else if (mapCollection.sourceType === "tdmap") {
      this.mapCollection=mapCollection;
      if(mapCollection.sourceType==="cesium") {

        var tokne = mapCollection.tokne;
        return;
      } else if(mapCollection.sourceType==="tdmap") {

        var tokne=mapCollection.tokne;
        //添加天地图影像

        window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
          url: map.urls + 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") {
      } else if(mapCollection.sourceType==="gdmap") {

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

        window.olBaseMapLayer = new TileLayer({
          title: "高德地图",
          source: new XYZ({
            url: map.urls,
            wrapX: false
          }),
          zIndex: -1
        });
        window.map.addLayer(window.olBaseMapLayer);
      } else if (mapCollection.sourceType === "localmap") {
        var ulr = map.urls;
        ulr = ulr.replace("{host}", iisHost)

        window.BaseMapLayer = Viewer.imageryLayers.addImageryProvider(
      } else if(mapCollection.sourceType==="localmap") {
        var ulr=map.urls;
        console.log(iisHost)
        ulr=ulr.replace("{host}",iisHost)

        window.BaseMapLayer=Viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
            url: ulr,
            maximumLevel: 22,
          })
        );

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

      }
      Viewer.imageryLayers.lowerToBottom(window.BaseMapLayer);//将图层移到最底层
      Viewer.imageryLayers.raise(window.BaseMapLayer);//将图层移到最底层

      Viewer.imageryLayers.raise(window.BaseMapLayer);//将图层上移一层
      if(is_production) {
        Viewer.imageryLayers.raise(window.BaseMapLayer);//将图层上移一层
      }
    },
    // 添加数据
    addData() {
      if (this.data.urls && this.data.sourceType) {
        let data = {
    addData () {
      if(this.data.urls&&this.data.sourceType) {
        let data={
          id: window.sgworld.Core.getuid(),
          ...this.data,
          Level: [0, 26],
          Level: [0,26],
        };
        if (data.sourceType === "tdmap") {
          data.urls += "&tk=" + this.tokne;
        } else if (data.sourceType === "bdmap") {
          data.style = this.mapCollection.style;
        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;
        if(this.mapCollection.GCJ02) {
          data.GCJ02=true;
        }

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

        this.$emit("success", data);
        this.close(false, false);
        this.$emit("success",data);
        this.close(false,false);
      } else {
        this.$message("请选择地图");
      }
@@ -377,6 +214,7 @@
/deep/.el-card__body {
  padding: 0px !important;
}

.map {
  display: inline-block;
  cursor: pointer;
@@ -388,6 +226,7 @@
    border-radius: 4px;
  }
}

.boxCard {
  margin-bottom: 5px;
}