From e603818514e4849cd71c1df6f621a70dc019d156 Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期五, 01 九月 2023 17:56:57 +0800
Subject: [PATCH] 样式修改，openlayer加载影像（未完成）
---
src/assets/js/Map/olMap.js | 221 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 198 insertions(+), 23 deletions(-)
diff --git a/src/assets/js/Map/olMap.js b/src/assets/js/Map/olMap.js
index fc5f47c..696d1e5 100644
--- a/src/assets/js/Map/olMap.js
+++ b/src/assets/js/Map/olMap.js
@@ -1,27 +1,202 @@
-
-import { Map, View } from "ol";//鍦板浘,瑙嗗浘
+import { getToken } from "@/utils/auth";
+//閰嶇疆鏂囦欢鍦板潃
+import config from "./config";
+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 } from "ol/proj.js";
+import { register } from "ol/proj/proj4";
+
+import { getTopLeft, getWidth } from "ol/extent.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: "ESRI:103881",
+ extent: [-180, -90, 180, 90],
+ },
+ 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}",
+ // }),
+ // });
+ // 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,
+ }),
+ });
+ },
+ addTreeData(treeNode, obj) {
+ // this.delLayerAll();
+ this.projectionObj = obj;
+ console.log(this.projectionObj);
+ //鍒ゆ柇鏄惁涓轰唬鐞�
+ 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;
+ }
+ },
+ 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.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();
- var map = new Map({
- target: "mapView",
- layers: [googleMapLayer],//AMapLayer, baiduMapLayer
- view: new View({
- center: [10997148, 4569099],
- zoom: 4
- }),
- });
-
- },
-}
-export default olMap;
\ No newline at end of file
+ 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);
+ }
+ },
+};
+export default olMap;
--
Gitblit v1.9.3