@@ -4,7 +4,8 @@ import './style';
44import { isArray , uniqueId } from 'lodash' ;
55import { 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+
89const 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
314329export default App ;
0 commit comments