youhua

少年

2024-03-04 4a5af28ba9fc254b81aae7345ae936cbaf0716be

youhua

 src/assets/GLOBAL2.vue

@@ -1,8 +1,22 @@
<script>
const layers = [];
const alpha = 1;
const geoMap = null;
const baseMap = null;
const ImageLayer = null;
const annotation = null;
const hexin = null;
const yzxcgh = null;
const historyLayer = null;
export default {
  layers, //收集器
  alpha,
  geoMap,
  baseMap,
  ImageLayer,
  annotation,
  hexin,
  yzxcgh,
  historyLayer
};
</script>

 src/components/poplayer/history2.vue

@@ -1,142 +1,54 @@
<template>
  <div class="historyBox">
    <div class="leftBox">
      <div id="mapContainer" class="mapLeft"></div>
      <div class="colseBtn">
        <img class="searchBtn" @click="close" src="@/assets/closeinput1.png" />
      </div>
      <div class="listBox">
        <ul>
          <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap(item, index)"
            :class="{ active: currentIndex1 == index }">
        <li
          v-for="(item, index) in arr"
          :key="index"
          @click="changeLeftMap(item)"
          :class="{ active: currentValue == item }"
        >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<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 store from '@/utils/store2'
let view = new View({
  center: olProj.fromLonLat([4.606512, 2.621472]),
  zoom: 12,
  enableRotation: false,
});
var topResolution = 896.0859375;
var resolutions = [];
let matrixIds = [];

for (let zoom = 0; zoom < 13; zoom++) {
  resolutions.push(topResolution / Math.pow(2, zoom));
  matrixIds[zoom] = zoom;
}
let LwSource = new Tile({
  source: new 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({
      extent: [371987.18334, 252920.58593, 624459.12036, 423400.07714],
      origin: [0, 688194],
      resolutions: resolutions,
      matrixIds: matrixIds,
      tileSize: 256,
    }),
  }),
});
import store from "@/utils/store2";
import { addHistoryLayer } from "@/utils/tool";
export default {
  name: "historyBox",
  components: {},
  data() {
    return {
      openMap: null,
      arr: [
        2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
        2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
      ],
      tileLayer1: null, // åœ°å›¾å±‚
      tileLayer2: null, // åœ°å›¾å±‚
      mapList: [], // åœ°å›¾åˆ—表
      locaMap1: "2021",
      // locaMap2: "2020",
      currentIndex1: 20,
      // currentIndex2: 19,
      currentValue: 2021,
    };
  },
  mounted() {
    this.mapList = mapType;
    this.tileLayer1 = new Tile({
      source: this.mapList.find((e) => e.id == this.locaMap1).value,
    });
    // this.tileLayer2 = new Tile({
    //   source: this.mapList.find((e) => e.id == this.locaMap2).value,
    // });
    this.initMap();
    window.mapapi.getView().setCenter([4.606512, 2.621472]);
    addHistoryLayer(this.currentValue);
  },
  methods: {
    initMap() {
      new Map({
        target: "mapContainer",
        layers: [
          this.tileLayer1,
          LwSource,
          // new Tile({
          //   source: new XYZ({
          //     url: "https://skyzt.bda.gov.cn/yzAdapter/Vector/?request=1&year=2002&type=Sate&level={z}&x={x}&y={y}",
          //   }),
          // }),
        ],
        view: view,
        controls: [],
      });
    },
    changeLeftMap(item, index) {
      this.tileLayer1.setSource(this.mapList.find((e) => e.id == item).value);
      this.currentIndex1 = index;
    changeLeftMap(item) {
      this.currentValue = item;
      addHistoryLayer(this.currentValue);
    },
    close(){
      store.setHistoryShow(false);

    }
    // changeRightMap(item, index) {
    //   this.tileLayer2.setSource(this.mapList.find((e) => e.id == item).value);
    //   this.currentIndex2 = index;
    // },
  },
  // watch: {
  //   "state.show": {
  //     handler: function (newVal, oldVal) {
  //       debugger;
  //       let that = this;
  //       this.state.show =newVal
  //     },
  //   },
  // },
  },
};
</script>
<style scoped>
.historyBox {
  position: absolute;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  /* background: rgba(0, 0, 0, 0.5); */
  background: #ffffff;
  top: 0;
  left: 0;
}

