管道基础大数据平台系统开发-【前端】-新系統界面
surprise
2023-11-29 97277a2c41d80bbf375f88a47e242f1b17602b2b
src/views/Tools/AddOnlineMap.vue
@@ -1,60 +1,23 @@
<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 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>
@@ -64,29 +27,6 @@
        </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,7 +37,7 @@
import TileLayer from "ol/layer/Tile"
import XYZ from "ol/source/XYZ"
// 影像图层
import mapLayers from "./layer";
export default {
  name: "AddOnlineMap",
  components: {
@@ -106,7 +46,7 @@
  mixins: [],
  data() {
    return {
      title: "在线地图",
      title: "3D在线地图",
      left: undefined,
      tokne: "",
      data: {
@@ -120,98 +60,7 @@
        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: {
@@ -237,6 +86,7 @@
    open() {
      this.close(true);
      this.$refs.pop.open();
    },
    changeToken(token) {
      this.mapCollection.tokne = token;
@@ -247,12 +97,7 @@
      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) {
@@ -267,15 +112,7 @@
      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") {
@@ -290,15 +127,7 @@
          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(
@@ -308,15 +137,7 @@
          })
        );
        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)
@@ -328,19 +149,14 @@
          })
        );
        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() {
@@ -376,6 +192,7 @@
/deep/.el-card__body {
  padding: 0px !important;
}
.map {
  display: inline-block;
  cursor: pointer;
@@ -387,6 +204,7 @@
    border-radius: 4px;
  }
}
.boxCard {
  margin-bottom: 5px;
}