• 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生命周期函数

  • 相关阅读:
    linux jdk 安装
    hibernate下Session的获取方式
    java http的get,post请求
    DetachedCriteria的简单使用
    传入泛型类型(T.class)的方法
    spring4、hibernate4整合xml配置
    (转)谈依赖注入
    集合类概述
    Swing编程概述
    java构造方法之我见
  • 原文地址:https://www.cnblogs.com/midnight-visitor/p/15338582.html
Copyright © 2020-2023  润新知