.colseBtn {
  position: absolute;
  top: 5vh;
@@ -174,4 +86,5 @@

.active {
  background-color: #4590d7;
}</style>
}
</style>

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -3,16 +3,30 @@
    <div class="mapMode">
      <div class="title" style="margin-top: 0px">地图模式</div>
      <div class="container">
        <div class="layerItem" :key="value.id" v-for="(value, index) in eMapModeList"
          @click.stop="handleEMapClick(value, index)">
          <img :src="value.src" :class="{ active: curEMapModelIndex == index }" />
        <div
          class="layerItem"
          :key="value.id"
          v-for="(value, index) in eMapModeList"
          @click.stop="handleEMapClick(value, index)"
        >
          <img
            :src="value.src"
            :class="{ active: curEMapModelIndex == index }"
          />
          <span :class="{ spanActive: curEMapModelIndex == index }">{{
            value.name
          }}</span>
        </div>
        <div class="layerItem" :key="value0.id" v-for="(value0, index0) in sMapModelList"
          @click.stop="handleSMapClick(value0, index0)">
          <img :src="value0.src" :class="{ active: curSMapModelIndex == index0 }" />
        <div
          class="layerItem"
          :key="value0.id"
          v-for="(value0, index0) in sMapModelList"
          @click.stop="handleSMapClick(value0, index0)"
        >
          <img
            :src="value0.src"
            :class="{ active: curSMapModelIndex == index0 }"
          />
          <span :class="{ spanActive: curSMapModelIndex == index0 }">{{
            value0.name
          }}</span>
@@ -23,11 +37,17 @@
      <div class="title">
        ä¸“题应用
        <!-- ä¸æ˜¾ç¤ºæ›´å¤šå›¾å±‚ -->
        <span class="more" v-show="false" @click.stop="showLayerTree">更多图层<i class="el-icon-arrow-right"></i></span>
        <span class="more" v-show="false" @click.stop="showLayerTree"
          >更多图层<i class="el-icon-arrow-right"></i
        ></span>
      </div>
      <div class="container">
        <div class="layerItem" v-for="(ZTValue, ZTIndex) in zhuantiList" :key="ZTValue.id"
          @click.stop="handleZTlick(ZTValue, ZTIndex)">
        <div
          class="layerItem"
          v-for="(ZTValue, ZTIndex) in zhuantiList"
          :key="ZTValue.id"
          @click.stop="handleZTlick(ZTValue, ZTIndex)"
        >
          <img :src="ZTValue.src" :class="{ active: curZTIndex == ZTIndex }" />
          <span :class="{ spanActive: curZTIndex == ZTIndex }">{{
            ZTValue.name
@@ -36,9 +56,16 @@
      </div>
      <div class="title2"></div>
      <div class="container">
        <div class="layerItem" v-for="(funcValue, funcIndex) in FuncList" :key="funcValue.id"
          @click.stop="handleFuncClick(funcIndex)">
          <img :src="funcValue.src" :class="{ active: curFuncIndex == funcIndex }" />
        <div
          class="layerItem"
          v-for="(funcValue, funcIndex) in FuncList"
          :key="funcValue.id"
          @click.stop="handleFuncClick(funcIndex)"
        >
          <img
            :src="funcValue.src"
            :class="{ active: curFuncIndex == funcIndex }"
          />
          <span :class="{ spanActive: curFuncIndex == funcIndex }">{{
            funcValue.name
          }}</span>
@@ -82,12 +109,15 @@
import store from "@/utils/store2.js";
import ZTTitem from "@/utils/ztt2.js";
import { layers } from "../../../../static/json/layer.js";

// import Tile from "ol/layer/Tile";
// import XYZ from "ol/source/XYZ";
// import { get as getProjection, getTransform } from "ol/proj";
// import { createXYZ } from "ol/tilegrid";

import {
  addImageLayer,
  addAnnotationLayer,
  addHxLayer,
  addYzLayer,
  loadBaseMap,
  loadGeoMap,
  clearAll,
} from "@/utils/tool";
export default {
  name: "LayerPanel",
  data() {
@@ -226,104 +256,24 @@
    },
    // äºŒç»´åº•å›¾é€‰æ‹©
    handleEMapClick(result, index) {
      // è®¾ç½®ç›¸æœº
      // if (result.name == "二维地图") {
      //   window.mapapi.getLayerByName("二维地图").setVisible(true);
      //   window.mapapi.getLayerByName("影像地图").setVisible(false);
      // } else if (result.name == "影像地图") {
      //   window.mapapi.getLayerByName("影像地图").setVisible(true);
      //   window.mapapi.getLayerByName("二维地图").setVisible(false);
      // }

      // åˆ‡æ¢å›¾å±‚
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
        }
      });
      const children = val[0].children;
      // console.log(children, '111')
      if (result.name == '影像地图') {
        //加载航拍影像
        window.ImageLayer = new ol.layer.Tile({
          id: 'C0698021',
          visible: true,
          source: new ol.source.XYZ({
            wrapX: true,
            url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
          }),
          projection: new ol.proj.get('EPSG:4326')
        });
        window.mapapi.addLayer(window.ImageLayer);

        //加载高德标注
        window.annotation = new ol.layer.Tile({
          id: '69EB42A8',
          visible: true,
          source: new ol.source.XYZ({
            wrapX: true,
            url: `https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}`,
          }),
          projection: new ol.proj.get('EPSG:4326')
        });
        window.mapapi.addLayer(window.annotation);


        window.hexin = new ol.layer.Tile({
          source: new ol.source.TileWMS({
            ratio: 3,
            url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',//图层地址
            params: {
              'VERSION': '1.1.1',
              'SRS': 'EPSG:4326',
              'FORMAT': 'image/png',
              'TILED': true,
              "LAYERS": ''
            }
          })
        })
        window.mapapi.addLayer(window.hexin)


        //亦庄新城规划范围
        window.yizhuang = new ol.layer.Tile({
          source: new ol.source.TileWMS({
            ratio: 3,
            url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//图层地址
            params: {
              'VERSION': '1.1.1',
              'SRS': 'EPSG:4326',
              'FORMAT': 'image/png',
              'TILED': true,
              "LAYERS": ''
            }
          })
        })
        window.mapapi.addLayer(window.yizhuang)
      } else {
        window.mapapi.removeLayer(window.ImageLayer);
        window.mapapi.removeLayer(window.annotation)
        window.mapapi.removeLayer(window.hexin);
        window.mapapi.removeLayer(window.yizhuang);
      }



      if (this.curEMapModelIndex == index) {
        // å†æ¬¡ç‚¹å‡»é€‰ä¸­çš„item时取消选择
        // clearLayerByTypeId(result.id);
        // this.curEMapModelIndex = -1;
      } else {
        this.curSMapModelIndex = -1;
      if (this.curEMapModelIndex == index) return;
        this.curEMapModelIndex = index;
        // clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        // clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        // _GLOBAL.layers[result.id] = [];
        // children.forEach((item) => {
        //   let itemLayer = loadLayer(item);
        //   _GLOBAL.layers[result.id].push(itemLayer);
        //   // console.log(_GLOBAL.layers[result.id]);
        // });
      clearAll();
      switch (result.name) {
        case "二维地图":
          loadGeoMap();
          loadBaseMap();
          addAnnotationLayer();
          addHxLayer();
          addYzLayer();
          window.mapapi.getView().setZoom(14);
          break;
        case "影像地图":
          addImageLayer();
          addAnnotationLayer();
          addHxLayer();
          addYzLayer();
          break;
      }
    },
    // ä¸‰ç»´æ¨¡åž‹é€‰æ‹©
@@ -476,16 +426,16 @@
            window.tdgllayer = new ol.layer.Tile({
              source: new ol.source.TileWMS({
                ratio: 3,
                url: 'https://skyzt.bda.gov.cn//gisserver/wmsserver/chengshiguihua_dikuaibianhao',
                url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/chengshiguihua_dikuaibianhao",
                params: {
                  'VERSION': '1.1.1',
                  'SRS': 'EPSG:4326',
                  'FORMAT': 'image/png',
                  'TILED': true,
                  "LAYERS": ''
                }
              })
            })
                  VERSION: "1.1.1",
                  SRS: "EPSG:4326",
                  FORMAT: "image/png",
                  TILED: true,
                  LAYERS: "",
                },
              }),
            });

            // window.tdgllayer = new ol.layer.Tile({
            //   source: new ol.source.XYZ({

 src/components/sideMenu/layerTreePanel/layerTreePanel2.vue

