一、安装
$ npm install -S @antv/l7 @antv/larkmap
# or
$ yarn add @antv/l7 @antv/larkmap
二、引入包
import type { LarkMapProps, LineLayerProps } from '@antv/larkmap';
import { LarkMap, LineLayer, Marker } from '@antv/larkmap';
三、config配置
const layerOptions:Omit<LineLayerProps, 'source'> = {autoFit: true,shape: 'line' as const,size: 1.5,color: '#00F3FF',style: {opacity: 0.8,lineType: 'solid' as const,},
};const config:LarkMapProps= {mapType: 'Gaode',logoVisible: false,mapOptions: {style: 'darkblue',pitch: 10,center: [122.1758, 41.6966],zoom: 9,token: 'b9a397170e10102aa541d64d0e6fbcfb',},
};
四、特殊点预先设置
const OffLineArr = [824, 823];
const WarnArr = [778,779, 738];
五、设置source数据源和mark的数据源
const [marker, setMarker] = useState<any[]>([])
const [source, setSource] = useState({data: [],parser: { type:'geojson'}
});
六、请求边界线和mark点位数据
useEffect(() => {let baseUrl ='http://gs-cloud.apps.sy.sypesco.com/geoserver-cloud/jzhs/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jzhs%3Astructureboundary_view_xzqh&maxFeatures=50&outputFormat=application%2Fjson&srsName=EPSG:4326&typeNames=';let guanxian_url = baseUrl + 'jzhs:jzhsupdm';fetch(guanxian_url).then(res => res.json()).then(res => {console.log("🚀 ~ guanxian_url res:", res);setSource((prevState) => ({ ...prevState, data: res}));// let data1={// data: [{path:[]}],// parser: { type: 'json' ,coordinates: 'path' }// }// data1.data[0].path.push(res.features[0].geometry.coordinates[0]);// console.log('data1',data1);// setSource(data1);}).catch((error) => {console.error('获取边线:', error);});let baseUrl2 ='http://gs-cloud.apps.sy.sypesco.com/geoserver-cloud/jzhs/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jzhs%3Apipelineassembly_view_initial&maxFeatures=50&outputFormat=application%2Fjson&srsName=EPSG:4326&typeNames=';let bengzhan_url = baseUrl2 + 'jzhs:jzhsupdm';fetch(bengzhan_url).then(res => res.json()).then(res => {console.log("🚀 ~ bengzhan_url res:", res);let markerList: any[] = [];res.features.forEach((item: any) => {let lnglat = item.geometry.coordinates;if (OffLineArr.includes(item.properties.fid)) {markerList.push({ id: item.id, name:item.properties.stationname,icon: offline, lng: lnglat[0], lat: lnglat[1] })} else if(WarnArr.includes(item.properties.fid)) {markerList.push({ id: item.id, name:item.properties.stationname,icon: warn, lng: lnglat[0], lat: lnglat[1] })} else{markerList.push({ id: item.id, name:item.properties.stationname,icon: normal, lng: lnglat[0], lat: lnglat[1] })}})// console.log("markerListmarkerList",markerList);setMarker(markerList);}).catch((error) => {console.error('获取泵站:', error);});}, []);
七、larkmap结构
<LarkMap {...config} style={{width: "100%",height: "100%"}} onClick={getClick}><LineLayer {...layerOptions} source={source} />{marker.map(item =><Marker key={item.id}lngLat={{ lng: item.lng, lat: item.lat }}anchor="center"><div className='mark-box'><div className='title'>{item.name}</div><img src={item.icon} style={{ width: '25px', height: '36px' }} /></div></Marker>)}
</LarkMap>
