@@ -3,7 +3,7 @@ import View from './View';
33import './style' ;
44import { isArray , uniqueId } from 'lodash' ;
55import { getMapboxKey , isPaintKey } from '../utils/StyleSettingUtil' ;
6- // import '../../../../src/mapboxgl/core/MapExtend';
6+ import '../../../../src/mapboxgl/core/MapExtend' ;
77
88const SET_PROPERTY_RULE = {
99 paint : 'setPaintProperty' ,
@@ -20,7 +20,7 @@ const App = () => {
2020 } , [ ! ! map ] ) ;
2121
2222 const onLoadedMap = async ( map : any ) => {
23- ( window as any ) . mapboxgl . supermap . WebSymbol . symbolUrl = "../../libs/resources/symbols" ;
23+ ( window as any ) . mapboxgl . supermap . WebSymbol . basePath = "../../libs/resources/symbols" ;
2424 setMap ( map ) ;
2525 }
2626
@@ -29,8 +29,8 @@ const App = () => {
2929 const { symbolId, style = { } } = preSymbolInfo ;
3030 const id = uniqueId ( ) ;
3131 await map . loadSymbol ( symbolId , ( _err , symbol ) => {
32- style . paint && Object . assign ( symbol . paint , style . paint ) ;
33- style . layout && Object . assign ( symbol . layout , style . layout ) ;
32+ style . paint && Object . assign ( symbol . paint , style . paint ) ;
33+ style . layout && Object . assign ( symbol . layout , style . layout ) ;
3434 map . addSymbol ( id , symbol ) ;
3535 } ) ;
3636 return { id, symbolId } ;
@@ -54,7 +54,7 @@ const App = () => {
5454 symbol : any ;
5555 layersInfo : any ;
5656 } ) : void => {
57- const { layerId, sourceLayer, type, layerType, symbol, layersInfo} = options ;
57+ const { layerId, sourceLayer, type, layerType, symbol, layersInfo } = options ;
5858 const { id, symbolId } = symbol ;
5959 if ( type !== 'text' ) {
6060 layersInfo . push ( { id : layerId , type, sourceLayer, url, symbolId } ) ;
@@ -145,87 +145,80 @@ const App = () => {
145145 } ) ;
146146
147147 addMVTLayer ( {
148- layerId :'chinaPolygon' ,
149- sourceLayer :'China_Province_pg@China' ,
150- type :'polygon' ,
148+ layerId : 'chinaPolygon' ,
149+ sourceLayer : 'China_Province_pg@China' ,
150+ type : 'polygon' ,
151151 layerType : 'fill' ,
152152 symbol : chinaSymbol ,
153153 layersInfo : newLayersInfo
154154 } ) ;
155155 addMVTLayer ( {
156- layerId :'riverpolygon' ,
156+ layerId : 'riverpolygon' ,
157157 sourceLayer : 'Main_River_pg@China' ,
158- type :'polygon' ,
158+ type : 'polygon' ,
159159 layerType : 'fill' ,
160160 symbol : riverPolygonSymbol ,
161161 layersInfo : newLayersInfo
162162 } ) ;
163163 addMVTLayer ( {
164- layerId :'riverLine' ,
165- sourceLayer : 'Main_River_ln@China' ,
166- type :'line' ,
164+ layerId : 'riverLine' ,
165+ sourceLayer : 'Main_River_ln@China' ,
166+ type : 'line' ,
167167 layerType : 'line' ,
168168 symbol : riverLineSymbol ,
169169 layersInfo : newLayersInfo
170170 } ) ;
171171 addMVTLayer ( {
172- layerId :'provinceLine' ,
172+ layerId : 'provinceLine' ,
173173 sourceLayer : 'China_Province_ln@China' ,
174- type :'line' ,
174+ type : 'line' ,
175175 layerType : 'line' ,
176176 symbol : provinceLineSymbol ,
177177 layersInfo : newLayersInfo
178178 } ) ;
179179 addMVTLayer ( {
180- layerId :'mainRoadLine' ,
181- sourceLayer : 'Main_Road_L@China' ,
182- type :'line' ,
180+ layerId : 'mainRoadLine' ,
181+ sourceLayer : 'Main_Road_L@China' ,
182+ type : 'line' ,
183183 layerType : 'line' ,
184184 symbol : MainRoadLineLineSymbol ,
185185 layersInfo : newLayersInfo
186186 } ) ;
187187 addMVTLayer ( {
188- layerId :'capital' ,
189- sourceLayer : 'China_Capital_pt@China' ,
190- type :'point' ,
188+ layerId : 'capital' ,
189+ sourceLayer : 'China_Capital_pt@China' ,
190+ type : 'point' ,
191191 layerType : 'symbol' ,
192192 symbol : capitalSymbol ,
193193 layersInfo : newLayersInfo
194194 } ) ;
195195 addMVTLayer ( {
196- layerId :'city' ,
196+ layerId : 'city' ,
197197 sourceLayer : 'China_ProCenCity_pt@China' ,
198- type :'point' ,
198+ type : 'point' ,
199199 layerType : 'symbol' ,
200200 symbol : citySymbol ,
201201 layersInfo : newLayersInfo
202202 } ) ;
203203 addMVTLayer ( {
204- layerId :'nationText' ,
204+ layerId : 'nationText' ,
205205 sourceLayer : 'China_Nation_B_pt@China' ,
206- type :'text' ,
206+ type : 'text' ,
207207 layerType : 'symbol' ,
208208 symbol : nationTextSymbol ,
209209 layersInfo : newLayersInfo
210210 } ) ;
211211 addMVTLayer ( {
212- layerId :'cityText' ,
212+ layerId : 'cityText' ,
213213 sourceLayer : 'China_ProCenCity_pt@China' ,
214- type :'text' ,
214+ type : 'text' ,
215215 layerType : 'symbol' ,
216216 symbol : cityTextSymbol ,
217217 layersInfo : newLayersInfo
218218 } ) ;
219219 setLayersInfo ( newLayersInfo . reverse ( ) ) ;
220220 } ;
221221
222- const hideSymbol = ( symbol ) => {
223- isArray ( symbol ) ?
224- symbol . forEach ( s => {
225- s . layout = Object . assign ( s . layout ?? { } , { visibility : 'none' } ) ;
226- } ) :
227- symbol . layout = Object . assign ( symbol . layout ?? { } , { visibility : 'none' } ) ;
228- } ;
229222 // 点击切换
230223 const onIconClick = async ( symbolId , layerId ) => {
231224 if ( ! map ) return ;
@@ -236,9 +229,6 @@ const App = () => {
236229 symbol . layout [ 'icon-allow-overlap' ] = true ;
237230 symbol . layout [ 'icon-size' ] = 0.16 ;
238231 }
239- // TODO 暂时这样处理，待symbol是否设置visibility明确后优化
240- // 图层隐藏状态下切换符号，隐藏新符号
241- getLayerPropertyStyle ( layerId , 'visibility' ) === 'none' && hideSymbol ( symbol ) ;
242232 map . addSymbol ( id , symbol ) ;
243233 } ) ;
244234 map . setSymbol ( layerId , id ) ;
@@ -253,16 +243,30 @@ const App = () => {
253243 return map . getStyle ( ) . layers . find ( layer => layer ?. id === layerId ) ;
254244 } ;
255245
246+ /**以下三种方法都有点儿特殊化了 */
247+ const getCompositeLayerId = ( layerId : string ) : string => {
248+ return map . symbolHandler . compositeSymbolRender . getLayerId ( layerId ) ;
249+ } ;
250+ // const getSymbol = (layerId: string) => {
251+ // return map.symbolHandler.getSymbol(layerId);
252+ // }
253+ const getCompositeLayersIds = ( layerId : string ) : string [ ] => {
254+ return map . symbolHandler . compositeSymbolRender . getLayerIds ( layerId ) ;
255+ } ;
256+ const getImageInfo = ( id : string ) => {
257+ return map . symbolHandler . symbolManager . getImageInfo ( id ) ;
258+ }
259+
256260 const getLayerPropertyStyle = ( layerId : string , key : string ) => {
257- const compositeLayerId = map . compositeLayersManager . getCompositeLayerId ( layerId ) ;
261+ const compositeLayerId = getCompositeLayerId ( layerId ) ;
258262 const type = getLayerType ( compositeLayerId ?? layerId ) ;
259263 const layer = getLayer ( layerId ) ;
260264 const mapboxKey = type && getMapboxKey [ type ] ( key ) ;
261265 return isPaintKey ( mapboxKey ) ? layer ?. paint ?. [ mapboxKey ] : layer ?. layout ?. [ mapboxKey ] ;
262266 } ;
263267
264268 const changeLayerStyle = ( layerId : string , key : string , value : string ) : void => {
265- const compositeLayerId = map . compositeLayersManager . getCompositeLayerId ( layerId ) ;
269+ const compositeLayerId = getCompositeLayerId ( layerId ) ;
266270 const type = getLayerType ( compositeLayerId ?? layerId ) ;
267271 const layer = getLayer ( layerId ) ;
268272 const mapboxKey = type && getMapboxKey [ type ] ( key ) ;
@@ -272,12 +276,12 @@ const App = () => {
272276 const ImageId : string = layer ?. layout ?. [ 'icon-image' ] ;
273277 if ( ImageId && ! ImageId . startsWith ( 'sdf_' ) ) {
274278 const sdfImageId = uniqueId ( 'sdf_' ) ;
275- const image = map . symbolManager . getImageInfo ( ImageId ) ;
279+ const image = getImageInfo ( ImageId ) ;
276280 map . addImage ( sdfImageId , image , { sdf : true } ) ;
277281 map . setLayoutProperty ( layerId , 'icon-image' , sdfImageId ) ;
278282 }
279283 } else if ( type === 'line' && key === 'visibility' ) {
280- const layerIds = map . compositeLayersManager . getLayers ( layerId ) ?? [ layerId ] ;
284+ const layerIds = getCompositeLayersIds ( layerId ) ?? [ layerId ] ;
281285 layerIds . forEach ( ( layerId ) => {
282286 map [ SET_PROPERTY_RULE [ paintOrLayout ] ] ( layerId , mapboxKey , value ) ;
283287 } ) ;
@@ -286,28 +290,38 @@ const App = () => {
286290 map [ SET_PROPERTY_RULE [ paintOrLayout ] ] ( layerId , mapboxKey , value ) ;
287291 } ;
288292
289- const getCompositeLayersIds = ( layerId : string ) : string [ ] => {
290- return map . compositeLayersManager . getLayers ( layerId ) ;
291- } ;
292- const getImageInfo = ( id : string ) => {
293- return map . symbolManager . getImageInfo ( id ) ;
293+ // const testLayerId = "chinaPolygon";
294+ const testLayerId = "mainRoadLine" ;
295+ const getLayer2 = ( ) => {
296+ const layer = map . getLayer ( testLayerId ) ;
297+ console . log ( layer ) ;
294298 }
295- return < View
296- layerListParams = { {
297- layersInfo,
298- setLayersInfo,
299- onIconClick
300- } }
301- mapParams = { {
302- onLoadedMap
303- } }
304- styleSettingParams = { {
305- changeLayerStyle,
306- getLayerPropertyStyle,
307- getCompositeLayersIds,
308- getImageInfo
309- } }
310- />
299+ const removerLayer = ( ) => {
300+ map . removeLayer ( testLayerId ) ;
301+ }
302+ const getStyle = ( ) => {
303+ console . log ( map . getStyle ( ) ) ;
304+ }
305+
306+ return < div >
307+ < button onClick = { getLayer2 } > getLayer</ button >
308+ < button onClick = { removerLayer } > removerLayer</ button >
309+ < button onClick = { getStyle } > getStyle</ button > < View
310+ layerListParams = { {
311+ layersInfo,
312+ setLayersInfo,
313+ onIconClick
314+ } }
315+ mapParams = { {
316+ onLoadedMap
317+ } }
318+ styleSettingParams = { {
319+ changeLayerStyle,
320+ getLayerPropertyStyle,
321+ getCompositeLayersIds,
322+ getImageInfo
323+ } }
324+ /> </ div >
311325}
312326
313327export default App ;
0 commit comments