import { getToken } from "@/utils/auth";
|
//配置文件地址
|
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 } 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 store from "@/store";
|
const olMap = {
|
map: null,
|
Layer: null,
|
projectionObj: {
|
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}",
|
// }),
|
// });
|
// 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);
|
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,
|
code: this.projectionObj.code,
|
extent: this.projectionObj.extent,
|
// 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;
|
}
|
},
|
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: this.projectionObj.extent,
|
});
|
|
if (this.map) {
|
this.map.values_.view.projection_ = projection
|
}
|
|
// var projection = getProjection("ESRI:103880");
|
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) {
|
// 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);
|
this.map.getView().fit(this.projectionObj.extent);
|
|
}
|
},
|
|
|
};
|
export default olMap;
|
