Skip to content

Commit 9a52882

Browse files
MyShallowTimeMyShallowTime
committed
[feature]
1、symbol文件移动到mapboxgl下 2、map扩展addSymbolLibrary 3、新增symbol文件，resources review by zhaoq
1 parent 71db1b3 commit 9a52882

File tree

8,913 files changed

+4722
-401
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

8,913 files changed

+4722
-401
lines changed

‎src/mapboxgl/core/MapExtend.js

Lines changed: 38 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
/* Copyright© 2000 - 2022 SuperMap Software Co.Ltd. All rights reserved.
22
* This program are made available under the terms of the Apache License, Version 2.0
33
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
4-
import { Util } from '@supermap/iclient-common/commontypes/Util';
5-
// import mapboxgl from 'mapbox-gl';
6-
import CompositeLayersManager from '../../symbol/CompositeLayersManager';
7-
import SymbolLayerManager from '../../symbol/SymbolLayerManager';
8-
import SymbolManager from '../../symbol/SymbolManager';
4+
import mapboxgl from 'mapbox-gl';
5+
import CompositeLayer from '../symbol/CompositeLayer';
6+
import SymbolLayer from '../symbol/SymbolLayer';
7+
import Symbol from '../symbol/Symbol';
98

109
/**
1110
* @function MapExtend
1211
* @description 扩展了 mapboxgl.Map 对图层相关的操作。
1312
* @private
1413
*/
15-
const mapboxgl = window.mapboxgl;
14+
// const mapboxgl = window.mapboxgl;
1615
export var MapExtend = (function () {
1716
mapboxgl.Map.prototype.overlayLayersManager = {};
18-
mapboxgl.Map.prototype.compositeLayersManager = CompositeLayersManager();
19-
mapboxgl.Map.prototype.symbolLayerManager = SymbolLayerManager();
20-
mapboxgl.Map.prototype.symbolManager = new SymbolManager();
17+
mapboxgl.Map.prototype.compositeLayersManager = CompositeLayer();
18+
mapboxgl.Map.prototype.symbolLayerManager = SymbolLayer();
19+
mapboxgl.Map.prototype.symbolManager = new Symbol();
2120

2221
if (mapboxgl.Map.prototype.addLayerBak === undefined) {
2322
mapboxgl.Map.prototype.addLayerBak = mapboxgl.Map.prototype.addLayer;
@@ -148,58 +147,42 @@ export var MapExtend = (function () {
148147
}
149148
}
150149

151-
const addImageToMap = (map, url) => {
152-
return new Promise((resolve) => {
153-
map.loadImage(url, (_error, image) => {
154-
if(_error) {
155-
resolve(undefined);
156-
return;
157-
}
158-
const id = Util.createUniqueID('SuperMap.Symbol_');
159-
map.addImage(id, image);
160-
// 为了解决sdf问题，需要把load后的image信息存下
161-
map.symbolManager.addImageInfo(id, image);
162-
resolve(id);
163-
});
164-
});
165-
};
166-
167-
const getSymbol = (symbolId) => {
168-
// eslint-disable-next-line import/no-dynamic-require
169-
const symbolInfo = require(`../../../examples/mapboxgl-v2/static/symbols/${symbolId.split('-')[0]}/${symbolId}.json`);
170-
return JSON.parse(JSON.stringify(symbolInfo));
171-
}
172-
173-
// 从symbol中获取图片url
174-
const getImageUrl = (map, symbol) => {
175-
return map.symbolLayerManager(map).getImageUrl(symbol);
176-
}
177-
178-
// 更新symbol的图片参数为图片id。imageUrl => imageId
179-
const updateImageProperty = (map, symbol, imageId) => {
180-
map.symbolLayerManager(map).updateImageProperty(symbol, imageId);
150+
mapboxgl.Map.prototype.addSymbolLibrary = async function (symbolLibrary) {
151+
mapboxgl.Map.prototype.symbolLibrary = symbolLibrary;
181152
}
182153

183154
mapboxgl.Map.prototype.loadSymbol = async function (symbol, callback) {
184155
let error;
185-
const symbolInfo = typeof symbol === 'string' ? await getSymbol(symbol) : symbol;
186-
const imageUrl = getImageUrl(this, symbolInfo);
187-
if(!symbolInfo) {
188-
error = {
189-
message: 'this symbol is not exists.'
190-
}
191-
} else if(imageUrl) {
192-
// 如果需要使用到image 的需要loadimage
193-
const imageId = await addImageToMap(this, imageUrl);
194-
if(!imageId) {
195-
error = {
196-
message: 'this symbol.image is not found.'
156+
let symbolInfo = symbol;
157+
if(typeof symbol === 'string') {
158+
symbolInfo = this.symbolManager.getSymbol(symbol);
159+
if (!symbolInfo) {
160+
if(!this.symbolLibrary) {
161+
error = {
162+
message: 'symbolLibrary is not exists. please "addSymbolLibrary'
163+
};
164+
callback(error);
165+
return;
166+
}
167+
const symbolResult = await this.symbolLibrary.getSymbol?.(symbol);
168+
if(!symbolResult) {
169+
error = {
170+
message: 'This symbol is not exists.'
171+
};
172+
} else {
173+
const {value, image} = symbolResult;
174+
symbolInfo = value;
175+
const {type, name} = this.symbolLayerManager(this).getImageKey(value);
176+
const id = value[type]?.[name];
177+
if(id) {
178+
// 如果需要使用到image 的需要addImage
179+
this.addImage(id, image);
180+
// 为了解决sdf问题，需要把load后的image信息存下
181+
this.symbolManager.addImageInfo(id, image);
182+
}
197183
}
198-
} else {
199-
updateImageProperty(this, symbolInfo, imageId);
200184
}
201185
}
202-
// 这里需不需要创建对应的符号类?
203186
callback(error, symbolInfo);
204187
};
205188

@@ -273,4 +256,4 @@ export var MapExtend = (function () {
273256
}
274257
}
275258
})();
276-
window.mapboxgl = mapboxgl;
259+
// window.mapboxgl = mapboxgl;

‎src/symbol/CompositeLayersManager.js renamed to ‎src/mapboxgl/symbol/CompositeLayer.js

File renamed without changes.

‎src/symbol/SymbolManager.js renamed to ‎src/mapboxgl/symbol/Symbol.js

File renamed without changes.

‎src/symbol/MapboxSymbolLayerManager.js renamed to ‎src/mapboxgl/symbol/SymbolLayer.js

Lines changed: 34 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
import {LayerType} from "./DefaultValue";
21
import { Util } from "@supermap/iclient-common/commontypes/Util";
3-
import {isArray} from "lodash";
2+
import { isArray } from "lodash";
3+
4+
const LayerType = {
5+
circle: 'circle',
6+
symbol: 'symbol',
7+
line: 'line',
8+
fill: 'fill'
9+
}
410

511
// 判断符号类型
612
const GET_TYPE_RULE = [{
@@ -13,11 +19,12 @@ const GET_TYPE_RULE = [{
1319
prefix: 'circle-',
1420
type: LayerType.circle
1521
}];
22+
1623
/**
1724
* 符号图层管理器
1825
* @returns {Object}
1926
*/
20-
const MapboxSymbolLayerManager = (m) => {
27+
const MapboxSymbolLayer = (m) => {
2128
const map = m;
2229
return {
2330
/**
@@ -105,7 +112,7 @@ const MapboxSymbolLayerManager = (m) => {
105112
return;
106113
}
107114
//换成最新的数据结构, 暂时不考虑数组情况
108-
if(!symbolInfo.length) {
115+
if (!symbolInfo.length) {
109116
symbolInfos[value] = symbolInfo;
110117
}
111118
}
@@ -135,7 +142,7 @@ const MapboxSymbolLayerManager = (m) => {
135142
getExpresionLineLayers(layer, symbol) {
136143
const layers = [];
137144
const filter = ["all"];
138-
if(layer.filter) {
145+
if (layer.filter) {
139146
filter.push(layer.filter);
140147
}
141148
const expression = symbol.slice(2);
@@ -209,12 +216,12 @@ const MapboxSymbolLayerManager = (m) => {
209216
* @returns
210217
*/
211218
getSymbolType(symbol) {
212-
const {paint = {}, layout = {}} = symbol;
219+
const { paint = {}, layout = {} } = symbol;
213220
const keys = Object.keys(paint).concat(Object.keys(layout));
214221
let type;
215-
for(const v of GET_TYPE_RULE) {
222+
for (const v of GET_TYPE_RULE) {
216223
const isMatch = keys.some(k => k.startsWith(v.prefix));
217-
if(isMatch) {
224+
if (isMatch) {
218225
type = v.type;
219226
break;
220227
}
@@ -285,14 +292,14 @@ const MapboxSymbolLayerManager = (m) => {
285292
* @param symbol
286293
*/
287294
setSimpleSymbol(layerId, symbol) {
288-
const layers = map.getStyle().layers, layer = layers.find(l => l.id === layerId);
289-
if(!layer) {return;}
295+
const layers = map.getStyle().layers, layer = layers.find(l => l.id === layerId);
296+
if (!layer) { return; }
290297

291-
const {paint: oldPaint = {}, layout: oldLayout = {}} = layer;
298+
const { paint: oldPaint = {}, layout: oldLayout = {} } = layer;
292299
const layerInfo = symbol;
293-
const {paint = {}, layout = {}} = layerInfo, paintKeys = Object.keys(paint).concat(Object.keys(oldPaint)),
300+
const { paint = {}, layout = {} } = layerInfo, paintKeys = Object.keys(paint).concat(Object.keys(oldPaint)),
294301
layoutKeys = Object.keys(layout).concat(Object.keys(oldLayout));
295-
302+
296303
Array.from(new Set(paintKeys)).forEach(key => {
297304
map.setPaintProperty(layerId, key, paint[key]);
298305
});
@@ -342,52 +349,28 @@ const MapboxSymbolLayerManager = (m) => {
342349
type: 'layout',
343350
name: 'icon-image'
344351
},
345-
[LayerType.line]: {
352+
[LayerType.line]: {
346353
type: 'paint',
347-
name: 'line-pattern'
354+
name: 'line-pattern'
348355
},
349-
[LayerType.fill]: {
356+
[LayerType.fill]: {
350357
type: 'paint',
351-
name: 'fill-pattern'
358+
name: 'fill-pattern'
352359
}
353360
}
354361
const result = IMAGE_MAPBOX_KEY[symbolType];
355362
return result;
356-
},
357-
/**
358-
* 更新符号图片对应的属性值
359-
* @param {*} symbol
360-
* @param {*} imageId
361-
* @returns
362-
*/
363-
updateImageProperty(symbol, imageId) {
364-
const {type, name} = this.getImageKey(symbol);
365-
symbol[type][name] = imageId;
366-
return symbol;
367-
},
368-
/**
369-
* 获取符号中关于图片的属性值
370-
* @param {*} symbol
371-
* @returns
372-
*/
373-
getImageUrl(symbol) {
374-
// 图片出图的只会是单图层
375-
if(isArray(symbol)) {return;}
376-
377-
const {type, name} = this.getImageKey(symbol);
378-
const imageId = symbol[type]?.[name];
379-
if(!imageId) {return;}
380-
381-
const dirType = {
382-
[LayerType.circle]: 'point',
383-
[LayerType.symbol]: 'point',
384-
[LayerType.line]: 'line',
385-
[LayerType.fill]: 'polygon'
386-
}
387-
const layerType = this.getSymbolType(symbol);
388-
return `../static/images/${dirType[layerType]}/${imageId}.png`
389363
}
390364
}
391365
};
392366

393-
export default MapboxSymbolLayerManager;
367+
const SymbolLayer = () => {
368+
let result;
369+
return (map) => {
370+
if (!result) {
371+
result = MapboxSymbolLayer(map);
372+
}
373+
return result;
374+
}
375+
}
376+
export default SymbolLayer;

‎src/maplibregl/core/MapExtend.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
* This program are made available under the terms of the Apache License, Version 2.0
33
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
44
import { Util } from '@supermap/iclient-common/commontypes/Util';
5-
import CompositeLayersManager from '../../symbol/CompositeLayersManager';
6-
import SymbolLayerManager from '../../symbol/SymbolLayerManager';
7-
import SymbolManager from '../../symbol/SymbolManager';
5+
import CompositeLayer from '../../mapboxgl/symbol/CompositeLayer';
6+
import SymbolLayer from '../../mapboxgl/symbol/SymbolLayer';
7+
import Symbol from '../../mapboxgl/symbol/Symbol';
88

99
/**
1010
* @function MapExtend
@@ -13,9 +13,9 @@ import SymbolManager from '../../symbol/SymbolManager';
1313
*/
1414
const maplibregl = window.maplibregl;
1515
export var MapExtend = (function () {
16-
maplibregl.Map.prototype.compositeLayersManager = CompositeLayersManager();
17-
maplibregl.Map.prototype.symbolLayerManager = SymbolLayerManager();
18-
maplibregl.Map.prototype.symbolManager = new SymbolManager();
16+
maplibregl.Map.prototype.compositeLayersManager = CompositeLayer();
17+
maplibregl.Map.prototype.symbolLayerManager = SymbolLayer();
18+
maplibregl.Map.prototype.symbolManager = new Symbol();
1919

2020
if (maplibregl.Map.prototype.iclientAddLayer === undefined) {
2121
maplibregl.Map.prototype.iclientAddLayer = maplibregl.Map.prototype.addLayer;

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