<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { onMounted } from "vue";
// 改变点的样式
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8,
};
let travelData = [
{ lat: 45.78, lng: 126.58, address: "哈尔滨" }, // 哈尔滨
{ lat: 36.07, lng: 120.38, address: "青岛" }, //青岛
{ lat: 32.06, lng: 118.8, address: "南京" }, //南京
{ lat: 31.24, lng: 121.5, address: "上海" }, //上海
{ lat: 30.22, lng: 120.12, address: "杭州" }, //杭州
{ lat: 25.68, lng: 118.1, address: "厦门" }, //厦门
{ lat: 24.44, lng: 100.3, address: "大理" }, //大理
{ lat: 44.6, lng: 81.39, address: "新疆" }, // 新疆
{ lat: 30.57, lng: 104.07, address: "成都" }, //成都
{ lat: 29.56, lng: 106.55, address: "重庆" }, //重庆
{ lat: 28.23, lng: 112.94, address: "长沙" }, // 长沙
{ lat: 30.59, lng: 114.3, address: "武汉" }, //武汉
{ lat: 34.34, lng: 108.94, address: "西安" }, //西安
{ lat: 34.62, lng: 112.45, address: "洛阳" }, // 洛阳
{ lat: 39.9, lng: 116.41, address: "北京" }, // 北京
];
onMounted(() => {
initMap();
});
/**
* @author:南希Libra
* @description:初始化地图
*/
const initMap = () => {
var map = L.map("geoJson").setView([39.904896, 116.724762], 4);
// 添加描述
getDescribe(map);
//GeoJSON 一个点
let geojsonFeature = getMultiplePoints();
L.geoJSON(geojsonFeature, {
// 修改样式
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
},
// 点击事件
onEachFeature: onEachFeature,
滤波器:控制可见性
filter: function (feature, layer) {
return feature.properties.show_on_map;
},
}).addTo(map);
//GeoJSON 线段
let draw_line = getMultipleLine();
draw_line.forEach((item) => {
console.log(item, "===");
L.geoJson(item, {
style: {
color: "red",
weight: 5,
},
onEachFeature,
}).addTo(map);
});
let url =
"http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
// let url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
L.tileLayer(url, {
maxZoom: 8,
}).addTo(map);
// 显示应用于地图中心点的比例
L.control.scale().addTo(map);
};
/**
* @author:南希Libra
* @description:类似于点击事件方法
*/
const onEachFeature = (feature, layer) => {
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
};
/**
* @author:南希Libra
* @description:循环遍历多个点
*/
const getMultiplePoints = () => {
let geojsonFeature = [];
for (let i = 0; i < travelData.length - 1; i++) {
let lat = travelData[i]?.lat;
let lng = travelData[i]?.lng;
let address = travelData[i]?.address;
let obj = {
type: "Feature",
properties: {
name: `GeoJSON 点${i}`,
show_on_map: true, // 滤波器:控制可见性
amenity: "Baseball Stadium",
popupContent: `我是${address}`,
},
geometry: {
type: "Point",
coordinates: [lng, lat],
},
};
geojsonFeature.push(obj);
}
return geojsonFeature;
};
/**
* @author:南希Libra
* @description:循环遍历多个线段
*/
const getMultipleLine = () => {
let draw_line = [];
console.log(travelData.length);
for (let i = 0; i < travelData.length - 1; i++) {
let latlng1 = [travelData[i]?.lng, travelData[i]?.lat];
let latlng2 = [travelData[i + 1]?.lng, travelData[i + 1]?.lat];
let address = [travelData[i]?.address, travelData[i + 1]?.address];
let obj = {
type: "Feature",
geometry: {
type: "LineString",
coordinates: [latlng1, latlng2],
},
properties: {
popupContent: `我是从${address[0]}到${address[1]}的线段`,
underConstruction: true,
},
};
draw_line.push(obj);
}
return draw_line;
};
/**
* @author:南希Libra
* @description:设置描述
*/
const getDescribe = (map) => {
let legend = L.control({ position: "bottomright" });
legend.onAdd = function (map) {
let div = L.DomUtil.create("div", "legend");
div.innerHTML = `
<p><b>我的旅游规划路线</b></p><hr>
<ul>
<li>哈尔滨</li>
<li>青岛</li>
<li>南京</li>
<li>上海</li>
<li>杭州</li>
<li>厦门</li>
<li>大理</li>
<li>新疆</li>
<li>成都</li>
<li>重庆</li>
<li>长沙</li>
<li>武汉</li>
<li>西安</li>
<li>洛阳</li>
<li>北京</li>
</ul>
`;
return div;
};
legend.addTo(map);
};
</script>
<template name='GeoJSON'>
<div>GEOJSON</div>
<div id="geoJson"></div>
</template>
<style scoped lang='scss'>
#geoJson {
width: 1200px;
height: 560px;
border: 1px solid #f00;
}
:deep(.legend) {
font-size: 16px;
line-height: 24px;
color: #333333;
font-family: "Open Sans", Helvetica, sans-serif;
padding: 10px 14px;
background-color: pink;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
max-width: 250px;
border: 1px solid grey;
overflow-y: auto;
height: 450px;
}
.legend p {
font-size: 16px;
line-height: 24px;
}
</style>
06-10