月球大数据地理空间分析展示平台-【前端】-月球2期前端
Surpriseplus
2023-09-05 8b8f88d7d8d713a1355d9849f467e3a2dc0c22fe
src/assets/js/Map/olMap.js
@@ -1,6 +1,6 @@
import { getToken } from "@/utils/auth";
//配置文件地址
import config from "./config";
import config from "../../../../public/config/config";
import { Map, View } from "ol"; //地图,视图
import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
import TileLayer from "ol/layer/Tile"; //可以理解为图层
@@ -10,14 +10,16 @@
import WMTSTileGrid from "ol/tilegrid/WMTS.js";
import { get as getProjection, Projection } from "ol/proj.js";
import { register } from "ol/proj/proj4";
import MousePosition from "ol/control/MousePosition.js";
import { getTopLeft, getWidth } from "ol/extent.js";
import { format } from "ol/coordinate";
import store from "@/store";
const olMap = {
  map: null,
  Layer: null,
  projectionObj: {
    code: "ESRI:103881",
    extent: [-180, -90, 180, 90],
    code: null,
    extent: null,
  },
  initMap() {
    //google地图
@@ -31,10 +33,21 @@
    //   "+proj=laea +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs"
    // );
    // register(proj4);
    let mousePositionControl = new MousePosition({
      coordinateFormat: (coordinate) => {
        store.state.olLon = coordinate[0].toFixed(6)
        store.state.olLat = coordinate[1].toFixed(6);
        if (this.map) {
          store.state.olZoom = parseInt(this.map.getView().getZoom())
        }
      },
      projection: this.projectionObj.code,
      target: 'mouse',
    });
    const projection = new Projection({
      // code: this.projectionObj.code,
      code: "ESRI:103881",
      extent: [-180, -90, 180, 90],
      code: this.projectionObj.code,
      extent: this.projectionObj.extent,
      //   extent: this.projectionObj.extent,
    });
    this.map = new Map({
@@ -42,15 +55,15 @@
      layers: [], //AMapLayer, baiduMapLayer
      view: new View({
        projection: projection,
        center: [180, 90],
        center: [0, 0],
        zoom: 4,
      }),
      controls: [mousePositionControl]
    });
  },
  addTreeData(treeNode, obj) {
    // this.delLayerAll();
    this.projectionObj = obj;
    console.log(this.projectionObj);
    //判断是否为代理
    if (treeNode.proxy) {
      this.addProxyAddress(treeNode); //有代理
@@ -164,8 +177,13 @@
      code: this.projectionObj.code,
      // extent: this.projectionObj.extent,
      // code: "ESRI:103879",
      extent: [-180, -90, 180, 90],
      extent: this.projectionObj.extent,
    });
    if (this.map) {
      this.map.values_.view.projection_ = projection
    }
    // var projection = getProjection("ESRI:103880");
    var projectionExtent = projection.getExtent();
@@ -196,27 +214,11 @@
    });
    if (this.map) {
      this.map.addLayer(this.Layer);
      var that = this;
      window.olMap = this.map;
      window.layer = this.Layer
      setTimeout(() => {
        that.getLayersExtent();
      }, 1000)
      // this.Layer.getSource().on('addfeature', function () {
      //   this.map.getView().fit(this.Layer.getSource().getExtent());
      // });
      this.map.getView().fit(this.projectionObj.extent);
    }
  },
  getLayersExtent() {
    // 缩放至图层范围
    this.map.getView().fit(this.Layer.renderer_.renderedExtent_);
  }
};
export default olMap;