@@ -103,7 +103,7 @@
  mounted() {
    axios.get("./static/json/layers.json").then(
      (res) => {
        console.log("layers.json", res);
        // console.log("layers.json", res);
        //获取默认选中数据的id
        this.parseJson(res.data.children);

@@ -2274,6 +2274,7 @@
          // });
        });
    },
    //企业信息加载
    qiyeCluster(treeNode) {
      if (treeNode.checked == false) {
        window.mapapi.removeLayer(window.qiyeclusterLayer);

 src/components/viewer2.vue

@@ -57,7 +57,7 @@
</template>
<script>
import store from "@/utils/store2.js";
import { setClick, leftClick } from '@/utils/map2.js'
import { setClick, leftClick } from "@/utils/map2.js";
import _GLOBAL from "@/assets/GLOBAL2";
// import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom2.vue";
@@ -81,7 +81,14 @@
import mainPoplayer from "./poplayer/poplayer2.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main2.vue";
import Axios from "axios";

import {
  addImageLayer,
  addAnnotationLayer,
  addHxLayer,
  addYzLayer,
  loadBaseMap,
  getCurrentPosition,
} from "@/utils/tool";
// import Map from "ol/Map.js";
// import TileLayer from "ol/layer/Tile.js";
// import View from "ol/View.js";
@@ -114,7 +121,7 @@
    "my-history": history,
    "my-land-admin-info": landAdminInfo,
    "my-slider": sliderAlpha,
    "my-poplayer": mainPoplayer
    "my-poplayer": mainPoplayer,
  },
  data() {
    return {
@@ -140,8 +147,6 @@
  created() { },
  mounted() {
    this.$nextTick(function () {
      console.log("openlayer init");

      ol.Map.prototype.getLayerByName = function (name) {
        var layer;
        this.getLayers().array_.forEach(function (lyr) {
@@ -164,11 +169,15 @@

      let projection = ol.proj.get(_proj);
      let projectionExtent = projection.getExtent();
      let origin = projectionExtent ? ol.extent.getTopLeft(projectionExtent) : [-180, 90];
      let origin = projectionExtent
        ? ol.extent.getTopLeft(projectionExtent)
        : [-180, 90];
      let fromLonLat = ol.proj.getTransform("EPSG:4326", 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.getWidth(
            ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat)
          );

      let resolutions = [];
      let matrixIds = [];
@@ -236,10 +245,10 @@
        source: wmtsSource2,
      });
      // wmtsLayer2.setVisible(false);
      ////卫星影像
      layers.push(wmtsLayer);
      ////二维地图
      layers.push(wmtsLayer2);
      // layers.push(wmtsLayer2);
      ////卫星影像
      // layers.push(wmtsLayer);
      ////路网
      // layers.push(wmtsLayer1);

@@ -250,98 +259,21 @@
          center: [116.505348, 39.795592],
          projection: "EPSG:4326",
          zoom: 12,
          minZoom: 8.5
          minZoom: 9.5,
        }),
        // events: ["singleclick", "pointermove"],
      });

      window.mapapi = map;

      //加载航拍影像
      window.ImageLayer = new ol.layer.Tile({
        id: 'C0698021',
        visible: true,
        source: new ol.source.XYZ({
          wrapX: true,
          url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
        }),
        projection: new ol.proj.get('EPSG:4326')
      });
      window.mapapi.addLayer(window.ImageLayer);
      addImageLayer();
      addAnnotationLayer();
      addHxLayer();
      addYzLayer();

      //加载高德标注
      window.annotation = new ol.layer.Tile({
        id: '69EB42A8',
        visible: true,
        source: new ol.source.XYZ({
          wrapX: true,
          url: `https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}`,
        }),
        projection: new ol.proj.get('EPSG:4326')
      });
      window.mapapi.addLayer(window.annotation);


      window.hexin = new ol.layer.Tile({
        source: new ol.source.TileWMS({
          ratio: 3,
          url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',//图层地址
          params: {
            'VERSION': '1.1.1',
            'SRS': 'EPSG:4326',
            'FORMAT': 'image/png',
            'TILED': true,
            "LAYERS": ''
          }
        })
      })
      window.mapapi.addLayer(window.hexin)


      //亦庄新城规划范围
      window.yizhuang = new ol.layer.Tile({
        source: new ol.source.TileWMS({
          ratio: 3,
          url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//图层地址
          params: {
            'VERSION': '1.1.1',
            'SRS': 'EPSG:4326',
            'FORMAT': 'image/png',
            'TILED': true,
            "LAYERS": ''
          }
        })
      })
      window.mapapi.addLayer(window.yizhuang)




      setClick(true)
      setClick(true);
      getCurrentPosition();
      // leftClick()
      // var url =
      //   "https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";

      // var tmslayer = new ol.layer.Tile({
      //   source: new ol.source.XYZ({
      //     projection: projection,
      //     tileGrid: ol.tilegrid.createXYZ({
      //       extent: [50.731, -90, 180, 70.0478],
      //     }),
      //     tileUrlFunction: function (tileCoord, pixelRatio, proj) {
      //       // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg';
      //       return (
      //         url +
      //         (tileCoord[0] - 1) +
      //         "/" +
      //         tileCoord[1] +
      //         "/" +
      //         (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) +
      //         ".jpeg"
      //       );
      //     },
      //   }),
      // });
      // window.mapapi.addLayer(tmslayer);

      window.layerOpen = function (name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);

 src/main.js

@@ -12,7 +12,7 @@
import animated from "animate.css"
import "./js/rem"
import vcolorpicker from 'vcolorpicker'
import _GLOBAL from '@/assets/GLOBAL';
import _GLOBAL from '@/assets/GLOBAL2';
Vue.use(vcolorpicker);
Vue.use(animated);
window.sgworld = null;

 src/utils/tool.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,145 @@

import _GLOBAL from '@/assets/GLOBAL2'
import gcj02Mecator from '@/utils/transform'
//清除
export function clearAll() {
    if (_GLOBAL.ImageLayer) {
        window.mapapi.removeLayer(_GLOBAL.ImageLayer);
    }
    if (_GLOBAL.annotation) {
        window.mapapi.removeLayer(_GLOBAL.annotation);
    }
    if (_GLOBAL.hexin) {
        window.mapapi.removeLayer(_GLOBAL.hexin);
    }
    if (_GLOBAL.yzxcgh) {
        window.mapapi.removeLayer(_GLOBAL.yzxcgh);
    }
    if (_GLOBAL.baseMap) {
        window.mapapi.removeLayer(_GLOBAL.baseMap);
    }
    if (_GLOBAL.geoMap) {
        window.mapapi.removeLayer(_GLOBAL.geoMap);

    }
}

//加载航拍影像
export function addImageLayer() {
    _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}`,
        }),
    });
    window.mapapi.addLayer(_GLOBAL.ImageLayer);
}

//加载白色地图
export function loadBaseMap() {
    _GLOBAL.baseMap = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            ratio: 3,
            url: "https://skyzt.bda.gov.cn/gisserver/wmsserver/shiliangditu_baisexi_wms", //图层地址
            params: {
                VERSION: "1.1.1",
                SRS: "EPSG:4326",
                FORMAT: "image/png",
                TILED: true,
                LAYERS: "",
            },
        }),
    });
    window.mapapi.addLayer(_GLOBAL.baseMap)

}

//加载高德地图
export function loadGeoMap() {
    _GLOBAL.geoMap = new ol.layer.Tile({
        source: new ol.source.XYZ({
            wrapX: false,
            projection: gcj02Mecator,
            url: ` https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}`,
        }),
    });
    window.mapapi.addLayer(_GLOBAL.geoMap);

}


//加载高德标注
export function addAnnotationLayer() {
    _GLOBAL.annotation = new ol.layer.Tile({
        source: new ol.source.XYZ({
            wrapX: false,
            projection: gcj02Mecator,
            url: `https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}`,
        }),
    });
    window.mapapi.addLayer(_GLOBAL.annotation);
}

// æ ¸å¿ƒåŒºè§„划范围
export function addHxLayer() {
    _GLOBAL.hexin = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            ratio: 3,
            url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',
            params: {
                'VERSION': '1.1.1',
                'SRS': 'EPSG:4326',
                'FORMAT': 'image/png',
                'TILED': true,
                "LAYERS": ''
            }
        })
    })
    window.mapapi.addLayer(_GLOBAL.hexin)
}

//亦庄新城规划范围
export function addYzLayer() {
    _GLOBAL.yzxcgh = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            ratio: 3,
            url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//图层地址
            params: {
                'VERSION': '1.1.1',
                'SRS': 'EPSG:4326',
                'FORMAT': 'image/png',
                'TILED': true,
                "LAYERS": ''
            }
        })
    })
    window.mapapi.addLayer(_GLOBAL.yzxcgh)
}

//加载历史影像
export function addHistoryLayer(name) {
    const layerName = name;
    _GLOBAL.historyLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: `https://skyzt.bda.gov.cn/yzAdapter/Vector/?request=1&year=${layerName}&type=Sate&level={z}&x={x}&y={y}`,
        })
    });
    window.mapapi.addLayer(_GLOBAL.historyLayer);
}


