投影图层修改

surprise

2023-11-03 8259d48200ce9477ecbe16e8426161493211b593

 src/assets/js/Map/olMap.js

@@ -2,17 +2,17 @@
import store from "@/store";
//配置文件地址
// import config from "../../../../public/config/config.js";
// import { Map, View } from "ol"; //地图,视图
// import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
// import TileLayer from "ol/layer/Tile"; //可以理解为图层
// import { fromLonLat, transform } from "ol/proj"; //将坐标从经度/纬度转换为不同的投影。
// import XYZ from "ol/source/XYZ";
// import WMTS from "ol/source/WMTS.js";
// import WMTSTileGrid from "ol/tilegrid/WMTS.js";
// import { get as getProjection, Projection, addProjection } 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 { Map, View } from "ol"; //地图,视图
import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
import TileLayer from "ol/layer/Tile"; //可以理解为图层
import { fromLonLat, transform } from "ol/proj"; //将坐标从经度/纬度转换为不同的投影。
import XYZ from "ol/source/XYZ";
import WMTS from "ol/source/WMTS.js";
import WMTSTileGrid from "ol/tilegrid/WMTS.js";
import { get as getProjection, Projection, addProjection } 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 { nextTick } from "vue";
@@ -22,11 +22,13 @@
const olMap = {
  map: null,
  Layer: null,
  proxy: null,
  projectionObj: {
    code: null,
    extent: null,
  },
  initMap() {
    this.proxy = config.proxy
    if (this.map) {
      this.map.setTarget(null);
      this.map.dispose();
@@ -162,6 +164,7 @@
    var url;
    if (res.proxy) {
      const token = getToken();

      url = config.proxy + res.proxy.replaceAll("{token}", token);
    } else {
      url = res.url;
@@ -177,6 +180,7 @@

  addWmts(res) {
    this.initMap();

    if (res.category == 4) {//判断是否为Arcgis服务
      addArcGisWmst(res);
    } else {
@@ -186,26 +190,31 @@
};

function addGeoWmst(res) {
  var url = olMap.getLayrUrl(res);
  var url;
  if (res.proxy) {
    const token = getToken();

  const projection = new ol.proj.Projection({
    url = config.proxy + res.proxy.replaceAll("{token}", token);
  } else {
    url = res.url;
  }
  const projection = new Projection({
    code: olMap.projectionObj.code,
    extent: olMap.projectionObj.extent,
  });
  var mapCode = olMap.projectionObj.code;
  initPolarCoord(mapCode)
  epsgPolarCoord(mapCode)
  ol.proj.addProjection(projection);
  var projectionExtent = projection.getExtent();
  var size = ol.extent.getWidth(projectionExtent) / 256;
  var size = getWidth(projectionExtent) / 256;
  var resolutions = new Array(18);
  var matrixIds = new Array(18);
  for (var z = 1; z < 19; ++z) {
    resolutions[z] = size / Math.pow(2, z);
    matrixIds[z] = z;
  }
  let mousePositionControl = new ol.control.MousePosition({
  let mousePositionControl1 = new MousePosition({
    coordinateFormat: (coordinate) => {

      store.state.olLon = coordinate[0].toFixed(6)
      store.state.olLat = coordinate[1].toFixed(6);
      if (olMap.map) {
@@ -215,59 +224,68 @@
    projection: mapCode,
    target: 'mouse',
  });
  var arcgisLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: url,

  var wmtsLayer = new TileLayer({
    // opacity: 0.7, //图层透明度
    source: new WMTS({
      url: url, //WMTS服务基地址
      layer: "img", //注意每个图层这里不同
      matrixSet: "GoogleMapsCompatible",
      format: "image/png",
      style: "default",
      projection: projection,
      tileGrid: new ol.tilegrid.TileGrid({
        origin: ol.extent.getTopLeft(projectionExtent), //原点（左上角）
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent), //原点（左上角）
        resolutions: resolutions, //分辨率数组
        matrixIds: matrixIds, //矩阵标识列表，与地图级数保持一致
      }),
      wrapX: true,
    }),
    })
  });

  var val = olMap.projectionObj.extent;
  olMap.map = new ol.Map({
  olMap.map = new Map({
    target: 'mapView',
    controls: ol.control.defaults({
      attributionOptions: ({
        collapsible: true
      })
    }),
    layers: [arcgisLayer],
    view: new ol.View({
      center: [(val[0] + val[1]) / 2, (val[2] + val[3]) / 2.4],
      zoom: 5,
      minZoom: 1,
      maxZoom: 12,
      controls: [mousePositionControl],
      projection: ol.proj.get(mapCode), // "ESRI:103877", //
    layers: [],
    view: new View({
      center: [0, 0],
      zoom: 4,
      projection: projection,
      resolutions: res.resolutions
    })
    }),
    controls: [mousePositionControl1]
  });
  olMap.map.addControl(mousePositionControl);
  olMap.map.addLayer(wmtsLayer)
  setTimeout(() => {
    if (olMap.map) {
      if (res.bak) {
        var json = JSON.parse(res.bak)
        olMap.map.getView().setCenter([json.center[0], json.center[1]])
        olMap.map.getView().setZoom(json.zoom)
      } else {
        olMap.map.getView().setCenter([0, 0])
        olMap.map.getView().setZoom(5)
}







    }
  }, 500);
}
function addArcGisWmst(res) {
  var extent = [-1440000, -1440000, 1440000, 1440000];
  var mapCode = null;
  if (res.url.indexOf('103878') > -1) {//南极
    mapCode = "ESRI:103878"
  } else if (res.url.indexOf('103877')) {//北极
    mapCode = "ESRI:103877"
  olMap.initMap
  var olMapDate = null;
  if (res.url.indexOf('south') > -1) {//南极
    olMapDate = proDate.south;
  } else if (res.url.indexOf('north') > -1) {//北极
    olMapDate = proDate.north;
  } else if (res.url.indexOf('near') > -1) {//北极
    olMapDate = proDate.near;
  } else if (res.url.indexOf('far') > -1) {//北极
    olMapDate = proDate.far;
  } else if (res.url.indexOf('equid') > -1) {//北极
    olMapDate = proDate.equid;
  }
  initPolarCoord(mapCode)
  var extent = olMapDate.extent;
  var mapCode = olMapDate.epsg;
  initPolarCoord()
  var proj = new ol.proj.Projection({
    code: mapCode,
    extent: extent,
@@ -301,10 +319,12 @@
  });
  let mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: (coordinate) => {
      var sourceProj = "ESRI:103877"; // 原始坐标系为经纬度
      var sourceProj = mapCode; 
      console.log("yuanshi",mapCode)
      var destProj = "ESRI:104903"; // 目标坐标系为墨卡托投影
      var olLon = coordinate[0]
      var olLat = coordinate[1];
      console.log(olLon, olLat)
      var destCoord = ol.proj.transform([olLon, olLat], sourceProj, destProj);

      store.state.olLon = destCoord[0].toFixed(6)
@@ -324,10 +344,10 @@
        collapsible: true
      })
    }),
    layers: [arcgisLayer],
    layers: [],
    view: new ol.View({
      center: [18577254.760, -18629510.055],
      zoom: 5,
      center:  [0,0 ],
      zoom:1,
      minZoom: 1,
      maxZoom: 12,
      controls: [mousePositionControl],
@@ -336,18 +356,34 @@
    })
  });
  olMap.map.addControl(mousePositionControl);
  olMap.map.addLayer(arcgisLayer)
  // setTimeout(() => {
  //   if (olMap.map) {
  //     olMap.map.getView().setCenter(olMapDate.centert)
  //     olMap.map.getView().setZoom(olMapDate.zoom)
  //   }
  // },1000);

}
function initPolarCoord(epsg) {
  proj4.defs("ESRI:103877", "+proj=stere +lat_0=90 +lon_0=0 +k=1 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs");
function initPolarCoord() {
  // proj4.defs("ESRI:103877","+proj=stere +lat_0=90 +lon_0=0 +k=1 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs");
  // ol.proj.proj4.register(proj4);
  // proj4.defs("ESRI:103878","+proj=stere +lat_0=-90 +lon_0=0 +k=1 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs");
  // ol.proj.proj4.register(proj4);
  // proj4.defs("ESRI:103881", "+proj=eqc +lat_ts=0 +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs");
  proj4.defs("ESRI:103881","+proj=eqc +lat_ts=0 +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs");
  ol.proj.proj4.register(proj4);

  proj4.defs("ESRI:103878", "+proj=stere +lat_0=-90 +lon_0=0 +k=1 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs");
  ol.proj.proj4.register(proj4);

  // proj4.defs("ESRI:103880","+proj=laea +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs");
  // ol.proj.proj4.register(proj4);
  // proj4.defs("ESRI:103879","+proj=laea +lat_0=0 +lon_0=180 +x_0=0 +y_0=0 +R=1737400 +units=m +no_defs +type=crs");
  // ol.proj.proj4.register(proj4);
  proj4.defs("ESRI:104903", "+proj=longlat +R=1737400 +no_defs +type=crs");
  ol.proj.proj4.register(proj4);
}

function epsgPolarCoord(res) {
  proj4.defs(res, "+proj=longlat +R=1737400 +no_defs +type=crs");
  ol.proj.proj4.register(proj4);
}
function getResolutionsAndMids(maxLevel) {
  var rs = [
    156543.03392800014,
@@ -370,10 +406,10 @@
    1.1943285668550503,
    0.59716428355981721,
    0.29858214164761665,
    0.14929107082380833,
    0.074645535411904163,
    0.037322767705952081,
    0.018661383852976041
    // 0.14929107082380833,
    // 0.074645535411904163,
    // 0.037322767705952081,
    // 0.018661383852976041
  ];
  var matrixIds = [], resolutions = [];
  for (var z = 0; z <= maxLevel; ++z) {