AntV L7 之LarkMap 地图

 一、安装

$ 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>