Leaflet地图实例

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><linkrel="stylesheet"href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="crossorigin=""/><scriptsrc="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>