vue結合leaflet實現鷹眼圖

更新時間：2023年06月26日 15:10:09 作者：努力搬磚的giser

本文主要介紹了vue結合leaflet實現鷹眼圖，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

開發(fā)環(huán)境

Vue開發(fā)庫：3.2.37 & Leaflet開發(fā)庫：1.9.3

Leaflet插件：leaflet-minimap

使用教程

安裝依賴庫

方法一：通過npm安裝依賴

npm i leaflet-minimap

方法二：通過github倉庫下載，引入項目中（推薦）

leaflet-minimap官網 https://github.com/Norkart/Leaflet-MiniMap

克隆leaflet-minimap倉庫，下載完畢后，進入Leaflet-MiniMap文件夾，將dist目錄下的文件夾引入本地項目中。為什么推薦該方式引入呢？是因為該插件在進行最小化和展示時，鼠標懸浮 hover效果會有個英文提示出現，本地引入可以將英文提示語修改為中文，而不用去修改node_modules中的文件。

git clone https://github.com/Norkart/Leaflet-MiniMap

使用簡介

// 定義一個底圖(注意：小地圖的layer不能和地圖上共用一個，否則無法加載)
const minilayer = L.tileLayer(`https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}`)
// 使用小地圖，添加到地圖上
const miniMap = new L.Control.MiniMap(minilayer, {
    // 鷹眼圖配置項，參數非必須，可以忽略使用默認配置
    width: 300, // 鷹眼圖寬度
    height: 200, // 鷹眼圖高度
    toggleDisplay: true, // 是否顯示最小化按鈕
    minimized: false, // 是否最小化位置開始
}).addTo(map);
// 改變鷹眼圖圖層源
// miniMap.changeLayer('新的layer');
// 移除鷹眼小地圖
// map.removeControl(miniMap);

以下是核心的參數配置項，截圖于gitHub倉庫(更新時間:2023年5月30日)

詳細源碼(Vue3)

<template>
  <div class="app-contain">
    <!-- leaflet 地圖容器 -->
    <div id="myMap"></div>
  </div>
</template>
<script setup>
// 引入樣式
import {onMounted} from 'vue'
// 引入leaflet
import L from 'leaflet';
import 'leaflet/dist/leaflet.css'
// 小地圖
import "./store/Control.MiniMap.min.js";
import "./store/Control.MiniMap.min.css";
// 天地圖TK
let tdtKey = 'YOURS_TK'
const initMap = () => {
  // 影像地圖
  const tiandituMap = L.tileLayer(`http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
  // 注記
  const tiandituText = L.tileLayer(`http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)
  const layers = L.layerGroup([tiandituMap, tiandituText])
  let map = L.map('myMap', {  //需綁定地圖容器div的id
    center: [39.56, 116.20], //初始地圖中心
    zoom: 10, //初始縮放等級
    maxZoom: 18, //最大縮放等級
    minZoom: 0, //最小縮放等級
    zoomControl: true, //縮放組件
    attributionControl: false, //去掉右下角logol
    scrollWheelZoom: true, //默認開啟鼠標滾輪縮放
    // 限制顯示地理范圍
    maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)),
    layers: [layers] // 圖層
  })
  /** 添加小地圖 */
  // 定義一個底圖(注意：小地圖的layer不能和地圖上共用一個，否則無法加載)
  const minilayer = L.tileLayer(`https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}`)
  // 使用小地圖，添加到地圖上
  const miniMap = new L.Control.MiniMap(minilayer, {
    // 鷹眼圖配置項，參數非必須，可以忽略使用默認配置
    width: 300, // 鷹眼圖寬度
    height: 200, // 鷹眼圖高度
    toggleDisplay: true, // 是否顯示最小化按鈕
    minimized: false, // 是否最小化位置開始
  }).addTo(map);
  // miniMap.changeLayer('新的layer');
  // 移除小地圖
  // map.removeControl(miniMap);
}
onMounted(() => {
  initMap()
})
</script>
<style scoped>
#myMap {
  width: 86vw;
  height: 90vh;
}
</style>

到此這篇關于vue結合leaflet實現鷹眼圖的文章就介紹到這了,更多相關vue leaflet鷹眼圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: