實(shí)現(xiàn)效果
初始化：
image.png
點(diǎn)擊標(biāo)識(shí)點(diǎn)時(shí)自動(dòng)放大：
image.png
參考文章
Leaflet
https://github.com/Leaflet/Leaflet
https://leafletjs.com/index.html
中文文檔：https://leafletjs.cn/
Leaflet Indoor
https://github.com/cbaines/leaflet-indoor
npm 安裝 Leaflet
npm install leaflet
yarn 安裝 Leaflet
yarn add leaflet
這將在你的項(xiàng)目中安裝 Leaflet 庫(kù)蒙揣。安裝完成后悠夯，你可以在你的 Vue 項(xiàng)目中按照以下方式引入 Leaflet：
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
leaflet可能會(huì)報(bào)錯(cuò)扫步，我是在app.vue中做的demo，所以需要在vite-env.d.ts中聲明
declare module 'leaflet';
image.png
<template>
<div class="mapBox">
<div id="map"></div>
<div id="warehouse2"></div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import imageUrl from "./assets/warehouse1.png";
import warehouse2 from "./assets/warehouse2.png";
import marker from "./assets/jarMarker.png";
// const leftBottomLat = 0; // 左下角經(jīng)度
// const leftBottomLng = 0; // 左下角緯度
const getRealitySize = (size: number) => {
// type: "Lat" | "Lng"
// return type === "Lat"
// ? leftBottomLat + size / (40008000 / 360)
// : leftBottomLng + size / (40008000 / 360);// 40008000 是地球周長(zhǎng)
return size / (40008000 / 360);
};
const initMap1 = () => {
// 創(chuàng)建地圖實(shí)例并設(shè)置初始視圖
// Create the map
//地圖底圖
// var osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
// osm = new L.TileLayer(osmUrl, {
// maxZoom: 22,
// // attribution: "Map data © OpenStreetMap contributors"
// });
// 假設(shè)當(dāng)前左下角坐標(biāo)為 [leftBottomLat, leftBottomLng]
const factoryWidth = 1144; // 寬度移剪，單位：米
const factoryHeight = 676; // 高度，單位：米
// 計(jì)算右上角的經(jīng)緯度
const rightTopLng = getRealitySize(factoryWidth); //經(jīng)度
const rightTopLat = getRealitySize(factoryHeight); //緯度
//[[最小底部緯度, 最左側(cè)經(jīng)度（左下角的點(diǎn)位）], [最大頂部緯度, 最右側(cè)經(jīng)度（右上角的點(diǎn)位）]];
// 坐標(biāo)的順序應(yīng)該是[緯度, 經(jīng)度]
var imageBounds = [
[0, 0],
[rightTopLat, rightTopLng],
];
var map = new L.Map("map", {
// layers: [osm],
center: new L.LatLng(0, 0),
zoom: 16,
maxBounds: imageBounds,
attributionControl: false,
minZoom: 16, // 設(shè)置最小縮放級(jí)別
maxZoom: 25, // 設(shè)置最大縮放級(jí)別
});
var imageOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(map);
imageOverlay.setOpacity(0.5); // 設(shè)置不透明度為 0.5
// Add markers with custom icons
// var marker1 = L.marker([0, 0]).addTo(map);
// var popup1 = L.popup().setContent("Marker 1 Popup");
// marker1.bindPopup(popup1);
// var marker1 = L.marker([49.41873, 8.67689]).addTo(map);
// var popup1 = L.popup().setContent("Marker 1 Popup");
// marker1.bindPopup(popup1);
// var marker2 = L.marker([0.0002, 0.0003]).addTo(map);
// var popup2 = L.popup().setContent("Marker 2 Popup");
// marker2.bindPopup(popup2);
// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
// maxZoom: 19,
// attribution: '© <a
// }).addTo(map);
// // 添加一個(gè)簡(jiǎn)單的標(biāo)記
// L.marker([51.5, -0.09]).addTo(map)
// .bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
// .openPopup();
// // 添加一個(gè)簡(jiǎn)單的圓
// L.circle([51.508, -0.11], {
// color: 'red',
// fillColor: '#f03',
// fillOpacity: 0.5,
// radius: 500
// }).addTo(map).bindPopup('I am a circle.');
// 添加一個(gè)多邊形
const polygon = L.polygon(
[
[getRealitySize(45), getRealitySize(202)], // 左下角
[getRealitySize(48), getRealitySize(528)], // 右下角
[getRealitySize(156), getRealitySize(528)], // 右上角
[getRealitySize(156), getRealitySize(202)], // 左上角
],
{
color: "white", // 邊框顏色
fillColor: "white", // 填充顏色
fillOpacity: 1, // 完全不透明
}
)
.addTo(map)
.bindTooltip(
"<div style='font-weight:bold'>Dirty Staging</br>Clean Room</div>",
{
permanent: true,
direction: "center",
}
) // 添加 Tooltip
.on("click", function () {
const bounds = polygon.getBounds();
map.fitBounds(bounds);
});
// 你可以使用 polygon.getBounds() 獲取多邊形的邊界框
const polygonBounds = polygon.getBounds();
const numberOfMarkers = 50;
const customIcon = L.icon({
iconUrl: marker, // 圖標(biāo)的 URL
iconSize: [32, 32], // 圖標(biāo)的尺寸
iconAnchor: [16, 16], // 圖標(biāo)的錨點(diǎn)，即圖標(biāo)的中心點(diǎn)
});
for (let i = 0; i < numberOfMarkers; i++) {
// 隨機(jī)生成一個(gè)在多邊形內(nèi)的點(diǎn)
const randomPoint = getRandomPointInsidePolygon(polygonBounds);
// 添加標(biāo)記
L.marker([randomPoint.lat, randomPoint.lng], { icon: customIcon })
.addTo(map)
.bindPopup(
`<div><h3>Marker ${
i + 1
}</h3><p>Your custom HTML content goes here</p></div>`
)
.on("click", function () {
const bounds = polygon.getBounds();
map.fitBounds(bounds);
});
}
// 隨機(jī)生成一個(gè)在多邊形內(nèi)的點(diǎn)
function getRandomPointInsidePolygon(bounds: {
getSouthWest: () => any;
getNorthEast: () => any;
}) {
const southWest = bounds.getSouthWest();
const northEast = bounds.getNorthEast();
const lat = Math.random() * (northEast.lat - southWest.lat) + southWest.lat;
const lng = Math.random() * (northEast.lng - southWest.lng) + southWest.lng;
return { lat, lng };
}
// // 例如，在多邊形內(nèi)的點(diǎn)的坐標(biāo)
// const pointInsidePolygon = [getRealitySize(90), getRealitySize(200)];
// // 檢查點(diǎn)是否在多邊形內(nèi)
// if (
// polygonBounds.contains(
// L.latLng(pointInsidePolygon[0], pointInsidePolygon[1])
// )
// ) {
// // 在多邊形內(nèi)蚓庭，添加標(biāo)記
// const marker = L.marker([pointInsidePolygon[0], pointInsidePolygon[1]])
// .addTo(map)
// .bindPopup("Marker inside the polygon");
// }
// const demoText = L.divIcon({
// className: "demo-text",
// html: `<div style=''>PM</br>WH</div>`,
// });
// const textMarker = L.marker(polygon.getBounds().getCenter(), {
// icon: demoText,
// }).addTo(map);
};
onMounted(() => {
initMap1();
});
</script>
<style>
/* 去掉 Leaflet Tooltip 的默認(rèn)樣式 */
.leaflet-tooltip {
box-shadow: none !important;
border: none !important;
background-color: transparent !important;
}
/* 設(shè)置 Tooltip 文字的樣式 */
.leaflet-tooltip-content {
color: black; /* 文字顏色 */
font-size: 14px; /* 文字大小 */
}
</style>
<style scoped>
body {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.mapBox {
display: flex;
align-items: center;
height: 100vh;
}
#map {
height: 100%;
width: 50%;
}
.info {
width: 150px;
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 1);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
#warehouse2 {
width: 50%;
height: 100%;
}
</style>
