import { getToken } from "@/utils/auth"; 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 { format } from "ol/coordinate"; // import { nextTick } from "vue"; // import { boundingExtent } from 'ol/extent.js'; // import { createXYZ } from 'ol/tilegrid.js'; // import { defaults as defaultControls } from 'ol/control.js'; 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(); this.map = null; } // 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, // extent: this.projectionObj.extent, // }); // this.map = new Map({ // target: "mapView", // layers: [], //AMapLayer, baiduMapLayer // view: new View({ // projection: projection, // center: [0, 0], // zoom: 4, // }), // controls: [mousePositionControl] // }); }, addTreeData(treeNode, obj) { // this.delLayerAll(); this.projectionObj = obj; //判断是否为代理 if (treeNode.proxy) { this.addProxyAddress(treeNode); //有代理 } else { this.addUrlAddress(treeNode); //无代理 } }, //代理地址 addProxyAddress(res) { //判断数据类型 switch (res.data) { case 1: //数字正射影像图 this.setDataType(res); break; case 2: //场景地形数据 this.setTerrainData(res); break; case 3: //数字高程模型(晕渲图) this.setDataType(res); break; case 4: //单波段栅格数据 this.setDataType(res); break; case 5: //多光谱栅格数据 this.setDataType(res); break; case 6: //高光谱栅格数据 this.setDataType(res); break; case 7: //矢量图层 this.setVectorData(res); break; case 8: //三维模型 this.setModelData(res); break; } }, //普通地址 addUrlAddress(res) { switch (res.category) { case 0: //其他 break; case 1: //GisServer this.addProxyAddress(res); break; case 2: //GeoServer this.addGeoServerAddress(res); break; case 3: //数简 this.addProxyAddress(res); break; case 4: //ArgisServer this.addProxyAddress(res); break; } }, setDataType(res) { switch (res.type) { case 0: //URL break; case 1: //TMS // this.setAddTmsLayer(res); break; case 2: //WMTS this.addWmts(res); break; case 3: //WMS // this.setAddWmsLayer(res); break; } }, setTerrainData(res) { switch (res.type) { case 0: //URL // this.setAddTearrinLayer(res); break; case 1: //TMS // this.setAddTearrinLayer(res); break; } }, setVectorData(res) { switch (res.type) { case 0: //URL break; case 3: //WMS // this.setAddWmsLayer(res); break; case 4: //WFS break; } }, //获取服务地址 getLayrUrl(res) { var url; if (res.proxy) { const token = getToken(); url = config.proxy + res.proxy.replaceAll("{token}", token); } else { url = res.url; } return url; }, deleteLayer() { if (this.map && this.Layer) { this.map.removeLayer(this.Layer); this.Layer = null; } }, addWmts(res) { this.initMap(); if (res.category == 4) {//判断是否为Arcgis服务 addArcGisWmst(res); } else { addGeoWmst(res); } }, }; function addGeoWmst(res) { var url; if (res.proxy) { const token = getToken(); 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; epsgPolarCoord(mapCode) ol.proj.addProjection(projection); var projectionExtent = projection.getExtent(); 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 mousePositionControl1 = new MousePosition({ coordinateFormat: (coordinate) => { store.state.olLon = coordinate[0].toFixed(6) store.state.olLat = coordinate[1].toFixed(6); if (olMap.map) { store.state.olZoom = parseInt(olMap.map.getView().getZoom()) } }, projection: mapCode, target: 'mouse', }); 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 WMTSTileGrid({ origin: getTopLeft(projectionExtent), //原点(左上角) resolutions: resolutions, //分辨率数组 matrixIds: matrixIds, //矩阵标识列表,与地图级数保持一致 }), wrapX: true, }) }); var val = olMap.projectionObj.extent; olMap.map = new Map({ target: 'mapView', layers: [], view: new View({ center: [0, 0], zoom: 4, projection: projection, resolutions: res.resolutions }), controls: [mousePositionControl1] }); 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) { 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; } var extent = olMapDate.extent; var mapCode = olMapDate.epsg; initPolarCoord() var proj = new ol.proj.Projection({ code: mapCode, extent: extent, worldExtent: extent, units: "m", metersPerUnit: 2 * Math.PI * 1737400 / 360 }); proj.getMetersPerUnit = function () { return 2 * Math.PI * 1737400 / 360; // 6378137 }; ol.proj.addProjection(proj); var ResolutionsAndMids = getResolutionsAndMids(12); var arcUrl = res.url; var arcgisLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ tileUrlFunction: function (coords) { var l = 'L' + fillZero(coords[0], 2, 10); var r = 'R' + fillZero(-coords[2] - 1, 8, 16); var c = 'C' + fillZero(coords[1], 8, 16); return arcUrl + "/" + l + "/" + r + "/" + c + ".png"; }, projection: proj, tileGrid: new ol.tilegrid.TileGrid({ origin: ol.extent.getTopLeft(proj.getExtent()), resolutions: ResolutionsAndMids.resolutions, }) }) }); let mousePositionControl = new ol.control.MousePosition({ coordinateFormat: (coordinate) => { 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) store.state.olLat = destCoord[1].toFixed(6); if (olMap.map) { store.state.olZoom = parseInt(olMap.map.getView().getZoom()) } }, projection: mapCode, target: 'mouse', }); olMap.map = new ol.Map({ target: 'mapView', controls: ol.control.defaults({ attributionOptions: ({ collapsible: true }) }), layers: [], view: new ol.View({ center: [0,0 ], zoom:1, minZoom: 1, maxZoom: 12, controls: [mousePositionControl], projection: ol.proj.get(mapCode), // "ESRI:103877", // resolutions: res.resolutions }) }); 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() { 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: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, 78271.516963999937, 39135.758482000092, 19567.879240999919, 9783.9396204999593, 4891.9698102499797, 2445.9849051249898, 1222.9924525624949, 611.49622628137968, 305.74811314055756, 152.87405657041106, 76.437028285073239, 38.21851414253662, 19.10925707126831, 9.5546285356341549, 4.7773142679493699, 2.3886571339746849, 1.1943285668550503, 0.59716428355981721, 0.29858214164761665, // 0.14929107082380833, // 0.074645535411904163, // 0.037322767705952081, // 0.018661383852976041 ]; var matrixIds = [], resolutions = []; for (var z = 0; z <= maxLevel; ++z) { resolutions[z] = rs[z]; // size / Math.pow(2, z); matrixIds[z] = z; } return { "resolutions": resolutions, "matrixIds": matrixIds }; } function fillZero(num, len, radix) { var str = num.toString(radix || 10); while (str.length < len) { str = '0' + str; } return str; } export default olMap;