练习：GeoJSON和leaflet配合使用（二）

<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>