Leaflet地图实例

news2024/10/7 2:18:23

React+TypeScript实例：

import React, { useEffect, useRef } from "react";
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";

const App: React.FC = () => {
  const mapRef = useRef<HTMLDivElement>(null);

  const points: [number, number][]= [
    [28.222, 112.92],
    [28.224, 112.922],
    [28.226, 112.924],
    [28.228, 112.926],
    [28.23, 112.928],
    [28.23, 112.93],
    [28.2321, 112.932],
    [28.234, 112.9342],
    [28.2361, 112.9361],
    [28.238, 112.938],
    [28.24, 112.94],
    [28.242, 112.942],
    [28.244, 112.944],
    [28.246, 112.946],
    [28.248, 112.948],
    [28.25, 112.95],
    [28.252, 112.952],
    [28.255, 112.955]
  ];

  const draw = (points: [number, number][], width: number) => {
      const map: L.Map = L.map(mapRef.current as HTMLInputElement).setView([28.23, 112.93], 13);

      L.tileLayer(
        "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
        {
          minZoom: 11,
          maxZoom: 16,
          attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }
      ).addTo(map);

      L.marker([28.23, 112.93]).addTo(map);

      points.forEach(point => {
        L.circle(point, {
          color: "red",
          fillColor: "red",
          fillOpacity: 1,
          radius: 30
        }).addTo(map);
      });

      const circle = L.circle(points[points.length - 1], {
        color: "red",
        fillColor: "#f03",
        fillOpacity: 0.5,
        weight: 2,
        radius: 1200 * width
      }).addTo(map);

      circle.bindPopup(`<b>半径为${width}公里</b>`);
  };

  useEffect(() => {
    draw(points, 0.25);
  }, []);

  return <div ref={mapRef}  style={{ height: "100vh" }}></div>;
};
export default App;

HTML实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Leaflet</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>
    <style>
      #map {
        height: 800px;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      const map = L.map("map").setView([28.23, 112.93], 13);

      L.tileLayer(
        "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
        {
          minZoom: 11,
          maxZoom: 16,
          attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }
      ).addTo(map);

      const marker = L.marker([28.23, 112.93]).addTo(map);

      const points = [
        [28.222, 112.92],
        [28.224, 112.922],
        [28.226, 112.924],
        [28.228, 112.926],
        [28.23, 112.928],
        [28.23, 112.93],
        [28.2321, 112.932],
        [28.234, 112.9342],
        [28.2361, 112.9361],
        [28.238, 112.938],
        [28.24, 112.94],
        [28.242, 112.942],
        [28.244, 112.944],
        [28.246, 112.946],
        [28.248, 112.948],
        [28.25, 112.95],
        [28.252, 112.952],
        [28.255, 112.955]
      ];

      // width：半径，单位为公里
      function draw(points, width) {
        points.forEach(function(point) {
          const circle = L.circle(point, {
            color: "red",
            fillColor: "red",
            fillOpacity: 1,
            radius: 30
          }).addTo(map);
        });

        const circle = L.circle(points[points.length - 1], {
          color: "red",
          fillColor: "#f03",
          fillOpacity: 0.5,
          weight: 2,
          radius: 1200 * width
        }).addTo(map);

        circle.bindPopup(`<b>半径为${width}公里</b>`);
      }

      draw(points, 0.25);
    </script>
  </body>
</html>