From b7e62ad2625121586b1254dab69b3c3d38da71de Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期二, 31 十月 2023 17:31:10 +0800
Subject: [PATCH] 投影图层修改，在线制图修改
---
src/assets/js/Map/olMap.js | 408 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 387 insertions(+), 21 deletions(-)
diff --git a/src/assets/js/Map/olMap.js b/src/assets/js/Map/olMap.js
index fc5f47c..8d58ab9 100644
--- a/src/assets/js/Map/olMap.js
+++ b/src/assets/js/Map/olMap.js
@@ -1,27 +1,393 @@
+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 { 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 { 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,
+ projectionObj: {
+ code: null,
+ extent: null,
+ },
+ initMap() {
+ 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 = olMap.getLayrUrl(res);
+
+ const projection = new ol.proj.Projection({
+ code: olMap.projectionObj.code,
+ extent: olMap.projectionObj.extent,
+ });
+ var mapCode = olMap.projectionObj.code;
+ initPolarCoord(mapCode)
+ ol.proj.addProjection(projection);
+ var projectionExtent = projection.getExtent();
+ var size = ol.extent.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({
+ 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 arcgisLayer = new ol.layer.Tile({
+ source: new ol.source.XYZ({
+ url: url,
+ layer: "img", //娉ㄦ剰姣忎釜鍥惧眰杩欓噷涓嶅悓
+ matrixSet: "GoogleMapsCompatible",
+ format: "image/png",
+ style: "default",
+ projection: projection,
+ tileGrid: new ol.tilegrid.TileGrid({
+ origin: ol.extent.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);
}
-export default olMap;
\ No newline at end of file
+
+
+
+
+
+
+
+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"
+ }
+ initPolarCoord(mapCode)
+ 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 = "ESRI:103877"; // 鍘熷鍧愭爣绯讳负缁忕含搴�
+ var destProj = "ESRI:104903"; // 鐩爣鍧愭爣绯讳负澧ㄥ崱鎵樻姇褰�
+ var olLon = coordinate[0]
+ var olLat = coordinate[1];
+ 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: [arcgisLayer],
+ view: new ol.View({
+ center: [18577254.760, -18629510.055],
+ zoom: 5,
+ minZoom: 1,
+ maxZoom: 12,
+ controls: [mousePositionControl],
+ projection: ol.proj.get(mapCode), // "ESRI:103877", //
+ resolutions: res.resolutions
+ })
+ });
+ olMap.map.addControl(mousePositionControl);
+}
+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");
+ 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:104903", "+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