vue3+ts+AntV/L7加载钻取地图


vue3在渲染地图时,调用方法应放在onUpdated里面,放在onMounted里,会报错:id容器未找到。这是vue3生命周期的原因,不赘述

<div style="justify-content: center; position: relative;width:100%;height:90%;" id="map"></div>
import { Scene } from '@antv/l7';
import { DrillDownLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
function drawMap() {
      const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
      const scene = new Scene({
        id: 'map',
        map: new Mapbox({
          center: [ 116.2825, 39.9 ],
          pitch: 0,
          style: 'blank',
          zoom: 3,
          minZoom: 3,
          maxZoom: 10
        })
      });
      scene.on('loaded', () => {
        new DrillDownLayer(scene, {
          data: [],
          viewStart: 'Country',
          viewEnd: 'County',
          fill: {
            color: {
              field: 'NAME_CHN',
              values: colors
            }
          },
          popup: {
            enable: true,
            Html: props => {
              return `<span>${props.NAME_CHN}</span>`;
            }
          }
        });
      });
      scene.on('click', (e) => {
        console.log(e);
        console.log(this);
      });
    } 
onUpdated(() => {
      drawMap()
    })

如有疑问,请揣摩vue3生命周期函数

posted @ 2021-09-26 16:01  飞天龙猫  阅读(1991)  评论(0编辑  收藏  举报