|
@@ -1,7 +1,7 @@
|
|
|
// 引入OpenLayers的主模块
|
|
|
import Map from 'ol/Map';
|
|
|
import View from 'ol/View';
|
|
|
-import TileState from 'ol/TileState'
|
|
|
+import TileState from 'ol/TileState';
|
|
|
import Feature from 'ol/Feature';
|
|
|
import Point from 'ol/geom/Point';
|
|
|
import VectorLayer from 'ol/layer/Vector';
|
|
@@ -191,17 +191,12 @@ export class olMap {
|
|
|
// 添加新的图层
|
|
|
if (Array.isArray(options.id)) {
|
|
|
for (const layer of options.id) {
|
|
|
- if (typeof layer === 'string') {
|
|
|
- await this.formatXml(layer); // 等待当前 layer 处理完成
|
|
|
- } else {
|
|
|
- await this.formatXml(layer.id, layer.minZoom, layer.maxZoom, layer.zIndex, layer.visible); // 等待当前 layer 处理完成
|
|
|
- }
|
|
|
+ await this.formatXml(layer);
|
|
|
}
|
|
|
} else if (options.id === 'tianditu') {
|
|
|
await this.formatXml2();
|
|
|
} else if (options.id) {
|
|
|
- // 如果 options.id 不是数组,但确实是一个图层,则直接处理
|
|
|
- await this.formatXml(options.id, options.minZoom, options.maxZoom, options.zIndex, options.visible);
|
|
|
+ await this.formatXml(options);
|
|
|
}
|
|
|
// 创建Vector层并添加到地图上
|
|
|
this.vectorLayer = new VectorLayer({
|
|
@@ -238,18 +233,18 @@ export class olMap {
|
|
|
}
|
|
|
return `${baseUrl}${dataType}_${projType}/wmts?${paramsStr.slice(0, -1)}`;
|
|
|
}
|
|
|
- formatXml(code: string, minZoom?: number, maxZoom?: number, zIndex?: number, visible?: boolean) {
|
|
|
+ formatXml(options) {
|
|
|
const xml = new WMTSCapabilities();
|
|
|
- return this.getCapabilities(code).then((lists) => {
|
|
|
- const geojson = xml.read(lists.data);
|
|
|
- const data = geojson.Contents.Layer[0];
|
|
|
+ return this.getCapabilities(options.code).then((res) => {
|
|
|
+ const geoJson = xml.read(res.data);
|
|
|
+ const data = geoJson.Contents.Layer[0];
|
|
|
const layerParam = {
|
|
|
layerName: data.Abstract,
|
|
|
styleName: data.Identifier,
|
|
|
tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
|
|
|
format: data.Format[0]
|
|
|
};
|
|
|
- this.createWmsLayer(code, layerParam, minZoom, maxZoom, zIndex, visible);
|
|
|
+ this.createWmsLayer(options, layerParam);
|
|
|
});
|
|
|
}
|
|
|
|
|
@@ -261,9 +256,9 @@ export class olMap {
|
|
|
}
|
|
|
|
|
|
// 请求地图图片加载图层
|
|
|
- createWmsLayer(code, layerParam, minZoom = 0, maxZoom, zIndex = -1, visible = true) {
|
|
|
+ createWmsLayer(options, layerParam) {
|
|
|
const source = new WMTS({
|
|
|
- url: commonUrl + code,
|
|
|
+ url: commonUrl + options.code,
|
|
|
crossOrigin: 'Anonymous',
|
|
|
layer: layerParam.layerName,
|
|
|
style: layerParam.styleName,
|
|
@@ -275,13 +270,12 @@ export class olMap {
|
|
|
resolutions: resolutions,
|
|
|
matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21']
|
|
|
}),
|
|
|
- // 关键修改:自定义瓦片加载函数
|
|
|
tileLoadFunction: function (tile, src) {
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
xhr.open('GET', src);
|
|
|
|
|
|
// 添加自定义 Headers
|
|
|
- const headers = globalHeaders()
|
|
|
+ const headers = globalHeaders();
|
|
|
xhr.setRequestHeader('Authorization', headers.Authorization);
|
|
|
xhr.setRequestHeader('clientid', headers.clientid);
|
|
|
|
|
@@ -303,15 +297,12 @@ export class olMap {
|
|
|
}
|
|
|
});
|
|
|
const layer = new TileLayer({
|
|
|
- name: code,
|
|
|
source: source,
|
|
|
- zIndex: zIndex,
|
|
|
- minZoom: minZoom,
|
|
|
- maxZoom,
|
|
|
- visible: visible
|
|
|
+ zIndex: options.zIndex,
|
|
|
+ visible: options.visible
|
|
|
});
|
|
|
- layer.set('layerName', code);
|
|
|
-
|
|
|
+ layer.set('layerName', options.layer);
|
|
|
+ layer.set('id', options.code);
|
|
|
this.map.addLayer(layer);
|
|
|
}
|
|
|
|
|
@@ -582,32 +573,26 @@ export class olMap {
|
|
|
// 切换图层
|
|
|
async replaceLayers(newLayers, loadendFunc) {
|
|
|
// 遍历当前的所有图层并移除它们
|
|
|
- this.map.getLayers().forEach((layer) => {
|
|
|
- this.map.removeLayer(layer);
|
|
|
+ const layers = this.map.getLayers();
|
|
|
+ const layerArray = layers.getArray().slice();
|
|
|
+ layerArray.forEach((layer) => {
|
|
|
+ // 标注现在都是用同一个暂不移除'annotation'
|
|
|
+ if (!!layer && ['map'].includes(layer.get('layerName'))) {
|
|
|
+ layer.getSource().clear();
|
|
|
+ layer.dispose();
|
|
|
+ this.map.removeLayer(layer);
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
if (Array.isArray(newLayers)) {
|
|
|
for (const layer of newLayers) {
|
|
|
- if (typeof layer === 'string') {
|
|
|
- await this.formatXml(layer); // 等待当前 layer 处理完成
|
|
|
- } else {
|
|
|
- await this.formatXml(layer.id, layer.minZoom, layer.maxZoom, layer.zIndex, layer.visible); // 等待当前 layer 处理完成
|
|
|
- }
|
|
|
+ await this.formatXml(layer);
|
|
|
}
|
|
|
+ } else if (newLayers.id === 'tianditu') {
|
|
|
+ await this.formatXml2();
|
|
|
} else {
|
|
|
- // 如果 options.id 不是数组,但确实是一个图层,则直接处理
|
|
|
- await this.formatXml(newLayers.id, newLayers.minZoom, newLayers.maxZoom, newLayers.zIndex, newLayers.visible);
|
|
|
+ await this.formatXml(newLayers);
|
|
|
}
|
|
|
- // 创建Vector层并添加到地图上
|
|
|
- this.vectorLayer = new VectorLayer({
|
|
|
- source: new VectorSource({
|
|
|
- features: []
|
|
|
- })
|
|
|
- });
|
|
|
- this.map.addLayer(this.vectorLayer);
|
|
|
- const point = JSON.parse(JSON.stringify(this.markers));
|
|
|
- this.markers = [];
|
|
|
- this.addMarker(point);
|
|
|
if (loadendFunc) {
|
|
|
loadendFunc();
|
|
|
}
|
|
@@ -734,7 +719,7 @@ export class olMap {
|
|
|
this.map.addOverlay(this.infoWindow);
|
|
|
}
|
|
|
|
|
|
- hideInfo(flag) {
|
|
|
+ hideInfo(flag?: boolean) {
|
|
|
this.map.removeOverlay(this.infoWindow);
|
|
|
this.infoWindow = null;
|
|
|
if (!!flag && this.select) {
|
|
@@ -743,7 +728,7 @@ export class olMap {
|
|
|
}
|
|
|
/**
|
|
|
*
|
|
|
- * @param {Geojon} chaozhou 根据geojson对象创建Featrue对象
|
|
|
+ * @param {Geojon} chaozhou 根据geoJson对象创建Featrue对象
|
|
|
* @returns VectorLayer
|
|
|
*/
|
|
|
createVecByJson(json, options) {
|
|
@@ -807,7 +792,7 @@ export class olMap {
|
|
|
width: 2
|
|
|
})
|
|
|
}),
|
|
|
- zIndex: options.zIndex ? options.zIndex : 99
|
|
|
+ zIndex: options.zIndex ? options.zIndex : -97
|
|
|
});
|
|
|
// // 合并区边界
|
|
|
// const format = new GeoJSON();
|