vue-antv 地图（Marker）

这版和上一篇PointLayer功能相同，缺陷是不同类型的点之间会有遮挡

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

import {Scene, PointLayer, Popup, Marker, Zoom} from '@antv/l7'
import {GaodeMap,} from '@antv/l7-maps'
import {ScreenService} from '@/services/screen.service'

const drawMarker = (scene) => {
      ScreenService.getInstance().companyInfo().subscribe(res => {
        let markerEl = null
        res.data.forEach((item, i) => {
          if(item.longitude){
            let el = document.createElement("div");
            el.className = "marker-wrap";
            if (item.isGreenPort) {
              markerEl = `<div class="marker">
<!--<span class="title">绿色星级港口</span>-->
<span class="tips">${item.companyName}</span>
                        <span class="greenPort"></span>
              </div>`
            } else if (item.isDangerousGoodsPort) {
              markerEl = `<div class="marker">
<!--<span class="title">危险货物港口</span>-->
<span class="tips">${item.companyName}</span>
                        <span class="danger"></span>
              </div>`
            } else {
              markerEl = `<div class="marker">
<span class="tips">${item.companyName}</span>
                        <span class="normal"></span>
              </div>`
            }

            el.innerHTML = markerEl

            const marker = new Marker({
              element: el,
            }).setLnglat({lng: item.longitude, lat: item.latitude});

            scene.addMarker(marker)

            marker.on('click', (ev) => {
              console.log('hello', item.id)
              sessionStorage.setItem('portId', item.id)
              window.open('#/case')
            })
          }
        })
      })
    }

    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)
      });

    }