快捷導(dǎo)航

Leaflet?數(shù)據(jù)可視化實現(xiàn)地圖下鉆示例詳解

更新時間：2023年01月04日 14:44:01 作者：摸魚的湯姆

這篇文章主要為大家介紹了Leaflet數(shù)據(jù)可視化實現(xiàn)地圖下鉆示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

說到地圖下鉆功能，做過可視化的應(yīng)該都不陌生，地圖下鉆就是通過用戶交互從全國地圖到下一級省份地圖的切換，比如在Echarts中用戶點擊某個省份，地圖就會切換成該省份的地圖，當(dāng)然本篇文章不介紹echarts如何去實現(xiàn)地圖下鉆，而是用Leaflet去實現(xiàn)地圖下鉆功能。

使用的框架是Vue，如果這是你第一次使用leaflet框架，還有沒對其進行了解,還有如何在vue安裝leaflet，建議你去看我上篇文章，(基礎(chǔ)篇)

獲取GeoJson，如果有現(xiàn)成的可以本地導(dǎo)入。

創(chuàng)建文件/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);
      }
    });
  });
}

初始化地圖

創(chuàng)建文件/lib/useLeaflet.ts

function useLeaflet(idName){
    // options 參數(shù) 
    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 參數(shù) 
    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;
    }
    // 每次跨層級清除面板-- 性能優(yōu)化
    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(/(省|市|自治區(qū)|維吾爾自治區(qū))$/g, '')
        ];
      let colors = Areaitems ?? '#008c8c';
      // 設(shè)置事件
      const onEachFeature = (feature, layer) => {
        layer.on({ 
          click: (e) => {
            // 點擊
            let codes = e.target.feature.properties.adcode;
            let { name } = e.target.feature.properties;
            // 這里根據(jù)需求來，acroutes主要限制下鉆的層級
            if (acroutes.value.length > 1) {
              return;
            } 
            // 處理特殊地圖
            let prov =
              datasArr.value[datasArr.value.length - 1][
                name.replace(/(省|市|自治區(qū)|維吾爾自治區(qū))$/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);
            // 根據(jù)輪廓修正地圖位置，以及縮放大小
            map.value.fitBounds(e.target.getBounds());
            // 根據(jù)地區(qū)的code請求geojson數(shù)據(jù)
            getGeoJson(`${codes}_full`).then((res) => {
              geoarr.value.clearLayers(geoarr.value);
                // 因為層級有限 可以考慮遞歸渲染 
                updateGeoJson(res);
            });
          },
        });
      }; 
      // 設(shè)置區(qū)域默認(rèn)顏色+添加點擊事件
      let geojson = L.geoJSON(item, {
        style: {
          weight: 2, //邊框粗細(xì)
          opacity: 0.4, //透明度
          fillColor: 'transparent', //區(qū)域填充顏色
          fillOpacity: 0.3, //區(qū)域填充顏色的透明
        },
        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>
// 插件可加載各種地圖（如：智圖地圖，谷歌地圖，高德地圖等包含衛(wèi)星地圖）
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>

效果視頻這里只是把大屏中核心部分下鉆功能實現(xiàn)了，后續(xù)會更新，關(guān)于Leaflet的其他案例。

關(guān)于Leaflet實現(xiàn)地圖下鉆到這里基本就結(jié)束了，整體思路不是很難理解，核心部分建議多看一下。俗話說“知識是無限的，生命是有限的”，充實的一天，過的才有價值！

以上就是Leaflet數(shù)據(jù)可視化實現(xiàn)地圖下鉆示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Leaflet數(shù)據(jù)可視化地圖下鉆的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: