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 | 375 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 291 insertions(+), 84 deletions(-)
diff --git a/src/assets/js/Map/olMap.js b/src/assets/js/Map/olMap.js
index 5b90955..f6b9e0f 100644
--- a/src/assets/js/Map/olMap.js
+++ b/src/assets/js/Map/olMap.js
@@ -1,6 +1,7 @@
import { getToken } from "@/utils/auth";
+import store from "@/store";
//閰嶇疆鏂囦欢鍦板潃
-import config from "./config";
+// import config from "../../../../public/config/config.js";
import { Map, View } from "ol"; //鍦板浘,瑙嗗浘
import OSM from "ol/source/OSM"; //鍙互鐞嗚В涓烘暟鎹簮,灏辨槸涓�寮犲浘鐗�
import TileLayer from "ol/layer/Tile"; //鍙互鐞嗚В涓哄浘灞�
@@ -8,49 +9,63 @@
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 } from "ol/proj.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: "ESRI:103881",
- extent: [-180, -90, 180, 90],
+ code: null,
+ extent: null,
},
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}",
- // }),
+ 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',
// });
- // 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"
- // );
- // register(proj4);
- const projection = new Projection({
- // code: this.projectionObj.code,
- code: "ESRI:103881",
- extent: [-180, -90, 180, 90],
- // extent: this.projectionObj.extent,
- });
- this.map = new Map({
- target: "mapView",
- layers: [], //AMapLayer, baiduMapLayer
- view: new View({
- projection: projection,
- center: [180, 90],
- zoom: 4,
- }),
- });
+ // 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;
- console.log(this.projectionObj);
+
//鍒ゆ柇鏄惁涓轰唬鐞�
if (treeNode.proxy) {
this.addProxyAddress(treeNode); //鏈変唬鐞�
@@ -90,6 +105,7 @@
},
//鏅�氬湴鍧�
addUrlAddress(res) {
+
switch (res.category) {
case 0: //鍏朵粬
break;
@@ -100,6 +116,9 @@
this.addGeoServerAddress(res);
break;
case 3: //鏁扮畝
+ this.addProxyAddress(res);
+ break;
+ case 4: //ArgisServer
this.addProxyAddress(res);
break;
}
@@ -145,6 +164,7 @@
var url;
if (res.proxy) {
const token = getToken();
+
url = config.proxy + res.proxy.replaceAll("{token}", token);
} else {
url = res.url;
@@ -152,71 +172,258 @@
return url;
},
deleteLayer() {
- if (this.Layer) {
+ if (this.map && this.Layer) {
this.map.removeLayer(this.Layer);
this.Layer = null;
}
},
+
addWmts(res) {
- this.deleteLayer();
- var url = this.getLayrUrl(res);
- const projection = new Projection({
- code: this.projectionObj.code,
- // extent: this.projectionObj.extent,
- // code: "ESRI:103879",
- extent: [-180, -90, 180, 90],
- });
- // var projection = getProjection("ESRI:103880");
- var projectionExtent = projection.getExtent();
+ this.initMap();
- var size = getWidth(projectionExtent) / 256;
- var resolutions = new Array(18);
- var matrixIds = new Array(18);
- for (var z = 1; z < 19; ++z) {
- // generate resolutions and matrixIds arrays for this WMTS
- resolutions[z] = size / Math.pow(2, z);
- matrixIds[z] = z;
- }
- this.Layer = new TileLayer({
- opacity: 0.7,
- source: new WMTS({
- url: url,
- layer: "img", //娉ㄦ剰姣忎釜鍥惧眰杩欓噷涓嶅悓
- matrixSet: "GoogleMapsCompatible",
- format: "image/png",
- style: "default",
- projection: projection,
- tileGrid: new WMTSTileGrid({
- origin: getTopLeft(projectionExtent), //鍘熺偣锛堝乏涓婅锛�
- resolutions: resolutions, //鍒嗚鲸鐜囨暟缁�
- matrixIds: matrixIds, //鐭╅樀鏍囪瘑鍒楄〃锛屼笌鍦板浘绾ф暟淇濇寔涓�鑷�
- }),
- wrapX: true,
- }),
- });
- 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());
- // });
-
-
+ if (res.category == 4) {//鍒ゆ柇鏄惁涓篈rcgis鏈嶅姟
+ addArcGisWmst(res);
+ } else {
+ addGeoWmst(res);
}
},
- getLayersExtent() {
- // 缂╂斁鑷冲浘灞傝寖鍥�
+};
- this.map.getView().fit(this.Layer.renderer_.renderedExtent_);
+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;
--
Gitblit v1.9.3