北京经济技术开发区经开区虚拟城市项目-【前端】-移动端Web
lixuliang
2024-03-13 065669d31914a2f65c48d351417f48e49bd79c0c
Merge branch 'master' of http://103.135.160.14:9034/r/PM20221203225_MobileWeb
已修改16个文件
258 ■■■■■ 文件已修改
package-lock.json 41 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package.json 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/img/right/test01.png 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/img/right/test02.png 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/img/right/test03.png 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/img/right/test04.png 补丁 | 查看 | 原始文档 | blame | 历史
src/components/leftMenu/sousuo2.vue 22 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/poplayer/history2.vue 20 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/rightMenu/bottom2.vue 44 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/rightNavigation/NavigationBar2.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/sideMenu/layerMenu/layerPanel2.vue 16 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/sideMenu/layerTreePanel/layerTreePanel2.vue 66 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/viewer2.vue 33 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/map2.js 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/tool.js 9 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/transform.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
package-lock.json
@@ -16,7 +16,8 @@
        "font-awesome": "^4.3.0",
        "jquery": "^3.3.1",
        "lodash": "^4.17.21",
        "ol": "^7.5.2",
        "ol": "^7.5.0",
        "ol-ext": "^4.0.10",
        "sass-loader": "^10.0.4",
        "three": "^0.103.0",
        "vcolorpicker": "^0.1.8",
