管道基础大数据平台系统开发-【前端】-新系統界面
1
Surpriseplus
2022-11-29 271d931fc950745d37554528324cbc8a636d85c3
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: [
        "管道基础数据专题图",
        "用户使用情况专题图",
        "项目基本情况专题图",
        "项目进度管理专题图",
        "全球项目分布专题图",
        "全国管网分布专题图",
        "全国项目足迹专题图",
        '管道基础数据专题图',
        '用户使用情况专题图',
        '项目基本情况专题图',
        '项目进度管理专题图',
        '全球项目分布专题图',
        '全国管网分布专题图',
        '全国项目足迹专题图',
      ],
    };
  },
@@ -165,7 +165,7 @@
      }
    },
    close() {
      this.$emit("close", false);
      this.$emit('close', false);
    },
    changeFlag(res) {
      this.layerFlag = res;
@@ -179,21 +179,21 @@
    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}",
          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}",
          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",
        target: 'map',
        layers: [this.imageLayer, this.vectorLayer],
        view: new View({
          center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4,
          projection: "EPSG:3857",
          projection: 'EPSG:3857',
        }),
      });
      if (this.wmsLayer == null) {
@@ -210,25 +210,25 @@
      }
      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",
          url: gisServerUrl + '/wmsserver/' + value,
          crossOrigin: 'anonymous',
          //serverType: 'geoserver',
          params: {
            VERSION: "1.3.0",
            FORMAT: "image/png",
            LAYERS: "",
            srs: "EPSG:900913",
            VERSION: '1.3.0',
            FORMAT: 'image/png',
            LAYERS: '',
            srs: 'EPSG:900913',
            tiled: true,
            styles: "",
            styles: '',
          },
        }),
      });
@@ -315,7 +315,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 +337,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 +345,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;