zoukankan      html  css  js  c++  java
  • vue3+ts+AntV/L7加载钻取地图


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

    <div style="justify-content: center; position: relative;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生命周期函数

  • 相关阅读:
    PHP 数据库 ODBC
    PHP MySQL Delete
    PHP MySQL Update
    PHP MySQL Order By 关键词
    PHP MySQL Where 子句
    01_今日介绍
    00_前情回顾
    02_cfork分叉进程
    01_c++下jni开发说明
    17_activity任务栈和启动模式
  • 原文地址:https://www.cnblogs.com/midnight-visitor/p/15338582.html
Copyright © 2011-2022 走看看