@@ -5809,9 +5810,9 @@
      }
    },
    "node_modules/mapbox-to-css-font": {
      "version": "2.4.2",
      "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.2.tgz",
      "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA=="
      "version": "2.4.4",
      "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.4.tgz",
      "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ=="
    },
    "node_modules/math-expression-evaluator": {
      "version": "1.2.17",
@@ -6647,15 +6648,23 @@
      "dev": true
    },
    "node_modules/ol": {
      "version": "7.5.2",
      "resolved": "https://registry.npmmirror.com/ol/-/ol-7.5.2.tgz",
      "integrity": "sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==",
      "version": "7.5.0",
      "resolved": "https://registry.npmmirror.com/ol/-/ol-7.5.0.tgz",
      "integrity": "sha512-ENjuod3oIdAR3shCPKPmzoObb2wRfNtMSwhvYEA7kJ9RbZABzqPCsfJegSnZumJfd2Crk6Nw2u1p3IdX6g9RbQ==",
      "dependencies": {
        "earcut": "^2.2.3",
        "geotiff": "^2.0.7",
        "ol-mapbox-style": "^10.1.0",
        "pbf": "3.2.1",
        "rbush": "^3.0.1"
      }
    },
    "node_modules/ol-ext": {
      "version": "4.0.16",
      "resolved": "https://registry.npmmirror.com/ol-ext/-/ol-ext-4.0.16.tgz",
      "integrity": "sha512-UCeknmfiw+BtvcGghN7L6e1pWRkWIw5ysueIVncNyEtn76pcNTXbDc6f7+4Zqz/4ZVdEcVYM8gmDft+L5RJZ9w==",
      "peerDependencies": {
        "ol": ">= 5.3.0"
      }
    },
    "node_modules/ol-mapbox-style": {
@@ -18452,9 +18461,9 @@
      }
    },
    "mapbox-to-css-font": {
      "version": "2.4.2",
      "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.2.tgz",
      "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA=="
      "version": "2.4.4",
      "resolved": "https://registry.npmmirror.com/mapbox-to-css-font/-/mapbox-to-css-font-2.4.4.tgz",
      "integrity": "sha512-X1dtuTuH2D1MRMuductMZCLV/fy9EoIgqW/lmu8vQSAhEatx/tdFebkYT3TVhdTwqFDHbLEgQBD3IKA4KI7aoQ=="
    },
    "math-expression-evaluator": {
      "version": "1.2.17",
@@ -19156,9 +19165,9 @@
      "dev": true
    },
    "ol": {
      "version": "7.5.2",
      "resolved": "https://registry.npmmirror.com/ol/-/ol-7.5.2.tgz",
      "integrity": "sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==",
      "version": "7.5.0",
      "resolved": "https://registry.npmmirror.com/ol/-/ol-7.5.0.tgz",
      "integrity": "sha512-ENjuod3oIdAR3shCPKPmzoObb2wRfNtMSwhvYEA7kJ9RbZABzqPCsfJegSnZumJfd2Crk6Nw2u1p3IdX6g9RbQ==",
      "requires": {
        "earcut": "^2.2.3",
        "geotiff": "^2.0.7",
@@ -19167,6 +19176,12 @@
        "rbush": "^3.0.1"
      }
    },
    "ol-ext": {
      "version": "4.0.16",
      "resolved": "https://registry.npmmirror.com/ol-ext/-/ol-ext-4.0.16.tgz",
      "integrity": "sha512-UCeknmfiw+BtvcGghN7L6e1pWRkWIw5ysueIVncNyEtn76pcNTXbDc6f7+4Zqz/4ZVdEcVYM8gmDft+L5RJZ9w==",
      "requires": {}
    },
    "ol-mapbox-style": {
      "version": "10.7.0",
      "resolved": "https://registry.npmmirror.com/ol-mapbox-style/-/ol-mapbox-style-10.7.0.tgz",
package.json
@@ -18,7 +18,7 @@
    "font-awesome": "^4.3.0",
    "jquery": "^3.3.1",
    "lodash": "^4.17.21",
    "ol": "^7.4.0",
    "ol": "^7.5.0",
    "ol-ext": "^4.0.10",
    "sass-loader": "^10.0.4",
    "three": "^0.103.0",
src/assets/img/right/test01.png

src/assets/img/right/test02.png

src/assets/img/right/test03.png

src/assets/img/right/test04.png

src/components/leftMenu/sousuo2.vue
@@ -1,11 +1,11 @@
<template>
  <div id="sousuo" class="sousuo">
    <!-- 搜索框 -->
    <div class="ssk" v-show="ssk.show">
    <div class="ssk" v-if="ssk.show">
      <span
        @click="ssjmxs"
        style="float: left; height: 100%; width: 80%; overflow: hidden"
        ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
        ><i class="el-icon-search" style="padding: 0px 15px 0px 20px;font-size: 0.15rem;"></i
        >{{ syssval }}</span
      >
      <span
@@ -32,9 +32,9 @@
      </span> -->
    </div>
    <!-- 搜索界面 -->
    <div class="ssjm" v-show="ssjm">
    <div class="ssjm" v-if="ssjm">
      <!-- 搜索框 -->
      <div class="search-container" style="margin: 0.1rem 0">
      <div class="search-container">
        <div class="back" @click="cancless"></div>
        <el-input
          placeholder="输入关键字搜索地图"
@@ -98,7 +98,7 @@
  height: 0.4rem;
  line-height: 0.4rem;
  background: #fff;
  border-radius: 0.15rem;
  border-radius: 0.14rem;
  color: black;
  font-size: 0.14rem;
}
@@ -111,6 +111,7 @@
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f3f3f3;
  z-index: 99;
}
@@ -142,12 +143,14 @@
.el-input /deep/ .el-input__inner {
  border: none;
  font-weight: 500;
  font-size: 17px;
  font-size: 0.14rem;
  color: #3e3d3d;
}
.el-select {
  width: 80px;
  width: 0.8rem;
  position: relative;
  font-size: 0.14rem;
}
.el-select:after {
  content: "";
@@ -163,14 +166,11 @@
  padding-right: 25px;
}
.el-input /deep/ .el-input-group__append .el-button {
  font-size: 15px;
  font-size: 0.14rem;
  color: #ffffff;
  line-height: 17px;
  background: #2477ff;
  border-radius: 13px;
  padding: 10px;
  width: 62px;
  height: 33px;
}
.el-scrollbar .hover {
src/components/poplayer/history2.vue
@@ -39,7 +39,8 @@
  mounted() {
    store.setNavigatorShow(false);
    store.setMapToolShow(false);
    window.mapapi.getView().setCenter([4.606512, 2.621472]);
    // window.mapapi.getView().setCenter(ol.proj.fromLonLat([4.606512, 2.621472]));
    window.mapapi.getView().setCenter(ol.proj.fromLonLat([116.505348, 39.795592]));
    addHistoryLayer(this.currentValue);
    if (_GLOBAL.GPSMarker) {
      window.mapapi.removeLayer(_GLOBAL.GPSMarker);
@@ -53,7 +54,7 @@
    close() {
      store.setHistoryShow(false);
      window.mapapi.removeLayer(this.$global.historyLayer);
      window.mapapi.getView().setCenter([116.505348, 39.795592]);
      window.mapapi.getView().setCenter(ol.proj.fromLonLat([116.505348, 39.795592]));
      store.setNavigatorShow(true);
      store.setMapToolShow(true);
    },
@@ -68,7 +69,7 @@
}
.searchBtn {
  width: 51px;
  width: 0.4rem;
  /* height: 40px; */
}
@@ -77,7 +78,6 @@
  right: 10px;
  bottom: 18px;
  width: 48px;
  /* height: 594px; */
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21);
  border-radius: 13px;
@@ -88,10 +88,9 @@
}
.listBox li {
  font-weight: bold;
  font-size: 15px;
  font-size: 0.12rem;
  line-height: 0.25rem;
  color: #1c222f;
  /* height: 28px;
  line-height: 28px; */
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
}
@@ -104,12 +103,7 @@
  color: #127dff;
}
.mapLeft {
  float: left;
  position: absolute;
  width: 100vw;
  height: 100vh;
}
.listBox .active {
  /* background-color: #4590d7; */
src/components/rightMenu/bottom2.vue
@@ -10,7 +10,7 @@
        <img src="@/assets/img/collection/recover.png" />
      </div>
    </div>
    <div class="mapTool2" v-show="test.fwval">
    <div class="mapTool2">
      <div class="tool-rotate" @click="zoomIn" title="放大">
        <img src="@/assets/img/collection/add.png" />
      </div>
@@ -23,41 +23,45 @@
</template>
<style scoped>
.mapTool {
  width: 51px;
  width: 0.42rem;
  /* border-radius: 10px; */
  /* background: #ffffff; */
  /* margin-bottom: 8px; */
}
.mapTool .tool-rotate img {
  width: 100%;
}
.mapTool2 {
  width: 40px;
  height: 80px;
  margin: 0 auto;
  width: 0.32rem;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21);
  border-radius: 13px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  justify-content: center;
}
.mapTool2 .tool-rotate img {
  width: 18px;
}
.border {
  width: 36px;
  height: 1px;
  border: 1px solid #e5e5e5;
.mapTool2 .tool-rotate{
  height: 0.33rem;
  line-height: 0.33rem;
}
/* .tool-rotate {
  padding: 8px;
} */
.mapTool2 .tool-rotate img {
  width: 0.17rem;
}
.border {
  width: 100%;
  height: 1px;
  border: 0.005rem solid #f3f3f3;
}
</style>
<script>
import Bus from "../../js/bus.js";
import store from "@/utils/store2";
@@ -74,7 +78,7 @@
      },
    };
  },
  mounted() {},
  mounted() { },
  watch: {
    "state.show": {
      handler(newVal) {
@@ -121,7 +125,7 @@
    flyBack() {
      window.mapapi.getView().animate({
        // 只设置需要的属性即可
        center: [116.52217697339846, 39.75979421847914], // 中心点
        center: ol.proj.fromLonLat([116.52217697339846, 39.75979421847914]), // 中心点
        zoom: 12, // 缩放级别
        rotation: undefined, // 缩放完成view视图旋转弧度
        duration: 1000, // 缩放持续时间,默认不需要设置
src/components/rightNavigation/NavigationBar2.vue
@@ -232,7 +232,7 @@
}
.menuItem {
  width: 51px;
  width: 0.42rem;
  /* width: 32px;
  color: black;
  margin-top: 10px;
src/components/sideMenu/layerMenu/layerPanel2.vue
@@ -275,7 +275,7 @@
      clearAll();
      switch (result.name) {
        case "二维地图":
          // loadGeoMap();
          loadGeoMap();
          loadBaseMap();
          // addAnnotationLayer();
          addHxLayer();
@@ -443,7 +443,7 @@
                url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao",
                params: {
                  VERSION: "1.1.1",
                  SRS: "EPSG:4326",
                  SRS: "EPSG:3857",
                  FORMAT: "image/png",
                  TILED: true,
                  LAYERS: "",
@@ -588,23 +588,23 @@
  font-family: "微软雅黑";
  font-weight: 400;
  cursor: pointer;
  text-align: center;
}
.mapMode .layerItem {
  width: 91px;
  width: 0.8rem;
  margin-right: 24px;
}
.mapMode img {
  display: block;
  width: 91px;
  width: 100%;
  border-radius: 11px;
  border: 1px dashed #127dff;
  margin-bottom: 11px;
}
span {
  font-family: "微软雅黑";
  font-weight: 500;
  font-size: 15px;
  color: #212121;
  font-size: 0.12rem;
  color: #6e6969;
  line-height: 12px;
}
.mapMode .active,
@@ -642,7 +642,7 @@
  margin: 0 auto;
  /* background-color: green; */
  display: block;
  width: 53px;
  width: 0.5rem;
  border-radius: 11px;
  box-shadow: 0 0 5px 5px rgb(196 222 236 / 30%);
  margin-bottom: 11px;
src/components/sideMenu/layerTreePanel/layerTreePanel2.vue
@@ -1855,6 +1855,7 @@
        layer.item.baseLayer = true;
      }
    },
    // 市政杆体聚合
    initLdgCluster(treeNode) {
      if (treeNode.checked == false) {
        window.mapapi.removeLayer(window.ldgclusterLayer);
@@ -1940,7 +1941,7 @@
        window.mapapi.addLayer(window.ldgclusterLayer);
      } else if (treeNode.name == "路名牌杆 ") {
        window.tldgclusterLayer = new  ol.layer.Vector({
        window.tldgclusterLayer = new ol.layer.Vector({
          source: clusterSource,
          style: function (feature) {
            var size = feature.get("features").length;
@@ -1999,7 +2000,20 @@
      window.mapapi.removeLayer(window.jkspclusterLayer);
      window.mapapi.removeLayer(window.qiyeclusterLayer);
      loading.close();
      window.mapapi.getView().on("change:resolution", function (event) {
        if (
          window.mapapi.getView().getZoom() ==
          window.mapapi.getView().getMaxZoom()
        ) {
          console.log("max");
          clusterSource.setDistance(0);
        } else {
          clusterSource.setDistance(40);
        }
      });
    },
    // 视频监控聚合
    initCluster(treeNode) {
      if (treeNode.checked == false) {
        window.mapapi.removeLayer(window.jkspclusterLayer);
@@ -2028,7 +2042,7 @@
      // 创建聚合显示样式
      var styleCache = {};
      window.jkspclusterLayer = new  ol.layer.Vector({
      window.jkspclusterLayer = new ol.layer.Vector({
        source: clusterSource,
        style: function (feature) {
          var size = feature.get("features").length;
@@ -2087,6 +2101,18 @@
      window.mapapi.removeLayer(window.qiyeclusterLayer);
      window.mapapi.addLayer(window.jkspclusterLayer);
      loading.close();
      window.mapapi.getView().on("change:resolution", function (event) {
        if (
          window.mapapi.getView().getZoom() ==
          window.mapapi.getView().getMaxZoom()
        ) {
          console.log("max");
          clusterSource.setDistance(0);
        } else {
          clusterSource.setDistance(40);
        }
      });
      // new Cesium.GeoJsonDataSource.load(
      //   treeNode.urls +
      //     "?version=1.3.0&request=GetFeature&format=json&typename=" +
@@ -2274,7 +2300,7 @@
          // });
        });
    },
    //企业信息加载
    //企业信息聚合
    qiyeCluster(treeNode) {
      if (treeNode.checked == false) {
        window.mapapi.removeLayer(window.qiyeclusterLayer);
@@ -2294,7 +2320,6 @@
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
          treeNode.layer,
      });
      // 创建聚合层
      var clusterSource = new ol.source.Cluster({
@@ -2304,7 +2329,7 @@
      // 创建聚合显示样式
      var styleCache = {};
      window.qiyeclusterLayer = new  ol.layer.Vector({
      window.qiyeclusterLayer = new ol.layer.Vector({
        source: clusterSource,
        style: function (feature) {
          var size = feature.get("features").length;
@@ -2385,7 +2410,38 @@
      window.mapapi.removeLayer(window.jkspclusterLayer);
      window.mapapi.addLayer(window.qiyeclusterLayer);
      loading.close();
      window.mapapi.getView().on("change:resolution", function (event) {
        if (
          window.mapapi.getView().getZoom() ==
          window.mapapi.getView().getMaxZoom()
        ) {
          clusterSource.setDistance(0);
        } else {
          clusterSource.setDistance(40);
        }
      });
      // 监听地图单击事件
      // window.mapapi.on("singleclick", function (e) {
      //   var pixel = window.mapapi.getEventPixel(e.originalEvent);
      //   var currentFeature = window.mapapi.forEachFeatureAtPixel(
      //     pixel,
      //     function (feature, layer) {
      //       return feature;
      //     }
      //   );
      //   if (currentFeature) {
      //     var features = currentFeature.get("features");
      //     if (features.length > 1) {
      //       console.log(features);
      //       window.alert("当前聚合圈下共有" + features.length + "个要素");
      //     }
      //     if (features.length == 1) {
      //       console.log(features);
      //       window.alert("当前要素未被聚合,只有" + features.length + "个要素");
      //     }
      //   }
      // });
      // let dataSource;
      // if (treeNode.layer == "企业链企业") {
      //   // console.log(store.qiyeJsonInfo);
src/components/viewer2.vue
@@ -57,7 +57,7 @@
</template>
<script>
import store from "@/utils/store2.js";
import { setClick, leftClick,touchClick } from "@/utils/map2.js";
import { setClick, leftClick, touchClick } from "@/utils/map2.js";
import _GLOBAL from "@/assets/GLOBAL2";
// import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom2.vue";
@@ -87,6 +87,7 @@
  addHxLayer,
  addYzLayer,
  loadBaseMap,
  loadGeoMap,
  listenDirection,
  getCurrentPosition
} from "@/utils/tool";
@@ -145,7 +146,7 @@
      state: store.history,
    };
  },
  created() {},
  created() { },
  mounted() {
    this.$nextTick(function () {
      ol.Map.prototype.getLayerByName = function (name) {
@@ -162,7 +163,7 @@
      const TDTKey = "f234b950740b8c2e0d9959a51c169d21";
      const tiandituUrl = "http://t0.tianditu.gov.cn";
      let options = { proj: "EPSG:4326", layer: "img", matrixSets: "c" };
      let options = { proj: "EPSG:3857", layer: "img", matrixSets: "c" };
      let _proj = options.proj;
      let _layer = options.layer;
      let _key = TDTKey;
@@ -173,12 +174,12 @@
      let origin = projectionExtent
        ? ol.extent.getTopLeft(projectionExtent)
        : [-180, 90];
      let fromLonLat = ol.proj.getTransform("EPSG:4326", projection);
      let fromLonLat = ol.proj.getTransform("EPSG:3857", projection);
      let width = projectionExtent
        ? ol.extent.getWidth(projectionExtent)
        : ol.extent.getWidth(
            ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat)
          );
          ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat)
        );
      let resolutions = [];
      let matrixIds = [];
@@ -257,23 +258,23 @@
        layers: layers,
        target: "openlayerContainer",
        view: new ol.View({
          center: [116.505348, 39.795592],
          projection: "EPSG:4326",
          zoom: 15,
          minZoom: 12,
          maxZoom: 18,
          center: ol.proj.fromLonLat([116.505348, 39.795592]),
          projection: "EPSG:3857",
          zoom: 11.5,
          minZoom: 7,
          maxZoom: 19.5,
          enableRotation: false,
          // constrainResolution: true,
          smoothResolutionConstraint: false,
        }),
      });
      window.mapapi = map;
      // 加载影像底图
      // addImageLayer();
      // 加载高德注记
      // addAnnotationLayer();
      // 加载矢量地图
      window.mapapi.getView().setZoom(14);
      loadGeoMap();
      loadBaseMap();
      addHxLayer();
      addYzLayer();
@@ -400,7 +401,7 @@
      console.log(window.gisBaseUrl);
      Axios.get(
        window.gisBaseUrl +
          "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
        "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
      ).then((res) => {
        console.log(res);
      });
src/utils/map2.js
@@ -2245,6 +2245,7 @@
//openlayer 地图点击事件
export function setClick(state) {
    function handleClick(e) {
        console.log(e,'地图点击')
        store.setLayerPanelShow(false);
        // 土地管理
        if (store.tdglInfo.flag) {
src/utils/tool.js
@@ -30,6 +30,8 @@
    _GLOBAL.ImageLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
            projection:"EPSG:3857",
            tileSize: 512
        }),
    });
    window.mapapi.addLayer(_GLOBAL.ImageLayer);
@@ -43,7 +45,7 @@
            url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/shiliangditu_baisexi_wms", //图层地址
            params: {
                VERSION: "1.1.1",
                SRS: "EPSG:4326",
                SRS: "EPSG:3857",
                FORMAT: "image/png",
                TILED: true,
                LAYERS: "",
@@ -88,7 +90,7 @@
            url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',
            params: {
                'VERSION': '1.1.1',
                'SRS': 'EPSG:4326',
                'SRS': 'EPSG:3857',
                'FORMAT': 'image/png',
                'TILED': true,
                "LAYERS": ''
@@ -106,7 +108,7 @@
            url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//图层地址
            params: {
                'VERSION': '1.1.1',
                'SRS': 'EPSG:4326',
                'SRS': 'EPSG:3857',
                'FORMAT': 'image/png',
                'TILED': true,
                "LAYERS": ''
@@ -124,6 +126,7 @@
    }
    _GLOBAL.historyLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            projection:"EPSG:3857",
            url: `https://skyzt.bda.gov.cn/yzAdapter/Vector/?request=1&year=${layerName}&type=Sate&level={z}&x={x}&y={y}`,
        })
    });
src/utils/transform.js
@@ -139,8 +139,8 @@
});
ol.proj.addProjection(gcj02Mecator);
// 将4326/3857转为gcj02坐标的方法定义
ol.proj.addCoordinateTransforms('EPSG:3857', gcj02Mecator, projzh.smerc2gmerc, projzh.gmerc2smerc);
ol.proj.addCoordinateTransforms('EPSG:4326', gcj02Mecator, projzh.ll2gmerc, projzh.gmerc2ll);
ol.proj.addCoordinateTransforms('EPSG:3857', gcj02Mecator, projzh.smerc2gmerc, projzh.gmerc2smerc);
// 我使用的react,所以这里需要导出定义的gcj02Mecator,提供给外部使用
export default gcj02Mecator;