//获取当前定位


export function getCurrentPosition() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((res) => {
            console.log(res);//这里会返回经纬度，然后还要通过经纬度转换地区名称
        });
    }

}






 src/utils/transform.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,147 @@


var forEachPoint = function (func) {
  return function (input, opt_output, opt_dimension) {
    var len = input.length;
    var dimension = opt_dimension ? opt_dimension : 2;
    var output;
    if (opt_output) {
      output = opt_output;
    } else {
      if (dimension !== 2) {
        output = input.slice();
      } else {
        output = new Array(len);
      }
    }
    for (var offset = 0; offset < len; offset += dimension) {
      func(input, output, offset);
    }
    return output;
  };
};
var gcj02 = {};
var i = 0;
var PI = Math.PI;
var AXIS = 6378245.0;
var OFFSET = 0.00669342162296594323; // (a^2 - b^2) / a^2

function delta(wgLon, wgLat) {
  var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
  var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
  var radLat = (wgLat / 180.0) * PI;
  var magic = Math.sin(radLat);
  magic = 1 - OFFSET * magic * magic;
  var sqrtMagic = Math.sqrt(magic);
  dLat = (dLat * 180.0) / (((AXIS * (1 - OFFSET)) / (magic * sqrtMagic)) * PI);
  dLon = (dLon * 180.0) / ((AXIS / sqrtMagic) * Math.cos(radLat) * PI);
  return [dLon, dLat];
}

