快捷導(dǎo)航

vue結(jié)合leaflet實現(xiàn)地圖放大鏡

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

放大鏡在很多地方都可以使用的到，本文主要介紹了vue結(jié)合leaflet實現(xiàn)地圖放大鏡，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

Leaflet插件：leaflet.magnifyingglass

使用教程

安裝依賴庫

通過github倉庫下載，引入項目中

leaflet.magnifyingglass倉庫 https://github.com/bbecquet/Leaflet.MagnifyingGlass

克隆leaflet.magnifyingglass倉庫，下載完畢后，進(jìn)入Leaflet.MagnifyingGlass文件夾，將該目錄下的leaflet.magnifyingglass.js和leaflet.magnifyingglass.css引入本地項目中。

# 克隆leaflet.magnifyingglass倉庫
git clone https://github.com/bbecquet/Leaflet.MagnifyingGlass.git

使用簡介

// 創(chuàng)建地圖放大鏡底圖(請勿使用主地圖已在使用的圖層對象)
const baseLayer1 = L.tileLayer('https://tiles1.geovisearth.com/base/v1/vec/{z}/{x}/{y}?token=yours_token'); 
const vecLayer = L.layerGroup([baseLayer1])
// 創(chuàng)建地圖放大鏡圖層，并添加到地圖中
let magnifyingGlass = L.magnifyingGlass({
    // 主地圖縮放和放大鏡之間的縮放級別偏移
    zoomOffset: 3,
    layers: [vecLayer]
}).addTo(map);

以下是核心的參數(shù)配置項(更新時間:2023年5月13日)

參數(shù)	類型	默認(rèn)	描述
radius	`Integer`	100	放大鏡的半徑（以像素為單位）
zoomOffset	`Integer`	3	主地圖縮放和放大鏡之間的縮放級別偏移
fixedZoom	`Integer`	-1	放大鏡圖層顯示固定某一層級，不隨地圖比例尺變化而變化
fixedPosition	`Boolean`	false	如果為`true`放大鏡將停留在地圖上的相同位置，而不是跟隨鼠標(biāo)光標(biāo)移動
latLng	`LatLng`	[0, 0]	放大鏡的初始位置，既在主地圖上，又作為放大視圖的中心。
layers	`ILayer[]`	空	要在放大視圖中顯示的圖層集(請勿使用主地圖已在使用的圖層對象)

詳細(xì)源碼(Vue3)

<template>
  <div class="app-contain">
    <!-- leaflet 地圖容器 -->
    <div id="myMap"></div>
  </div>
</template>
<script setup>
// 引入樣式
import L from 'leaflet';
import 'leaflet/dist/leaflet.css'
// 引入地圖放大鏡
import './store/leaflet.magnifyingglass.css'
import './store/leaflet.magnifyingglass.js'
import {onMounted} from 'vue'
const initMap = () => {
  // 影像地圖
  const sourceMap = L.tileLayer('https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?token=yours_token');
  const layers = L.layerGroup([sourceMap])
  let map = L.map('myMap', {  //需綁定地圖容器div的id
    attributionControl: false,
    zoomControl: true, // 顯示縮放控件
    // 最小顯示等級
    minZoom: 1,
    // 最大顯示等級
    maxZoom: 18,
    // crs: L.CRS.EPSG3857,//設(shè)置坐標(biāo)系類型  EPSG3857偽墨卡托投影
    scrollWheelZoom: true, //默認(rèn)開啟鼠標(biāo)滾輪縮放
    // 限制顯示地理范圍
    maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)),
    // 限制顯示地理范圍
    layers: [layers] // 圖層
  }).setView([28.907459, 120.003576], 6)
  // 比例尺
  L.control.scale({maxWidth: 240, metric: true, imperial: false, position: 'bottomleft'}).addTo(map);
  /** 地圖放大鏡 */
  const baseLayer1 = L.tileLayer('https://tiles1.geovisearth.com/base/v1/vec/{z}/{x}/{y}?token=yours_token');
  const vecLayer = L.layerGroup([baseLayer1])
  // 創(chuàng)建地圖放大鏡圖層，并添加到地圖中
  let magnifyingGlass = L.magnifyingGlass({
    // 主地圖縮放和放大鏡之間的縮放級別偏移
    zoomOffset: 3,
    layers: [vecLayer]
  }).addTo(map);
}
onMounted(() => {
  initMap()
})
</script>
<style scoped>
#myMap {
  width: 96vw;
  height: 96vh;
}
</style>

到此這篇關(guān)于vue結(jié)合leaflet實現(xiàn)地圖放大鏡的文章就介紹到這了,更多相關(guān)vue leaflet地圖放大鏡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: