From 8259d48200ce9477ecbe16e8426161493211b593 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期五, 03 十一月 2023 13:25:07 +0800
Subject: [PATCH] 投影图层修改
---
src/views/baseMapSwitching/baseMapSwitching.vue | 1
public/config/projectData.js | 39 +++++++++
public/index.html | 2
src/views/Map/mapView.vue | 3
src/assets/js/Map/olMap.js | 178 ++++++++++++++++++++++++++-----------------
5 files changed, 151 insertions(+), 72 deletions(-)
diff --git a/public/config/projectData.js b/public/config/projectData.js
new file mode 100644
index 0000000..ac094fa
--- /dev/null
+++ b/public/config/projectData.js
@@ -0,0 +1,39 @@
+//鎶曞奖鍥惧眰閰嶇疆鏂囦欢
+var proDate = {
+ north: {
+ epsg: 'ESRI:103877',
+ centert: [-60823.5383, 104268.9228],
+ zoom: 2,
+ extent: [-8388908.78653284, -8388908.78653284, 8388908.78653284, 8388908.78653284]
+ },
+ south: {
+ epsg: 'ESRI:103878',
+ centert: [-10310.3907, 82483.1255],
+ zoom: 2,
+ extent: [-8388908.78653284, -8388908.78653284, 8388908.78653284, 8388908.78653284]
+ },
+ equid: {
+ epsg: 'ESRI:103881',
+ centert: [-6004022.53884588,9006030.6069231704],
+ zoom: 3,
+ extent: [ -5458202.576345907,
+ -5458202.576345907,
+ 5458196.673653597,
+ 5458196.673653597,
+
+
+ ]
+ },
+ near: {
+ epsg: 'ESRI:103880',
+ centert: [-297217.6127,625721.2899],
+ zoom: 2,
+ extent: [-12756243.1423311,-12727739.8740157,12756243.1423311, 12727739.8740157]
+ },
+ far: {
+ epsg: 'ESRI:103879',
+ centert: [-166557.0322,213534.6566],
+ zoom: 2,
+ extent: [-3474791.23059163,-3474791.23059153,3474791.23059163,3474791.23059153]
+ }
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 35fbe4a..7734da4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
<script src="./config/config.js"></script>
<script src="./proj4/rollups.js"></script>
-
+ <script src="./config/projectData.js"></script>
</head>
diff --git a/src/assets/js/Map/olMap.js b/src/assets/js/Map/olMap.js
index 8d58ab9..38568d1 100644
--- a/src/assets/js/Map/olMap.js
+++ b/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) {//鍒ゆ柇鏄惁涓篈rcgis鏈嶅姟
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({
- 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", //
- resolutions: res.resolutions
})
});
- olMap.map.addControl(mousePositionControl);
+
+ 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) {
- 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) {
diff --git a/src/views/Map/mapView.vue b/src/views/Map/mapView.vue
index 700643b..2a3604b 100644
--- a/src/views/Map/mapView.vue
+++ b/src/views/Map/mapView.vue
@@ -41,4 +41,7 @@
padding: 0;
position: absolute;
}
+.ol-mouse-position{
+ display: none !important;
+}
</style>
\ No newline at end of file
diff --git a/src/views/baseMapSwitching/baseMapSwitching.vue b/src/views/baseMapSwitching/baseMapSwitching.vue
index 03aeaa0..c90c887 100644
--- a/src/views/baseMapSwitching/baseMapSwitching.vue
+++ b/src/views/baseMapSwitching/baseMapSwitching.vue
@@ -67,6 +67,7 @@
projection.extent = [-90, -90, 90, 90];
}
// olMap.initMap();
+
olMap.addTreeData(res, projection);
activceIndex.value = res.id;
// store.state.restLayer = true;
--
Gitblit v1.9.3