function outOfChina(lon, lat) {
  if (lon < 72.004 || lon > 137.8347) {
    return true;
  }
  if (lat < 0.8293 || lat > 55.8271) {
    return true;
  }
  return false;
}

function transformLat(x, y) {
  var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0;
  ret += ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0;
  ret += ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) * 2.0) / 3.0;
  return ret;
}

function transformLon(x, y) {
  var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
  ret += ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) / 3.0;
  ret += ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0;
  ret += ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) * 2.0) / 3.0;
  return ret;
}

gcj02.toWGS84 = forEachPoint(function (input, output, offset) {
  var lng = input[offset];
  var lat = input[offset + 1];
  if (!outOfChina(lng, lat)) {
    var deltaD = delta(lng, lat);
    lng = lng - deltaD[0];
    lat = lat - deltaD[1];
  }
  output[offset] = lng;
  output[offset + 1] = lat;
});

gcj02.fromWGS84 = forEachPoint(function (input, output, offset) {
  var lng = input[offset];
  var lat = input[offset + 1];
  if (!outOfChina(lng, lat)) {
    var deltaD = delta(lng, lat);
    lng = lng + deltaD[0];
    lat = lat + deltaD[1];
  }
  output[offset] = lng;
  output[offset + 1] = lat;
});

var sphericalMercator = {};

