Skip to content

Commit 708f7c0

Browse files
Merge branch 'master' of github.com:MyShallowTime/iClient-JavaScript
2 parents 3286e2b + 4d2f046 commit 708f7c0

File tree

10 files changed

+33265
-39152
lines changed

10 files changed

+33265
-39152
lines changed

examples/mapboxgl-v2/libs/mapboxgl/iclient-mapboxgl.js

Lines changed: 32500 additions & 39004 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

examples/mapboxgl-v2/src/application/App.tsx

Lines changed: 77 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import './style';
44
import { isArray, uniqueId } from 'lodash';
55
import { getMapboxKey, isPaintKey } from '../utils/StyleSettingUtil';
66
// import '../../../../src/mapboxgl/core/MapExtend';
7-
import {getSymbolBaseUrl} from '../utils/symbol-resource-util'
7+
import {getSymbolBaseUrl} from '../utils/symbol-resource-util';
8+
89
const SET_PROPERTY_RULE = {
910
paint: 'setPaintProperty',
1011
layout: 'setLayoutProperty'
@@ -21,7 +22,7 @@ const App = () => {
2122

2223
const onLoadedMap = async (map: any) => {
2324
const url = getSymbolBaseUrl();
24-
(window as any).mapboxgl.supermap.WebSymbol.symbolUrl = url;
25+
(window as any).mapboxgl.supermap.WebSymbol.basePath = url;
2526
setMap(map);
2627
}
2728

@@ -30,8 +31,8 @@ const App = () => {
3031
const { symbolId, style = {} } = preSymbolInfo;
3132
const id = uniqueId();
3233
await map.loadSymbol(symbolId, (_err, symbol) => {
33-
style.paint && Object.assign(symbol.paint, style.paint);
34-
style.layout && Object.assign(symbol.layout, style.layout);
34+
style.paint && Object.assign(symbol.paint, style.paint);
35+
style.layout && Object.assign(symbol.layout, style.layout);
3536
map.addSymbol(id, symbol);
3637
});
3738
return { id, symbolId };
@@ -55,7 +56,7 @@ const App = () => {
5556
symbol: any;
5657
layersInfo: any;
5758
}): void => {
58-
const {layerId, sourceLayer, type, layerType, symbol, layersInfo} = options;
59+
const { layerId, sourceLayer, type, layerType, symbol, layersInfo } = options;
5960
const { id, symbolId } = symbol;
6061
if (type !== 'text') {
6162
layersInfo.push({ id: layerId, type, sourceLayer, url, symbolId });
@@ -146,87 +147,80 @@ const App = () => {
146147
});
147148

148149
addMVTLayer({
149-
layerId:'chinaPolygon',
150-
sourceLayer:'China_Province_pg@China',
151-
type:'polygon',
150+
layerId: 'chinaPolygon',
151+
sourceLayer: 'China_Province_pg@China',
152+
type: 'polygon',
152153
layerType: 'fill',
153154
symbol: chinaSymbol,
154155
layersInfo: newLayersInfo
155156
});
156157
addMVTLayer({
157-
layerId:'riverpolygon',
158+
layerId: 'riverpolygon',
158159
sourceLayer: 'Main_River_pg@China',
159-
type:'polygon',
160+
type: 'polygon',
160161
layerType: 'fill',
161162
symbol: riverPolygonSymbol,
162163
layersInfo: newLayersInfo
163164
});
164165
addMVTLayer({
165-
layerId:'riverLine',
166-
sourceLayer: 'Main_River_ln@China',
167-
type:'line',
166+
layerId: 'riverLine',
167+
sourceLayer: 'Main_River_ln@China',
168+
type: 'line',
168169
layerType: 'line',
169170
symbol: riverLineSymbol,
170171
layersInfo: newLayersInfo
171172
});
172173
addMVTLayer({
173-
layerId:'provinceLine',
174+
layerId: 'provinceLine',
174175
sourceLayer: 'China_Province_ln@China',
175-
type:'line',
176+
type: 'line',
176177
layerType: 'line',
177178
symbol: provinceLineSymbol,
178179
layersInfo: newLayersInfo
179180
});
180181
addMVTLayer({
181-
layerId:'mainRoadLine',
182-
sourceLayer: 'Main_Road_L@China',
183-
type:'line',
182+
layerId: 'mainRoadLine',
183+
sourceLayer: 'Main_Road_L@China',
184+
type: 'line',
184185
layerType: 'line',
185186
symbol: MainRoadLineLineSymbol,
186187
layersInfo: newLayersInfo
187188
});
188189
addMVTLayer({
189-
layerId:'capital',
190-
sourceLayer: 'China_Capital_pt@China',
191-
type:'point',
190+
layerId: 'capital',
191+
sourceLayer: 'China_Capital_pt@China',
192+
type: 'point',
192193
layerType: 'symbol',
193194
symbol: capitalSymbol,
194195
layersInfo: newLayersInfo
195196
});
196197
addMVTLayer({
197-
layerId:'city',
198+
layerId: 'city',
198199
sourceLayer: 'China_ProCenCity_pt@China',
199-
type:'point',
200+
type: 'point',
200201
layerType: 'symbol',
201202
symbol: citySymbol,
202203
layersInfo: newLayersInfo
203204
});
204205
addMVTLayer({
205-
layerId:'nationText',
206+
layerId: 'nationText',
206207
sourceLayer: 'China_Nation_B_pt@China',
207-
type:'text',
208+
type: 'text',
208209
layerType: 'symbol',
209210
symbol: nationTextSymbol,
210211
layersInfo: newLayersInfo
211212
});
212213
addMVTLayer({
213-
layerId:'cityText',
214+
layerId: 'cityText',
214215
sourceLayer: 'China_ProCenCity_pt@China',
215-
type:'text',
216+
type: 'text',
216217
layerType: 'symbol',
217218
symbol: cityTextSymbol,
218219
layersInfo: newLayersInfo
219220
});
220221
setLayersInfo(newLayersInfo.reverse());
221222
};
222223

223-
const hideSymbol = (symbol) => {
224-
isArray(symbol) ?
225-
symbol.forEach(s => {
226-
s.layout = Object.assign(s.layout ?? {}, { visibility: 'none' });
227-
}) :
228-
symbol.layout = Object.assign(symbol.layout ?? {}, { visibility: 'none' });
229-
};
230224
// 点击切换
231225
const onIconClick = async (symbolId, layerId) => {
232226
if (!map) return;
@@ -237,9 +231,6 @@ const App = () => {
237231
symbol.layout['icon-allow-overlap'] = true;
238232
symbol.layout['icon-size'] = 0.16;
239233
}
240-
// TODO 暂时这样处理,待symbol是否设置visibility明确后优化
241-
// 图层隐藏状态下切换符号,隐藏新符号
242-
getLayerPropertyStyle(layerId, 'visibility') === 'none' && hideSymbol(symbol);
243234
map.addSymbol(id, symbol);
244235
});
245236
map.setSymbol(layerId, id);
@@ -254,16 +245,30 @@ const App = () => {
254245
return map.getStyle().layers.find(layer => layer?.id === layerId);
255246
};
256247

248+
/**以下三种方法都有点儿特殊化了 */
249+
const getCompositeLayerId = (layerId: string): string => {
250+
return map.symbolHandler.compositeSymbolRender.getLayerId(layerId);
251+
};
252+
// const getSymbol = (layerId: string) => {
253+
// return map.symbolHandler.getSymbol(layerId);
254+
// }
255+
const getCompositeLayersIds = (layerId: string): string[] => {
256+
return map.symbolHandler.compositeSymbolRender.getLayerIds(layerId);
257+
};
258+
const getImageInfo = (id: string) => {
259+
return map.symbolHandler.symbolManager.getImageInfo(id);
260+
}
261+
257262
const getLayerPropertyStyle = (layerId: string, key: string) => {
258-
const compositeLayerId = map.compositeLayersManager.getCompositeLayerId(layerId);
263+
const compositeLayerId = getCompositeLayerId(layerId);
259264
const type = getLayerType(compositeLayerId ?? layerId);
260265
const layer = getLayer(layerId);
261266
const mapboxKey = type && getMapboxKey[type](key);
262267
return isPaintKey(mapboxKey) ? layer?.paint?.[mapboxKey] : layer?.layout?.[mapboxKey];
263268
};
264269

265270
const changeLayerStyle = (layerId: string, key: string, value: string): void => {
266-
const compositeLayerId = map.compositeLayersManager.getCompositeLayerId(layerId);
271+
const compositeLayerId = getCompositeLayerId(layerId);
267272
const type = getLayerType(compositeLayerId ?? layerId);
268273
const layer = getLayer(layerId);
269274
const mapboxKey = type && getMapboxKey[type](key);
@@ -273,12 +278,12 @@ const App = () => {
273278
const ImageId: string = layer?.layout?.['icon-image'];
274279
if (ImageId && !ImageId.startsWith('sdf_')) {
275280
const sdfImageId = uniqueId('sdf_');
276-
const image = map.symbolManager.getImageInfo(ImageId);
281+
const image = getImageInfo(ImageId);
277282
map.addImage(sdfImageId, image, { sdf: true });
278283
map.setLayoutProperty(layerId, 'icon-image', sdfImageId);
279284
}
280285
} else if (type === 'line' && key === 'visibility') {
281-
const layerIds = map.compositeLayersManager.getLayers(layerId) ?? [layerId];
286+
const layerIds = getCompositeLayersIds(layerId) ?? [layerId];
282287
layerIds.forEach((layerId) => {
283288
map[SET_PROPERTY_RULE[paintOrLayout]](layerId, mapboxKey, value);
284289
});
@@ -287,28 +292,38 @@ const App = () => {
287292
map[SET_PROPERTY_RULE[paintOrLayout]](layerId, mapboxKey, value);
288293
};
289294

290-
const getCompositeLayersIds = (layerId: string): string[] => {
291-
return map.compositeLayersManager.getLayers(layerId);
292-
};
293-
const getImageInfo = (id: string) => {
294-
return map.symbolManager.getImageInfo(id);
295+
// const testLayerId = "chinaPolygon";
296+
const testLayerId = "mainRoadLine";
297+
const getLayer2 = () => {
298+
const layer = map.getLayer(testLayerId);
299+
console.log(layer);
295300
}
296-
return <View
297-
layerListParams={{
298-
layersInfo,
299-
setLayersInfo,
300-
onIconClick
301-
}}
302-
mapParams={{
303-
onLoadedMap
304-
}}
305-
styleSettingParams={{
306-
changeLayerStyle,
307-
getLayerPropertyStyle,
308-
getCompositeLayersIds,
309-
getImageInfo
310-
}}
311-
/>
301+
const removerLayer = () => {
302+
map.removeLayer(testLayerId);
303+
}
304+
const getStyle = () => {
305+
console.log(map.getStyle());
306+
}
307+
308+
return <div>
309+
<button onClick={getLayer2}>getLayer</button>
310+
<button onClick={removerLayer}>removerLayer</button>
311+
<button onClick={getStyle}>getStyle</button><View
312+
layerListParams={{
313+
layersInfo,
314+
setLayersInfo,
315+
onIconClick
316+
}}
317+
mapParams={{
318+
onLoadedMap
319+
}}
320+
styleSettingParams={{
321+
changeLayerStyle,
322+
getLayerPropertyStyle,
323+
getCompositeLayersIds,
324+
getImageInfo
325+
}}
326+
/></div>
312327
}
313328

314329
export default App;

package.json

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
"release-leaflet-es5": "cross-env moduleVersion=es5 npm run deploy-leaflet ./src/leaflet/namespace.js ./src/leaflet/css/index.js && uglifyjs ./dist/leaflet/iclient-leaflet.js --ecma 5 --comments /Copyright©/i -c -m -o ./dist/leaflet/iclient-leaflet.min.js && cleancss -o ./dist/leaflet/iclient-leaflet.min.css ./dist/leaflet/iclient-leaflet.css",
2020
"release-openlayers-es5": "cross-env moduleVersion=es5 npm run deploy-openlayers ./src/openlayers/namespace.js ./src/openlayers/css/index.js && uglifyjs ./dist/openlayers/iclient-openlayers.js --ecma 5 --comments /Copyright©/i -c -m -o ./dist/openlayers/iclient-openlayers.min.js && cleancss -o ./dist/openlayers/iclient-openlayers.min.css ./dist/openlayers/iclient-openlayers.css",
2121
"release-ol-es5": "cross-env moduleVersion=es5 npm run deploy-ol ./src/openlayers/namespace.js ./src/openlayers/css/index.js && uglifyjs ./dist/ol/iclient-ol.js --ecma 5 --comments /Copyright©/i -c -m -o ./dist/ol/iclient-ol.min.js && cleancss -o ./dist/ol/iclient-ol.min.css ./dist/ol/iclient-ol.css",
22-
"release-mapboxgl-es5": "cross-env moduleVersion=es5 npm run deploy-mapboxgl ./src/mapboxgl/namespace.js ./src/mapboxgl/css/index.js && uglifyjs ./dist/mapboxgl/iclient-mapboxgl.js --ecma 5 --comments /Copyright©/i -c -m -o ./dist/mapboxgl/iclient-mapboxgl.min.js && cleancss -o ./dist/mapboxgl/iclient-mapboxgl.min.css ./dist/mapboxgl/iclient-mapboxgl.css && npm run deploy-symbol",
22+
"release-mapboxgl-es5": "cross-env moduleVersion=es5 npm run deploy-mapboxgl ./src/mapboxgl/namespace.js ./src/mapboxgl/css/index.js && uglifyjs ./dist/mapboxgl/iclient-mapboxgl.js --ecma 5 --comments /Copyright©/i -c -m -o ./dist/mapboxgl/iclient-mapboxgl.min.js && cleancss -o ./dist/mapboxgl/iclient-mapboxgl.min.css ./dist/mapboxgl/iclient-mapboxgl.css",
2323
"release-classic-es5": "cross-env moduleVersion=es5 npm run deploy-classic ./src/classic/namespace.js && uglifyjs ./dist/classic/iclient-classic.js --ecma 5 --comments /Copyright©/i -c -m -o ./dist/classic/iclient-classic.min.js",
2424
"release-leaflet-es6": "cross-env moduleVersion=es6 npm run deploy-leaflet ./src/leaflet/namespace.js ./src/leaflet/css/index.js && node ./node_modules/uglify-es/bin/uglifyjs ./dist/leaflet/iclient-leaflet-es6.js --ecma 6 --comments /Copyright©/i -c -m -o ./dist/leaflet/iclient-leaflet-es6.min.js && cleancss -o ./dist/leaflet/iclient-leaflet.min.css ./dist/leaflet/iclient-leaflet.css",
2525
"release-openlayers-es6": "cross-env moduleVersion=es6 npm run deploy-openlayers ./src/openlayers/namespace.js ./src/openlayers/css/index.js && node ./node_modules/uglify-es/bin/uglifyjs ./dist/openlayers/iclient-openlayers-es6.js --ecma 6 --comments /Copyright©/i -c -m -o ./dist/openlayers/iclient-openlayers-es6.min.js && cleancss -o ./dist/openlayers/iclient-openlayers.min.css ./dist/openlayers/iclient-openlayers.css",
2626
"release-ol-es6": "cross-env moduleVersion=es6 npm run deploy-ol ./src/openlayers/namespace.js ./src/openlayers/css/index.js && node ./node_modules/uglify-es/bin/uglifyjs ./dist/ol/iclient-ol-es6.js --ecma 6 --comments /Copyright©/i -c -m -o ./dist/ol/iclient-ol-es6.min.js && cleancss -o ./dist/ol/iclient-ol.min.css ./dist/ol/iclient-ol.css",
27-
"release-mapboxgl-es6": "cross-env moduleVersion=es6 npm run deploy-mapboxgl ./src/mapboxgl/namespace.js ./src/mapboxgl/css/index.js && node ./node_modules/terser/bin/terser ./dist/mapboxgl/iclient-mapboxgl-es6.js --ecma 6 --comments /Copyright©/i -c -m -o ./dist/mapboxgl/iclient-mapboxgl-es6.min.js && cleancss -o ./dist/mapboxgl/iclient-mapboxgl.min.css ./dist/mapboxgl/iclient-mapboxgl.css && npm run deploy-symbol",
27+
"release-mapboxgl-es6": "cross-env moduleVersion=es6 npm run deploy-mapboxgl ./src/mapboxgl/namespace.js ./src/mapboxgl/css/index.js && node ./node_modules/terser/bin/terser ./dist/mapboxgl/iclient-mapboxgl-es6.js --ecma 6 --comments /Copyright©/i -c -m -o ./dist/mapboxgl/iclient-mapboxgl-es6.min.js && cleancss -o ./dist/mapboxgl/iclient-mapboxgl.min.css ./dist/mapboxgl/iclient-mapboxgl.css",
2828
"release-classic-es6": "cross-env moduleVersion=es6 npm run deploy-classic ./src/classic/namespace.js && node ./node_modules/uglify-es/bin/uglifyjs ./dist/classic/iclient-classic-es6.js --ecma 6 --comments /Copyright©/i -c -m -o ./dist/classic/iclient-classic-es6.min.js",
2929
"deploy": "webpack --color",
3030
"deploy-leaflet": "webpack --config ./build/webpack.config.leaflet.js --color",
@@ -45,8 +45,7 @@
4545
"pre-publish": "node ./build/publish.js --leaflet && node ./build/publish.js --openlayers && node ./build/publish.js --mapboxgl && node ./build/publish.js --classic",
4646
"publish": "npm run pre-publish && cd ./src/common && npm publish && cd ../leaflet && npm publish && cd ../openlayers && npm publish && cd ../mapboxgl && npm publish && cd ../classic && npm publish",
4747
"release-maplibregl-es5": "cross-env moduleVersion=es5 npm run deploy-maplibregl ./src/maplibregl/namespace.js",
48-
"deploy-maplibregl": "webpack --config ./build/webpack.config.maplibregl.js --color",
49-
"deploy-symbol": "copyfiles ./resources/symbols/** ./dist/"
48+
"deploy-maplibregl": "webpack --config ./build/webpack.config.maplibregl.js --color"
5049
},
5150
"keywords": [
5251
"SuperMap",
@@ -84,7 +83,6 @@
8483
"chromedriver": "87.0.5",
8584
"clean-css-cli": "^4.3.0",
8685
"commander": "^9.0.0",
87-
"copyfiles": "^2.4.1",
8886
"cross-env": "^7.0.2",
8987
"css-loader": "^6.7.1",
9088
"elasticsearch": "16.7.3",

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