我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Leaflet 数据可视化实现地图下钻示例详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Leaflet 数据可视化实现地图下钻示例详解

前言

说到地图下钻功能,做过可视化的应该都不陌生,地图下钻就是通过用户交互从全国地图到下一级省份地图的切换,比如在Echarts中用户点击某个省份,地图就会切换成该省份的地图,当然本篇文章不介绍echarts如何去实现地图下钻,而是用Leaflet去实现地图下钻功能。

使用的框架是Vue,如果这是你第一次使用leaflet框架,还有没对其进行了解,还有如何在vue安装leaflet,建议你去看我上篇文章,(基础篇)

获取GeoJson,如果有现成的可以本地导入。

创建文件/api/getGeoJson.ts

const getGeoJson = (code) => {
  return new Promise((resolve, inject) => {
    // /geojson代理
    axios.get(`/geojson/areas_v3/bound/geojson?code=$[code]`).then((res) => {
      if (res.data.features){
        resolve(res.data.features);
      } else {
        inject(res);
      }
    });
  });
}

初始化地图

创建文件/lib/useLeaflet.ts

function useLeaflet(idName){
    // options 参数 
    const initMap = (options) => {
    // 实例
    map.value = L.map(idName, options);  
    // @ts-ignore
    // 记载瓦片
    L.tileLayer?.chinaProvider('Geoq.Normal.PurplishBlue').addTo(map.value);
    map.value.setView([41.02999636902566, 108.984375], 3); 
  }
}

渲染GeoJson地图&添加事件-核心部分

function useLeaflet(idName){
    // options 参数 
    const initMap = (options) => {
    // 实例
    map.value = L.map(idName, options);  
    // @ts-ignore
    // 记载瓦片
    L.tileLayer?.chinaProvider('Geoq.Normal.PurplishBlue').addTo(map.value);
    map.value.setView([41.02999636902566, 108.984375], 3); 
  }
  const updateGeoJson = (json) => {
    if (isArray(json) && json.length < 1) {
      return;
    }
    // 每次跨层级清除面板-- 性能优化
    map.value.removeLayer(geoarr.value);
    // 清除Layer组
    feiLineGroupLayer.value.clearLayers();
    feiMakerGroupLayer.value.clearLayers();
    // 遍历json
    json.forEach((item, index) => {
      let areaName = item.properties.name;
      let Areaitems =
        datasArr.value[datasArr.value.length - 1][
          areaName.replace(/(省|市|自治区|维吾尔自治区)$/g, '')
        ];
      let colors = Areaitems ?? '#008c8c';
      // 设置事件
      const onEachFeature = (feature, layer) => {
        layer.on({ 
          click: (e) => {
            // 点击
            let codes = e.target.feature.properties.adcode;
            let { name } = e.target.feature.properties;
            // 这里根据需求来,acroutes主要限制下钻的层级
            if (acroutes.value.length > 1) {
              return;
            } 
            // 处理特殊地图
            let prov =
              datasArr.value[datasArr.value.length - 1][
                name.replace(/(省|市|自治区|维吾尔自治区)$/g, '')
              ];
            let childrenArr = prov.children;
            let objs = {};
            // 更改provinces的值
            provinces.value = prov;
            childrenArr.map((item, index) => {
              objs[item.name] = item;
            });
            datasArr.value.push(objs);
            acroutes.value.push(codes);
            // 根据轮廓修正地图位置,以及缩放大小
            map.value.fitBounds(e.target.getBounds());
            // 根据地区的code请求geojson数据
            getGeoJson(`${codes}_full`).then((res) => {
              geoarr.value.clearLayers(geoarr.value);
                // 因为层级有限 可以考虑递归渲染 
                updateGeoJson(res);
            });
          },
        });
      }; 
      // 设置区域默认颜色+添加点击事件
      let geojson = L.geoJSON(item, {
        style: {
          weight: 2, //边框粗细
          opacity: 0.4, //透明度
          fillColor: 'transparent', //区域填充颜色
          fillOpacity: 0.3, //区域填充颜色的透明
        },
        onEachFeature: onEachFeature,
      });
     // 添加geo模块
      geoarr.value.addLayer(geojson);
    });
     // 添加将geoarr添加到地图中去
    map.value.addLayer(geoarr.value); 
  }
  return{
       initMap,
       updateGeoJson
  }
}

App.vue中

<template>
  <div id="map"></div>
</template>
<script lang="ts" setup>
// 插件可加载各种地图(如:智图地图,谷歌地图,高德地图等包含卫星地图)
import L from 'leaflet'; 
import 'leaflet/dist/leaflet.css';
import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
import { getGeoJson } from '@/api/getGeoJson';
import { onMounted, unref } from '@vue/runtime-core';
import { defineExpose, defineEmits } from 'vue';
import { useLeaflet } from '@/lib/useLeaflet';
let { initMap, updateGeoJson  } = useLeaflet('map'); 
onMounted(() => { 
  initMap(
    {
      attributionControl: false, // 是否使用工具集 
      zoomAnimation: true,
      maxZoom: 13, 
      minZoom: 4,
      zoom: 4,
      worldCopyJump: true,
      markerZoomAnimation: true,
      zoomControl: false, 
    } 
  );
//   首先加载全国地图
  getGeoJson('100000_full').then((res) => {
   updateGeoJson(res);
  })
});
</script>

效果视频这里只是把大屏中核心部分下钻功能实现了,后续会更新,关于Leaflet的其他案例。

关于Leaflet实现地图下钻到这里基本就结束了,整体思路不是很难理解,核心部分建议多看一下。 俗话说“知识是无限的,生命是有限的”,充实的一天,过的才有价值!

以上就是Leaflet数据可视化实现地图下钻示例详解的详细内容,更多关于Leaflet数据可视化地图下钻的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Leaflet 数据可视化实现地图下钻示例详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Leaflet 数据可视化实现地图下钻示例详解

这篇文章主要为大家介绍了Leaflet数据可视化实现地图下钻示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-01-04

前端音频可视化Web Audio实现示例详解

这篇文章主要为大家介绍了前端音频可视化Web Audio实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-03-09

python用pyecharts实现地图数据可视化的方法

这篇文章给大家分享的是有关python用pyecharts实现地图数据可视化的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。有的时候,我们需要对不同国家或地区的某项指标进行比较,可简单通过直方图加以比较。但直
2023-06-14

Python实现交通数据可视化的示例代码

本文主要分享了Python交通数据分析与可视化的实战!其中主要是使用TransBigData库快速高效地处理、分析、挖掘出租车GPS数据,感兴趣的可以了解一下
2023-05-17

python如何实现股票历史数据可视化示例

这篇文章主要介绍python如何实现股票历史数据可视化示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!投资有风险,选择需谨慎。 股票交易数据分析可直观股市走向,对于如何把握股票行情,快速解读股票交易数据有不可替代的
2023-06-15

编程热搜

目录