From 34a81cb796b9a4e862b1598d4dea56c32a68ea07 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期五, 03 十一月 2023 13:27:21 +0800
Subject: [PATCH] 投影图层修改
---
src/assets/js/Map/olMap.js | 442 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 422 insertions(+), 20 deletions(-)
diff --git a/src/assets/js/Map/olMap.js b/src/assets/js/Map/olMap.js
index fc5f47c..f6b9e0f 100644
--- a/src/assets/js/Map/olMap.js
+++ b/src/assets/js/Map/olMap.js
@@ -1,27 +1,429 @@
-
-import { Map, View } from "ol";//鍦板浘,瑙嗗浘
+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 } from "ol/proj";//灏嗗潗鏍囦粠缁忓害/绾害杞崲涓轰笉鍚岀殑鎶曞奖銆�
-import XYZ from "ol/source/XYZ"
+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 = {
- initMap() {
- //google鍦板浘
- var googleMapLayer = new TileLayer({
- source: new XYZ({
- url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}'
- })
- });
+ 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;
+ }
- var map = new Map({
- target: "mapView",
- layers: [googleMapLayer],//AMapLayer, baiduMapLayer
- view: new View({
- center: [10997148, 4569099],
- zoom: 4
- }),
- });
+ // 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) {//鍒ゆ柇鏄惁涓篈rcgis鏈嶅姟
+ 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);
}
-export default olMap;
\ No newline at end of file
+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;
--
Gitblit v1.9.3