使用tiledVectorLayer添加子图层,可以点击的时候弹出对应的数据
const layers = L.supermap.tiledVectorLayer(layerData[0].url, { layersID, returnAttributes: true }); layers.on('click', (event) => { const { latlng, layer } = event; const { type } = layer; console.log(type); console.log(event); layer.setStyle({ color: '#0360EC', }); const properties = event.layer.properties.attributes; const title = properties.jcqym ?? properties.mc ?? properties.gldw; const key = layer.layerName; if (marker) marker.remove(); const propertiesData = [{ [key]: properties }]; const divDom = document.createElement('div'); // eslint-disable-next-line no-unused-vars marker = L.marker(latlng).bindPopup(divDom, { className: 'popupContent', minWidth: 500, }).addTo(map).openPopup(); ReactDom.render(<PopupContainer propertiesData={propertiesData} title={title} tab={true}></PopupContainer>, divDom); });
通过查询的方法获取数据
if (result.length > 0) { const dataserverurl = result[0].dataserverurl; const datasetNames = []; result.forEach(item => datasetNames.push(item.datasetname)); let resultLayer; map.on('click', event => { if (resultLayer) resultLayer.remove(); const { latlng } = event; let queryCircle = L.circle(latlng, { radius: 0.001, color: 'red' }); var bufferParam = new SuperMap.GetFeaturesByBufferParameters({ datasetNames: datasetNames, bufferDistance: 0.001, geometry: queryCircle }); L.supermap .featureService(dataserverurl) .getFeaturesByBuffer(bufferParam, function (serviceResult) { console.log(serviceResult); const result = serviceResult.result; const features = result.features; resultLayer = L.geoJSON(features, { style: () => { return { color: '#00FFFF', fillColor: '#FEFD79', fillOpacity: 0.8 }; }, onEachFeature: function (feature, layer) { const properties = feature.properties; let title = properties.MC ?? '详细信息'; title = title.trim() === '' ? '详细信息' : title; const divDom = document.createElement('div'); const propertiesData = [{ 'ziran': properties }]; ReactDom.render(<PopupContainer propertiesData={propertiesData} title={title} tab={true}></PopupContainer>, divDom); layer.addTo(map).bindPopup(divDom, { className: 'popupContent', minWidth: 500, }).openPopup(); } }).addTo(map); }); }); }
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站,联系方式11523518。
热评文章
标签列表
热门文章
友情链接