網格標簽 · 代碼梳理

設計頁搜索 case"grid": 添加下面代碼如圖： ![](https://img.kancloud.cn/b8/33/b8334a6b9bde28aa6508fb39d0029d7a_1338x650.png) ``` var offset = []; if (layer.mapFontOffsetX != null) { offset.push(parseInt(layer.mapFontOffsetX)); } else { offset.push(0); } if (layer.mapFontOffsetY != null) { offset.push(parseInt(layer.mapFontOffsetY)); } else { offset.push(0); } if (map.getLayer(layerId+1) == undefined) { map.addSource(sourceId, { 'type': 'geojson', 'data': geojson }); map.addLayer({ 'id': layerId+1, 'source': sourceId, 'type': 'symbol', 'layout': { "text-field": "{weight}"+layer.mapNumberCompany, "text-font": ["SimSun Regular"], "text-size": parseInt(layer.mapFontSize), "text-offset": offset, }, 'paint': { "text-color": layer.mapFontColor } }); } else { map.getSource(sourceId).setData(geojson); map.setPaintProperty(layerId+1, 'text-color', layer.mapFontColor); map.setLayoutProperty(layerId+1, 'text-size', parseInt(layer.mapFontSize)); map.setLayoutProperty(layerId+1, 'text-offset', offset); } ``` 搜索 case"grid": 設置面板如圖： ![](https://img.kancloud.cn/1d/d6/1dd6adae994a0dac4c7c99ea5443cba0_1023x624.png) ``` { title: '單位', type: "text-input-sl-s", bind: "mapNumberCompany", }, { title: '顏色', type: "colorpicker", bind: "mapFontColor", }, { title: '字體大小', type: "configSlide", bind: "mapFontSize", config: { slideEnd: 48 } }, { title: '文本偏移-X軸', type: "configSlide", bind: "mapFontOffsetX", config: { slideEnd: 48 } }, { title: '文本偏移-Y軸', type: "configSlide", bind: "mapFontOffsetY", config: { slideEnd: 48 } }, ``` 設置監聽搜索 component.config.mapFontSize 在下面寫如圖： ![](https://img.kancloud.cn/c5/43/c54301b3766fc115163a2d1e5d10352b_1059x454.png) ``` scope.$watch("component.config.mapNumberCompany", function(newValue) { if (newValue != null) { factory.setLayerConfig(scope, component, "mapNumberCompany", newValue); } }); ``` 分享頁搜索 case"grid": 添加下面代碼如圖： ![](https://img.kancloud.cn/f1/ef/f1ef78a482197285d3af108700746114_1372x841.png) ``` var offset = []; if (layer.mapFontOffsetX != null) { offset.push(parseInt(layer.mapFontOffsetX)); } else { offset.push(0); } if (layer.mapFontOffsetY != null) { offset.push(parseInt(layer.mapFontOffsetY)); } else { offset.push(0); } if (map.getLayer(layerId+1) == undefined) { map.addSource(sourceId, { 'type': 'geojson', 'data': geojson }); map.addLayer({ 'id': layerId+1, 'source': sourceId, 'type': 'symbol', 'layout': { "text-field": "{weight}"+layer.mapNumberCompany, "text-font": ["SimSun Regular"], "text-size": parseInt(layer.mapFontSize), "text-offset": offset, }, 'paint': { "text-color": layer.mapFontColor } }); } else { map.getSource(sourceId).setData(geojson); map.setPaintProperty(layerId+1, 'text-color', layer.mapFontColor); map.setLayoutProperty(layerId+1, 'text-size', parseInt(layer.mapFontSize)); map.setLayoutProperty(layerId+1, 'text-offset', offset); } ``` 最后的效果 ![](https://img.kancloud.cn/dc/c6/dcc6d7d63f0bc58cc48ea4a7f28c05e3_1554x842.png)