使用L7map从零开始打造在地图上展示自定义图标，并可以动态定位

1.创建点图层并展示在地图上

 快速上手 | L7

1.1初始化地图 

<template>

 <div ref="l7MapContainer" class="l7-map"></div> //地图位置

</template>

<script setup>

import { Map as L7Map } from '@antv/l7-maps'

import { Scene, PointLayer, RasterLayer, HeatmapLayer } from '@antv/l7'  

import LocateIcon from '@/assets/icons/svg/locate-icon.svg'   //自定义图片位置

//地图初始化加载

function initMap() {
  let mapDom = l7MapContainer.value
  scene = new Scene({
    id: mapDom,
    logoVisible: false,
    renderer: 'regl',
    // pickBufferScale: 2,
    map: new L7Map({
      // pitch: 40,
      // style:'dark',
      zoom: 13, // 初始化地图层级
      center: [115, 39]  //此处换成自己想要的地图中心经纬度
    })
  })

  scene.on('loaded', () => {

  //添加定位图片，此处的作用是将自定义图片加载进scene中
    scene.addImage('tubiao', LocateIcon)
    // 添加聚合点图片
    scene.addImage('allpoint', getAssetsImages('allpoint.png'))
  })

//地图缩放时，执行。

scene.on('zoomend', () => {
            changeIocn() //我自定义的方法，后续介绍，用来精确定位点位的
    })
}

</script>

1.2初始化点图层

 //单点图层

pointsLayer.value = new PointLayer({ zIndex: 666 })
    .source(pointData, {
      parser: {
  &nb