準備
1. リーフレットと Gaode のタイルを通じてオフライン マップを実現しました
2. npm、CDN、直接ダウンロード zip パッケージを通じてリーフレットをインポートし、中国の Web サイトにリーフレット
を添付することができます 3. Gaode のタイルに関する多くの投稿を見つけました。タイル ダウンロード プロジェクト (元の投稿がどこにあるか忘れました) ですが、このプロジェクトは Java プロジェクトであり、バックエンド ブラザーの助けを借りてダウンロードされ、プロジェクトの元のアドレスが添付されています。 18レベルの
ズーム、すべてのファイルをダウンロードすると、ファイル サイズが大きすぎます (3,000 万以上のファイル、数十ギガバイトのストレージと推定)、ここでは 1 ～ 12 レベルのみをダウンロードしましたが、比較的鮮明です (画像リソース)パブリックフォルダーに配置する必要があります)
コードを開発する
1.HTML部分
<template>
<div class="main">
<!-- 地图 -->
<div id="container"></div>
</div>
</template>
2.JS部分
<script>
import icon from '@/assets/pointIcon.png'
import '@/leaflet/leaflet.js'
export default {
name: 'CenterMap',
props: {
mapPointList: {
type: Array,
default: []
}
},
mounted() {
//地图初始化
this.initMap(this.mapPointList)
},
methods: {
//DOM初始化完成进行地图初始化
initMap(list) {
// 设置iocn
var myIcon = L.icon({
iconUrl: icon, //图标
iconSize: [25, 34], //大小
iconAnchor: [12.5, 34] //偏移量
})
// 初始化地图
var map = L.map('container').setView([28.697005, 115.885607], 8)
// 瓦片图层
L.tileLayer('/staticImg/{z}/{x}/{y}.png', {
minZoom: 7, //最小缩小层级
maxZoom: 12, //最大放大层级
attribution: '<b style="color:#40a9ff">高德地图</b>' //版权信息
}).addTo(map)
// 通过数据标注icon
if (list.length > 0) {
list.forEach(v => {
// 这里是纬度在前 【纬度，经度】
var marker = L.marker(v.point, {
icon: myIcon //icon
})
.addTo(map)
// Tooltip 工具提示 https://leafletjs.cn/reference.html#tooltip
.bindTooltip(v.deviceName, {
permanent: true, //是永久打开 Tooltip 还是只在鼠标移动时打开。
direction: 'bottom', //打开 Tooltip 的方向
offset: [0, 5], //Tooltip 位置的可选偏移
opacity: 1, //Tooltip 容器透明度
autoPlan: true //跟随缩放变化 好像没有起作用
})
marker.on('click', function(e) {
L.popup({
offset: [0, -25] //popup 位置的可选偏移
})
.setLatLng(v.point)
.setContent(
`<p style='text-align:center'>${
v.deviceName}</p>
<p>设备编码：${
v.deviceCode}</p>
<p>设备地址：${
v.address }</p>
<p>设备状态：<span style="background-color:${
v.state == 0 ? 'green' : 'red'};color: #fff;
padding: 2px 4px;">${
v.state == 0 ? '在线' : '离线'}</span></p>`
)
.openOn(map)
})
})
}
},
// 父组件调用 接口更新地图随之更新
setMapData(list) {
//地图初始化
this.initMap(list)
}
}
}
</script>
3.CSS部分
<style lang="less" scoped>
.main {
width: 100%;
height: 100%;
}
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
やっと
ダウンロードした zip で紹介されているリーフレットです。全体的なコードが乱雑で不備がある可能性があります。問題が発生した場合は、時間内にフィードバックしてください。
忘れずにインポートしてくださいリーフレット.cssファイルを作成しないと、マップがおかしくなります
。インポートすることを忘れないでください。リーフレット.cssファイルを作成しないと、マップがおかしくなります
。インポートすることを忘れないでください。リーフレット.cssファイルやマップがおかしくなります