var RADIUS = 6378137;
var MAX_LATITUDE = 85.0511287798;
var RAD_PER_DEG = Math.PI / 180;

sphericalMercator.forward = forEachPoint(function (input, output, offset) {
  var lat = Math.max(Math.min(MAX_LATITUDE, input[offset + 1]), -MAX_LATITUDE);
  var sin = Math.sin(lat * RAD_PER_DEG);

  output[offset] = RADIUS * input[offset] * RAD_PER_DEG;
  output[offset + 1] = (RADIUS * Math.log((1 + sin) / (1 - sin))) / 2;
});

sphericalMercator.inverse = forEachPoint(function (input, output, offset) {
  output[offset] = input[offset] / RADIUS / RAD_PER_DEG;
  output[offset + 1] = (2 * Math.atan(Math.exp(input[offset + 1] / RADIUS)) - Math.PI / 2) / RAD_PER_DEG;
});

var projzh = {};
projzh.ll2gmerc = function (input, opt_output, opt_dimension) {
  let output = gcj02.fromWGS84(input, opt_output, opt_dimension);
  return projzh.ll2smerc(output, output, opt_dimension);
};
projzh.gmerc2ll = function (input, opt_output, opt_dimension) {
  let output = projzh.smerc2ll(input, input, opt_dimension);
  return gcj02.toWGS84(output, opt_output, opt_dimension);
};
projzh.smerc2gmerc = function (input, opt_output, opt_dimension) {
  let output = projzh.smerc2ll(input, input, opt_dimension);
  output = gcj02.fromWGS84(output, output, opt_dimension);
  return projzh.ll2smerc(output, output, opt_dimension);
};
projzh.gmerc2smerc = function (input, opt_output, opt_dimension) {
  let output = projzh.smerc2ll(input, input, opt_dimension);
  output = gcj02.toWGS84(output, output, opt_dimension);
  return projzh.ll2smerc(output, output, opt_dimension);
};

projzh.ll2smerc = sphericalMercator.forward;
projzh.smerc2ll = sphericalMercator.inverse;

// å®šä¹‰GCJ02
const gcj02Extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244];
const gcj02Mecator = new ol.proj.Projection({
  code: 'GCJ-02',
  extent: gcj02Extent,
  units: 'm',
});
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);

// æˆ‘使用的react，所以这里需要导出定义的gcj02Mecator，提供给外部使用
export default gcj02Mecator;