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, 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 = {
|
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 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());
|
// });
|
|
|
}
|
},
|
getLayersExtent() {
|
// 缩放至图层范围
|
|
this.map.getView().fit(this.Layer.renderer_.renderedExtent_);
|
|
|
|
}
|
|
};
|
export default olMap;
|
