更改引用方式

ZhAkps

2024-02-06 36d70ba5cf8508509ad8a57e4bf53bf955fddcbf

更改引用方式

 src/components/poplayer/history.vue

@@ -23,15 +23,15 @@

<script>
import mapType from "@/utils/maptype";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import * as olProj from "ol/proj";
import XYZ from "ol/source/XYZ";
// import { Map, View } from "ol";
// import Tile from "ol/layer/Tile";
// import WMTS from "ol/source/WMTS";
// import WMTSTileGrid from "ol/tilegrid/WMTS";
// import * as olProj from "ol/proj";
// import XYZ from "ol/source/XYZ";

let view = new View({
  center: olProj.fromLonLat([4.606512, 2.621472]),
let view = new ol.View({
  center: ol.proj.fromLonLat([4.606512, 2.621472]),
  zoom: 13,
  enableRotation: false,
});
@@ -43,14 +43,14 @@
  resolutions.push(topResolution / Math.pow(2, zoom));
  matrixIds[zoom] = zoom;
}
let LwSource = new Tile({
  source: new WMTS({
let LwSource = new ol.layer.Tile({
  source: new ol.source.WMTS({
    url: "https://skyzt.bda.gov.cn/service/ImageEngine/picdis/abc?user=jjjskfq&password=Jjjskfq@2022",
    layer: "Shiliang_Lw_2019",
    style: "",
    format: "image/png",
    // 投影坐标系
    tileGrid: new WMTSTileGrid({
    tileGrid: new ol.tilegrid.WMTS({
      extent: [371987.18334, 252920.58593, 624459.12036, 423400.07714],
      origin: [0, 688194],
      resolutions: resolutions,
@@ -80,7 +80,7 @@
  },
  mounted() {
    this.mapList = mapType;
    this.tileLayer1 = new Tile({
    this.tileLayer1 = new ol.layer.Tile({
      source: this.mapList.find((e) => e.id == this.locaMap1).value,
    });
    // this.tileLayer2 = new Tile({
@@ -90,7 +90,7 @@
  },
  methods: {
    initMap() {
      new Map({
      new ol.Map({
        target: "mapContainer",
        layers: [
          this.tileLayer1,

 src/components/sideMenu/layerTreePanel/layerTreePanel2.vue

@@ -69,19 +69,20 @@

import store from "@/utils/store2.js";
import axios from "axios";
import Vector from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Cluster from "ol/source/Cluster";
import Style from "ol/style/Style";
import Circle from "ol/style/Circle";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import Icon from "ol/style/Icon";
import VectorLayer from "ol/layer/Vector";

import ImageWMS from "ol/source/ImageWMS";
import Image from "ol/layer/Image";
import Vector from "ol/source/Vector";
// import GeoJSON from "ol/format/GeoJSON";
// import Cluster from "ol/source/Cluster";
// import Style from "ol/style/Style";
// import Circle from "ol/style/Circle";
// import Stroke from "ol/style/Stroke";
// import Fill from "ol/style/Fill";
// import Text from "ol/style/Text";
// import Icon from "ol/style/Icon";
// import VectorLayer from "ol/layer/Vector";

// import ImageWMS from "ol/source/ImageWMS";
// import Image from "ol/layer/Image";

export default {
  name: "LayerTreePanel",
@@ -1017,8 +1018,8 @@
          //   ""
          // );
          debugger;
          var layer = new Image({
            source: new ImageWMS({
          var layer = new ol.layer.Image({
            source: new ol.source.ImageWMS({
              //不能设置为0，否则地图不展示。
              ratio: 1,
              url: "http://127.0.0.1:8080/geoserver/province/wms",
@@ -1868,8 +1869,8 @@
      });

      // 加载 GeoJSON 数据
      var vectorSource = new Vector({
        format: new GeoJSON(),
      var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url:
          treeNode.urls +
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -1877,7 +1878,7 @@
      });

      // 创建聚合层
      var clusterSource = new Cluster({
      var clusterSource = new ol.source.Cluster({
        distance: 40,
        source: vectorSource,
      });
@@ -1885,13 +1886,13 @@
      // 创建聚合显示样式
      var styleCache = {};
      if (treeNode.name == "路灯杆 ") {
        window.ldgclusterLayer = new VectorLayer({
        window.ldgclusterLayer = new ol.layer.Vector({
          source: clusterSource,
          style: function (feature) {
            var size = feature.get("features").length;
            if (size == 1) {
              return new Style({
                image: new Icon({
              return new ol.style.Style({
                image: new ol.style.Icon({
                  anchor: [0.5, 1],
                  src: treeNode.image,
                }),
@@ -1900,14 +1901,14 @@
            if (size > 1000) {
              var style = styleCache[size];
              if (!style) {
                style = new Style({
                  image: new Icon({
                style = new ol.style.Style({
                  image: new ol.style.Icon({
                    scale: 0.4,
                    src: require("@/assets/img/right/test01.png"),
                  }),
                  text: new Text({
                  text: new ol.style.Text({
                    text: size.toString(),
                    fill: new Fill({
                    fill: new ol.style.Fill({
                      color: "#fff",
                    }),
                  }),
@@ -1918,15 +1919,15 @@
            }
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
              style = new ol.style.Style({
                image: new ol.style.Icon({
                  // anchor: [0.5, 1],
                  scale: 0.3,
                  src: require("@/assets/img/right/jh.png"),
                }),
                text: new Text({
                text: new ol.style.Text({
                  text: size.toString(),
                  fill: new Fill({
                  fill: new ol.style.Fill({
                    color: "#fff",
                  }),
                }),
@@ -1939,13 +1940,13 @@

        window.map.addLayer(window.ldgclusterLayer);
      } else if (treeNode.name == "路名牌杆 ") {
        window.tldgclusterLayer = new VectorLayer({
        window.tldgclusterLayer = new  ol.layer.Vector({
          source: clusterSource,
          style: function (feature) {
            var size = feature.get("features").length;
            if (size == 1) {
              return new Style({
                image: new Icon({
              return new ol.style.Style({
                image: new ol.style.Icon({
                  anchor: [0.5, 1],
                  src: treeNode.image,
                }),
@@ -1954,14 +1955,14 @@
            if (size > 1000) {
              var style = styleCache[size];
              if (!style) {
                style = new Style({
                  image: new Icon({
                style = new ol.style.Style({
                  image: new ol.style.Icon({
                    scale: 0.4,
                    src: require("@/assets/img/right/test01.png"),
                  }),
                  text: new Text({
                  text: new ol.style.Text({
                    text: size.toString(),
                    fill: new Fill({
                    fill: new ol.style.Fill({
                      color: "#fff",
                    }),
                  }),
@@ -1972,15 +1973,15 @@
            }
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
              style = new ol.style.Style({
                image: new ol.style.Icon({
                  // anchor: [0.5, 1],
                  scale: 0.3,
                  src: require("@/assets/img/right/jh.png"),
                }),
                text: new Text({
                text: new ol.style.Text({
                  text: size.toString(),
                  fill: new Fill({
                  fill: new ol.style.Fill({
                    color: "#fff",
                  }),
                }),
@@ -2011,8 +2012,8 @@
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 加载 GeoJSON 数据
      var vectorSource = new Vector({
        format: new GeoJSON(),
      var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url:
          treeNode.urls +
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -2020,20 +2021,20 @@
      });

      // 创建聚合层
      var clusterSource = new Cluster({
      var clusterSource = new ol.source.Cluster({
        distance: 40,
        source: vectorSource,
      });

      // 创建聚合显示样式
      var styleCache = {};
      window.jkspclusterLayer = new VectorLayer({
      window.jkspclusterLayer = new  ol.layer.Vector({
        source: clusterSource,
        style: function (feature) {
          var size = feature.get("features").length;
          if (size == 1) {
            return new Style({
              image: new Icon({
            return new ol.style.Style({
              image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: "./static/SmartEarthSDK/Workers/image/xzspj/spjk.png",
              }),
@@ -2042,15 +2043,15 @@
          if (size > 1000) {
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
              style = new ol.style.Style({
                image: new ol.style.Icon({
                  // anchor: [0.5, 1],
                  scale: 0.4,
                  src: require("@/assets/img/right/test01.png"),
                }),
                text: new Text({
                text: new ol.style.Text({
                  text: size.toString(),
                  fill: new Fill({
                  fill: new ol.style.Fill({
                    color: "#fff",
                  }),
                }),
@@ -2061,15 +2062,15 @@
          }
          var style = styleCache[size];
          if (!style) {
            style = new Style({
              image: new Icon({
            style = new ol.style.Style({
              image: new ol.style.Icon({
                // anchor: [0.5, 1],
                scale: 0.3,
                src: require("@/assets/img/right/jh.png"),
              }),
              text: new Text({
              text: new ol.style.Text({
                text: size.toString(),
                fill: new Fill({
                fill: new ol.style.Fill({
                  color: "#fff",
                }),
              }),
@@ -2285,8 +2286,8 @@
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 加载 GeoJSON 数据
      var vectorSource = new Vector({
        format: new GeoJSON(),
      var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url:
          treeNode.urls +
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -2294,20 +2295,20 @@
      });

      // 创建聚合层
      var clusterSource = new Cluster({
      var clusterSource = new ol.source.Cluster({
        distance: 40,
        source: vectorSource,
      });

      // 创建聚合显示样式
      var styleCache = {};
      window.qiyeclusterLayer = new VectorLayer({
      window.qiyeclusterLayer = new  ol.layer.Vector({
        source: clusterSource,
        style: function (feature) {
          var size = feature.get("features").length;
          if (size == 1) {
            return new Style({
              image: new Icon({
            return new ol.style.Style({
              image: new ol.style.Icon({
                anchor: [0.5, 1],
                src: treeNode.image,
              }),
@@ -2316,15 +2317,15 @@
          if (size > 1000) {
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new Icon({
              style = new ol.style.Style({
                image: new ol.style.Icon({
                  // anchor: [0.5, 1],
                  scale: 0.4,
                  src: require("@/assets/img/right/test01.png"),
                }),
                text: new Text({
                text: new ol.style.Text({
                  text: size.toString(),
                  fill: new Fill({
                  fill: new ol.style.Fill({
                    color: "#fff",
                  }),
                }),
@@ -2335,15 +2336,15 @@
          }
          var style = styleCache[size];
          if (!style) {
            style = new Style({
              image: new Icon({
            style = new ol.style.Style({
              image: new ol.style.Icon({
                // anchor: [0.5, 1],
                scale: 0.3,
                src: require("@/assets/img/right/jh.png"),
              }),
              text: new Text({
              text: new ol.style.Text({
                text: size.toString(),
                fill: new Fill({
                fill: new ol.style.Fill({
                  color: "#fff",
                }),
              }),

 src/utils/maptype.JS

@@ -1,7 +1,7 @@
import XYZ from "ol/source/XYZ";

import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
// import WMTS from "ol/source/WMTS";
// import WMTSTileGrid from "ol/tilegrid/WMTS";

var topResolution = 896.0859375;
var resolutions = [];
@@ -14,7 +14,7 @@
let list = [
    {
        name: "2001",
        value: new XYZ({
        value: new ol.source.XYZ({
            url: "https://skyzt.bda.gov.cn/yzAdapter/Vector/?request=1&year=2001&type=Sate&level={z}&x={x}&y={y}",
        }),
        // value: new WMTS({