vue-antv 地图（PointLayer）

捣鼓地图简直生无可恋，不mark下真对不起浪费的脑细胞~~~

牵涉到地图加载，打点，弹窗，PointLayer那里有点繁琐，应该可以优化，交给后续吧~先上图

<div id="userMap" style="height: 100%;"></div>

import {Scene, PointLayer, Popup, Marker, Zoom} from '@antv/l7'
onMounted(() => {
      initUserMap()
    })

//危险企业
    let dangerLayer = null
    let dangerData = ref([])
    //绿色企业
    let greenLayer = null
    let greenData = ref([])
    //普通企业
    let normalLayer = null
    let normalData = ref([])
    let pop = null

    const drawMarker = (scene) => {
      scene.addImage('00', require('../../assets/screen/icon_danger.png'));
      scene.addImage('01', require('../../assets/screen/icon_star.png'));

      ScreenService.getInstance().companyInfo().subscribe(res => {
        let markerEl = null

        dangerData.value = res.data.filter(dot => dot.latitude && dot.isDangerousGoodsPort);
        greenData.value = res.data.filter(dot => dot.latitude && dot.isGreenPort);
        normalData.value = res.data.filter(dot => dot.latitude && !dot.isGreenPort && !dot.isDangerousGoodsPort);
        console.log('normalData.value',normalData.value)
        console.log('greenData.value',greenData.value)

        normalLayer = new PointLayer({
          visible:true,
          zIndex:2,
          cursor:'pointer',
        })
            .source(normalData.value, {
              parser: {
                type: 'json',
                x: 'longitude',
                y: 'latitude'
              }
            })
            .shape('circle')
            .size(6)
            .color('#0f0')
            .active(true)
        normalLayer.on('click', (ev) => {
          sessionStorage.setItem('portId', ev.feature.id)
          window.open('#/case')
        })
        normalLayer.on('mousemove', (ev) => {
          pop = new Popup({
            offsets: [ 0, 0 ],
            closeButton: false,
          })
              .setLnglat({lng: ev.feature.longitude, lat: ev.feature.latitude})
              .setHTML(`<span>${ev.feature.companyName}</span>`);
          scene.addPopup(pop);
        })
        scene.addLayer(normalLayer);

        dangerLayer = new PointLayer({
          visible:true,
          zIndex:10,
          cursor:'pointer',
        })
            .source(dangerData.value, {
              parser: {
                type: 'json',
                x: 'longitude',
                y: 'latitude'
              }
            })
            .shape('companyName', [ '00' ])
            .size(15),

        dangerLayer.on('click', (ev) => {
          sessionStorage.setItem('portId', ev.feature.id)
          window.open('#/case')
        })
        dangerLayer.on('mousemove', (ev) => {
          pop = new Popup({
            offsets: [ 0, 0 ],
            closeButton: false,
          })
              .setLnglat({lng: ev.feature.longitude, lat: ev.feature.latitude})
              .setHTML(`<span>${ev.feature.companyName}</span>`);
          scene.addPopup(pop);
        })
        scene.addLayer(dangerLayer);

        greenLayer = new PointLayer({
          visible:true,
          zIndex:10,
          cursor:'pointer',
        })
            .source(greenData.value, {
              parser: {
                type: 'json',
                x: 'longitude',
                y: 'latitude'
              }
            })
            .shape('companyName', [ '01' ])
            .size(15)
        greenLayer.on('click', (ev) => {
          sessionStorage.setItem('portId', ev.feature.id)
          window.open('#/case')
        })
        greenLayer.on('mousemove', (ev) => {
          pop = new Popup({
            offsets: [ 0, 0 ],
            closeButton: false,
          })
              .setLnglat({lng: ev.feature.longitude, lat: ev.feature.latitude})
              .setHTML(`<span>${ev.feature.companyName}</span>`);
          scene.addPopup(pop);
        })
        scene.addLayer(greenLayer);
      })
    }


    let map = null;
    // 地图
    const initUserMap = () => {
      map = new GaodeMap({
        pitch: 0,
        style: 'dark',
        mapStyle: 'amap://styles/darkblue',
        center: [120.423730, 31.629810],
        zoom: 10,
        token: 'ced0d726cd96553ba8b5b3521671aaf4'
      })

      const scene = new Scene({
        id: 'userMap',
        map: map,
        logoVisible: false,
      });


      scene.on('loaded', () => {
        drawMarker(scene)
      });

    }

<style lang="scss" scoped>
:deep(.l7-popup) {
  border-radius: 5px;

  .l7-popup-tip {
    border-top-color: rgba(23, 103, 159,.6);
  }

  .l7-popup-content {
    padding:8px;
    color: #fff;
    background: rgba(23, 103, 159,.6) !important;
    border: 1px solid #0e2740 !important;

    .l7-popup-close-button {
      fill: #fff;
    }

    .l7-layer-popup__value {
      font-size: 16px;
      color: aqua;
    }
  }
}
</style>