Skip to content

Commit 52e1ff9

Browse files
chenxianhuiichenxianhuii
committed
[feature] mapboxgl、maplibregl提取MapExtend公共代码
1 parent 1fd562d commit 52e1ff9

File tree

5 files changed

+417
-475
lines changed

5 files changed

+417
-475
lines changed

‎src/common/util/MapExtend.js

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
2+
import { CustomOverlayLayer } from '../overlay/Base';
3+
4+
export function createMapExtendExtending(product) {
5+
const originMapProto = product.Map.prototype;
6+
return class MapExtend extends product.Map {
7+
constructor(options) {
8+
super(options);
9+
this.overlayLayersManager = {};
10+
}
11+
12+
addLayer(layer, before) {
13+
if (layer.source || layer.type === 'custom' || layer.type === 'background') {
14+
originMapProto.addLayer.call(this, layer, before);
15+
// overlay文件夹下的图层基本都是自定义图层， 除去几个专题图
16+
if (layer.overlay && !this.overlayLayersManager[layer.id]) {
17+
this.overlayLayersManager[layer.id] = layer;
18+
}
19+
return this;
20+
}
21+
if (this.overlayLayersManager[layer.id] || this.style._layers[layer.id]) {
22+
this.fire('error', {
23+
error: new Error('A layer with this id already exists.')
24+
});
25+
return;
26+
}
27+
layer.onAdd && layer.onAdd(this);
28+
this.overlayLayersManager[layer.id] = layer;
29+
return this;
30+
}
31+
32+
/**
33+
* @function listLayers
34+
* @category BaseTypes MapExtend
35+
* @version 11.2.0
36+
* @description 扩展mapboxgl.Map， 获取所有叠加图层;
37+
* @returns {Array} 图层数组。
38+
*/
39+
listLayers() {
40+
const layerList = [];
41+
const originLayers = this.style._order || [];
42+
layerList.push(...originLayers);
43+
for (let key in this.overlayLayersManager) {
44+
const layer = this.overlayLayersManager[key];
45+
const layerId = layer.id;
46+
if (!layerList.includes(layerId)) {
47+
layerList.push(layerId);
48+
}
49+
}
50+
return layerList;
51+
}
52+
53+
getLayer(id) {
54+
const overlayLayer = this.overlayLayersManager[id];
55+
if (overlayLayer) {
56+
return overlayLayer.getLayer ? overlayLayer.getLayer() : overlayLayer;
57+
}
58+
return this.style.getLayer(id);
59+
}
60+
61+
moveLayer(id, beforeId) {
62+
if (this.overlayLayersManager[id]) {
63+
this.overlayLayersManager[id].moveLayer
64+
? this.overlayLayersManager[id].moveLayer(id, beforeId)
65+
: this._moveToHandler(id, beforeId, product);
66+
return this;
67+
}
68+
if (this.style._layers[id]) {
69+
this.style.moveLayer(id, beforeId);
70+
this._update(true);
71+
}
72+
return this;
73+
}
74+
75+
removeLayer(id) {
76+
if (this.overlayLayersManager[id]) {
77+
const layer = this.overlayLayersManager[id];
78+
delete this.overlayLayersManager[id];
79+
if (layer.type !== 'custom') {
80+
if (layer.removeFromMap) {
81+
layer.removeFromMap();
82+
}
83+
return this;
84+
}
85+
}
86+
this.style.removeLayer(id);
87+
this._update(true);
88+
return this;
89+
}
90+
91+
// 目前扩展的 overlayer，只支持显示或隐藏图层操作
92+
setLayoutProperty(layerID, name, value) {
93+
const overlayLayer = this.overlayLayersManager[layerID];
94+
if (overlayLayer) {
95+
if (overlayLayer.setLayoutProperty) {
96+
overlayLayer.setLayoutProperty(name, value);
97+
this.style.fire('data', { dataType: 'style' });
98+
}
99+
return this;
100+
}
101+
this.style.setLayoutProperty(layerID, name, value);
102+
this._update(true);
103+
return this;
104+
}
105+
106+
updateTransform(units, originX, originY, centerX, centerY, width, height) {
107+
this.transform.units = units;
108+
const mercatorZfromAltitude = this.mercatorZfromAltitude;
109+
product.MercatorCoordinate.fromLngLat = function (lngLatLike, altitude) {
110+
altitude = altitude || 0;
111+
const lngLat = product.LngLat.convert(lngLatLike);
112+
return new product.MercatorCoordinate(
113+
(lngLat.lng - originX) / width,
114+
(originY - lngLat.lat) / height,
115+
mercatorZfromAltitude(altitude, lngLat.lat)
116+
);
117+
};
118+
product.MercatorCoordinate.prototype.toLngLat = function () {
119+
return new product.LngLat(this.x * width + originX, originY - this.y * height);
120+
};
121+
this.customConvertPoint = window.URL.createObjectURL(
122+
new Blob(
123+
[
124+
'customConvertPoint = {projectX:function(x){return (x - ' +
125+
centerX +
126+
') / ' +
127+
width +
128+
' + 0.5},projectY:function(y){y = 0.5 - ((y - ' +
129+
centerY +
130+
') / ' +
131+
height +
132+
');return y < 0 ? 0 : y > 1 ? 1 : y;},toY:function(y){return (0.5-y)*' +
133+
height +
134+
'+' +
135+
centerY +
136+
';}}'
137+
],
138+
{ type: 'text/javascript' }
139+
)
140+
);
141+
}
142+
143+
getPaintProperty(layerId, name) {
144+
const overlayLayer = this.overlayLayersManager[layerId];
145+
if (overlayLayer) {
146+
if (overlayLayer.getPaintProperty) {
147+
return overlayLayer.getPaintProperty(name);
148+
}
149+
return;
150+
}
151+
return originMapProto.getPaintProperty.call(this, layerId, name);
152+
}
153+
154+
getLayoutProperty(layerId, name) {
155+
const overlayLayer = this.overlayLayersManager[layerId];
156+
if (overlayLayer) {
157+
if (overlayLayer.getLayoutProperty) {
158+
return overlayLayer.getLayoutProperty(name);
159+
}
160+
return;
161+
}
162+
return originMapProto.getLayoutProperty.call(this, layerId, name);
163+
}
164+
165+
getFilter(layerId, filter, options) {
166+
const overlayLayer = this.overlayLayersManager[layerId];
167+
if (overlayLayer) {
168+
if (overlayLayer.getFilter) {
169+
return overlayLayer.getFilter(filter, options);
170+
}
171+
return;
172+
}
173+
return originMapProto.getFilter.call(this, layerId, filter, options);
174+
}
175+
176+
setFilter(layerId, filter, options) {
177+
const overlayLayer = this.overlayLayersManager[layerId];
178+
if (overlayLayer) {
179+
if (overlayLayer.setFilter) {
180+
overlayLayer.setFilter(filter, options);
181+
}
182+
return this;
183+
}
184+
return originMapProto.setFilter.call(this, layerId, filter, options);
185+
}
186+
187+
on(type, layerId, listener) {
188+
return this._eventsModeHandler({ type, layerId, listener, mode: 'on' });
189+
}
190+
191+
once(type, layerId, listener) {
192+
return this._eventsModeHandler({ type, layerId, listener, mode: 'once' });
193+
}
194+
195+
off(type, layerId, listener) {
196+
return this._eventsModeHandler({ type, layerId, listener, mode: 'off' });
197+
}
198+
199+
queryRenderedFeatures(geometry, options) {
200+
let overlayLayers = Object.keys(this.overlayLayersManager);
201+
let layersOnMap;
202+
if (options && options.layers) {
203+
overlayLayers = options.layers.filter(item => this.overlayLayersManager[item]);
204+
layersOnMap = options.layers.filter(item => !this.overlayLayersManager[item]);
205+
}
206+
const nextGeometry = geometry || [[0, 0], [this.transform.width, this.transform.height]];
207+
const nextOptions = options || {};
208+
delete nextOptions.layers;
209+
const resultOnOverlayerLayers = overlayLayers.reduce((result, item) => {
210+
const overlayLayer = this.overlayLayersManager[item];
211+
if (overlayLayer.query && overlayLayer.queryRenderedFeatures) {
212+
overlayLayer.queryRenderedFeatures(nextGeometry, nextOptions, (features) => {
213+
result = result.concat(features);
214+
});
215+
}
216+
return result;
217+
}, []);
218+
const resultOnMapLayers = originMapProto.queryRenderedFeatures.call(this, geometry, { ...options, layers: layersOnMap });
219+
return resultOnMapLayers.concat(resultOnOverlayerLayers);
220+
}
221+
222+
querySourceFeatures(sourceId, paramters) {
223+
const customOverlayerLayer = Object.values(this.overlayLayersManager).find(item => item.sourceId === sourceId && item instanceof CustomOverlayLayer);
224+
if (customOverlayerLayer) {
225+
if (customOverlayerLayer.query) {
226+
return customOverlayerLayer.querySourceFeatures(paramters);
227+
}
228+
return;
229+
}
230+
return originMapProto.querySourceFeatures.call(this, sourceId, paramters);
231+
}
232+
233+
getSource(sourceId) {
234+
const customOverlayerLayer = Object.values(this.overlayLayersManager).find(item => item.sourceId === sourceId && item instanceof CustomOverlayLayer);
235+
if (customOverlayerLayer) {
236+
return customOverlayerLayer.getSource();
237+
}
238+
return originMapProto.getSource.call(this, sourceId);
239+
}
240+
241+
removeSource(sourceId) {
242+
const customOverlayerLayer = Object.values(this.overlayLayersManager).find(item => item.sourceId === sourceId && item instanceof CustomOverlayLayer);
243+
if (customOverlayerLayer) {
244+
return customOverlayerLayer.removeSource();
245+
}
246+
return originMapProto.removeSource.call(this, sourceId);
247+
}
248+
249+
isSourceLoaded(sourceId) {
250+
const customOverlayerLayer = Object.values(this.overlayLayersManager).find(item => item.sourceId === sourceId && item instanceof CustomOverlayLayer);
251+
if (customOverlayerLayer) {
252+
return customOverlayerLayer.isSourceLoaded();
253+
}
254+
return originMapProto.isSourceLoaded.call(this, sourceId);
255+
}
256+
257+
_eventsModeHandler({ type, layerId, listener, mode }) {
258+
let layers = [];
259+
if (listener) {
260+
layers = layers.concat(layerId);
261+
}
262+
layers.forEach(id => {
263+
const overlayLayer = this.overlayLayersManager[id] || {};
264+
if (overlayLayer.interaction && overlayLayer[mode] && overlayLayer.events.includes(type)) {
265+
overlayLayer[mode](type, listener || layerId);
266+
}
267+
});
268+
const layerIdsOnMap = listener && layers.filter(id => !this.overlayLayersManager[id]);
269+
if (layerIdsOnMap && !layerIdsOnMap.length) {
270+
return this;
271+
}
272+
const nextLayerId = !layerIdsOnMap || typeof layerId === 'string' ? layerId : layerIdsOnMap;
273+
return originMapProto[mode].call(this, type, nextLayerId, listener);
274+
}
275+
276+
/**
277+
* @description 将图层移动到某个图层之前。
278+
* @param {string} layerID -待插入的图层 ID。
279+
* @param {boolean} [beforeLayerID] - 是否将本图层插入到图层 ID 为 layerID 的图层之前(如果为 false 则将本图层插入到图层 ID 为 layerID 的图层之后)。
280+
*/
281+
_moveToHandler(layerID, beforeLayerID) {
282+
const layer = document.getElementById(layerID);
283+
let beforeLayer;
284+
if (beforeLayerID) {
285+
beforeLayer = document.getElementById(beforeLayerID);
286+
if (!beforeLayer) {
287+
product.Evented.prototype.fire('error', {
288+
error: new Error(`Layer with id "${beforeLayerID}" does not exist on this document.`)
289+
});
290+
}
291+
}
292+
if (layer) {
293+
if (beforeLayer) {
294+
beforeLayer.parentNode.insertBefore(layer, beforeLayer);
295+
} else {
296+
//当没有传入beforeLayerID ，则默认将图层移动到最上面
297+
layer.parentNode.appendChild(layer);
298+
}
299+
}
300+
}
301+
302+
}
303+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy