react+Mapbox GL实现标记地点、地域的功能

准备工作

首先，确保你已经：

• 注册了 Mapbox 账号并获取了访问令牌（access token）
  
• 创建了 React 项目
  

安装必要的依赖：

1. npm install mapbox-gl react-map-gl
2. # 或者
3. yarn add mapbox-gl react-map-gl

复制代码

基础舆图组件

首先创建一个基础舆图组件：

1. import React, { useRef, useEffect, useState } from 'react';
2. import mapboxgl from 'mapbox-gl';
3. import 'mapbox-gl/dist/mapbox-gl.css';
5. // 设置你的 Mapbox 访问令牌
6. mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
8. const MapboxMap = () => {
9.   const mapContainer = useRef(null);
10.   const map = useRef(null);
11.   const [lng, setLng] = useState(-70.9);
12.   const [lat, setLat] = useState(42.35);
13.   const [zoom, setZoom] = useState(9);
15.   useEffect(() => {
16.     if (map.current) return; // 如果地图已经初始化，则不再重复初始化
18.     map.current = new mapboxgl.Map({
19.       container: mapContainer.current,
20.       style: 'mapbox://styles/mapbox/streets-v11',
21.       center: [lng, lat],
22.       zoom: zoom
23.     });
25.     map.current.on('move', () => {
26.       setLng(map.current.getCenter().lng.toFixed(4));
27.       setLat(map.current.getCenter().lat.toFixed(4));
28.       setZoom(map.current.getZoom().toFixed(2));
29.     });
30.   }, []);
32.   return (
33.     <div>
34.       <div className="sidebar">
35.         Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
36.       </div>
37.       <div ref={mapContainer} className="map-container" />
38.     </div>
39.   );
40. };
42. export default MapboxMap;

复制代码

添加点标记

要在舆图上添加点标记，可以使用 mapboxgl.Marker：

1. useEffect(() => {
2.   if (!map.current) return;
4.   // 添加一个点标记
5.   new mapboxgl.Marker()
6.     .setLngLat([-70.9, 42.35])
7.     .addTo(map.current);
9.   // 可以添加多个标记
10.   const locations = [
11.     { lng: -70.92, lat: 42.36, title: '地点1' },
12.     { lng: -70.88, lat: 42.34, title: '地点2' },
13.   ];
15.   locations.forEach(loc => {
16.     new mapboxgl.Marker()
17.       .setLngLat([loc.lng, loc.lat])
18.       .setPopup(new mapboxgl.Popup().setHTML(`<h3>${loc.title}</h3>`))
19.       .addTo(map.current);
20.   });
21. }, []);

复制代码

绘制地域（多边形）

要绘制多边形地域，我们必要使用 GeoJSON 数据：

1. useEffect(() => {
2.   if (!map.current) return;
4.   // 等待地图加载完成
5.   map.current.on('load', () => {
6.     // 添加一个多边形区域
7.     map.current.addLayer({
8.       id: 'polygon',
9.       type: 'fill',
10.       source: {
11.         type: 'geojson',
12.         data: {
13.           type: 'Feature',
14.           geometry: {
15.             type: 'Polygon',
16.             coordinates: [[
17.               [-70.92, 42.36],
18.               [-70.88, 42.36],
19.               [-70.88, 42.34],
20.               [-70.92, 42.34],
21.               [-70.92, 42.36]
22.             ]]
23.           },
24.           properties: {}
25.         }
26.       },
27.       paint: {
28.         'fill-color': '#088',
29.         'fill-opacity': 0.4,
30.         'fill-outline-color': '#000'
31.       }
32.     });
34.     // 添加可交互的多边形
35.     map.current.addLayer({
36.       id: 'interactive-polygon',
37.       type: 'fill',
38.       source: {
39.         type: 'geojson',
40.         data: {
41.           type: 'Feature',
42.           geometry: {
43.             type: 'Polygon',
44.             coordinates: [[
45.               [-70.95, 42.38],
46.               [-70.90, 42.38],
47.               [-70.90, 42.33],
48.               [-70.95, 42.33],
49.               [-70.95, 42.38]
50.             ]]
51.           },
52.           properties: {
53.             name: '可交互区域'
54.           }
55.         }
56.       },
57.       paint: {
58.         'fill-color': '#800',
59.         'fill-opacity': 0.4,
60.         'fill-outline-color': '#000'
61.       }
62.     });
64.     // 添加点击事件
65.     map.current.on('click', 'interactive-polygon', (e) => {
66.       new mapboxgl.Popup()
67.         .setLngLat(e.lngLat)
68.         .setHTML(`<h3>${e.features[0].properties.name}</h3>`)
69.         .addTo(map.current);
70.     });
72.     // 鼠标悬停效果
73.     map.current.on('mouseenter', 'interactive-polygon', () => {
74.       map.current.getCanvas().style.cursor = 'pointer';
75.     });
77.     map.current.on('mouseleave', 'interactive-polygon', () => {
78.       map.current.getCanvas().style.cursor = '';
79.     });
80.   });
81. }, []);

复制代码

完整示例

下面是一个完整的组件，结合了标记地点和绘制地域的功能：

1. import React, { useRef, useEffect, useState } from 'react';
2. import mapboxgl from 'mapbox-gl';
3. import 'mapbox-gl/dist/mapbox-gl.css';
5. mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
7. const MapWithMarkersAndPolygons = () => {
8.   const mapContainer = useRef(null);
9.   const map = useRef(null);
10.   const [lng, setLng] = useState(-70.9);
11.   const [lat, setLat] = useState(42.35);
12.   const [zoom, setZoom] = useState(9);
14.   useEffect(() => {
15.     if (map.current) return;
17.     map.current = new mapboxgl.Map({
18.       container: mapContainer.current,
19.       style: 'mapbox://styles/mapbox/streets-v11',
20.       center: [lng, lat],
21.       zoom: zoom
22.     });
24.     map.current.on('move', () => {
25.       setLng(map.current.getCenter().lng.toFixed(4));
26.       setLat(map.current.getCenter().lat.toFixed(4));
27.       setZoom(map.current.getZoom().toFixed(2));
28.     });
30.     // 添加标记
31.     map.current.on('load', () => {
32.       // 点标记
33.       const locations = [
34.         { lng: -70.92, lat: 42.36, title: '地点1' },
35.         { lng: -70.88, lat: 42.34, title: '地点2' },
36.         { lng: -70.95, lat: 42.35, title: '地点3' }
37.       ];
39.       locations.forEach(loc => {
40.         new mapboxgl.Marker()
41.           .setLngLat([loc.lng, loc.lat])
42.           .setPopup(new mapboxgl.Popup().setHTML(`<h3>${loc.title}</h3>`))
43.           .addTo(map.current);
44.       });
46.       // 多边形区域
47.       map.current.addLayer({
48.         id: 'polygon',
49.         type: 'fill',
50.         source: {
51.           type: 'geojson',
52.           data: {
53.             type: 'Feature',
54.             geometry: {
55.               type: 'Polygon',
56.               coordinates: [[
57.                 [-70.92, 42.36],
58.                 [-70.88, 42.36],
59.                 [-70.88, 42.34],
60.                 [-70.92, 42.34],
61.                 [-70.92, 42.36]
62.               ]]
63.             },
64.             properties: {
65.               description: '静态区域'
66.             }
67.           }
68.         },
69.         paint: {
70.           'fill-color': '#088',
71.           'fill-opacity': 0.4,
72.           'fill-outline-color': '#000'
73.         }
74.       });
76.       // 可交互多边形
77.       map.current.addLayer({
78.         id: 'interactive-polygon',
79.         type: 'fill',
80.         source: {
81.           type: 'geojson',
82.           data: {
83.             type: 'Feature',
84.             geometry: {
85.               type: 'Polygon',
86.               coordinates: [[
87.                 [-70.95, 42.38],
88.                 [-70.90, 42.38],
89.                 [-70.90, 42.33],
90.                 [-70.95, 42.33],
91.                 [-70.95, 42.38]
92.               ]]
93.             },
94.             properties: {
95.               name: '可交互区域',
96.               description: '点击我可以看到更多信息'
97.             }
98.           }
99.         },
100.         paint: {
101.           'fill-color': '#800',
102.           'fill-opacity': 0.4,
103.           'fill-outline-color': '#000'
104.         }
105.       });
107.       // 添加点击事件
108.       map.current.on('click', 'interactive-polygon', (e) => {
109.         new mapboxgl.Popup()
110.           .setLngLat(e.lngLat)
111.           .setHTML(`
112.             <h3>${e.features[0].properties.name}</h3>
113.             <p>${e.features[0].properties.description}</p>
114.           `)
115.           .addTo(map.current);
116.       });
118.       // 鼠标悬停效果
119.       map.current.on('mouseenter', 'interactive-polygon', () => {
120.         map.current.getCanvas().style.cursor = 'pointer';
121.       });
123.       map.current.on('mouseleave', 'interactive-polygon', () => {
124.         map.current.getCanvas().style.cursor = '';
125.       });
126.     });
127.   }, []);
129.   return (
130.     <div>
131.       <div className="sidebar">
132.         Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
133.       </div>
134.       <div ref={mapContainer} className="map-container" />
135.     </div>
136.   );
137. };
139. export default MapWithMarkersAndPolygons;

复制代码

样式

添加一些根本样式到你的 CSS 文件中：

1. .map-container {
2.   position: absolute;
3.   top: 0;
4.   bottom: 0;
5.   left: 0;
6.   right: 0;
7. }
9. .sidebar {
10.   position: absolute;
11.   top: 0;
12.   left: 0;
13.   margin: 12px;
14.   background-color: #404040;
15.   color: #ffffff;
16.   z-index: 1;
17.   padding: 6px;
18.   font-weight: bold;
19. }

复制代码

使用 react-map-gl (官方 React 封装)

如果你更喜好使用官方 React 封装，可以如许实现：
[code]import React, { useState, useCallback } from 'react';
import ReactMapGL, { Marker, Popup, Source, Layer } from 'react-map-gl';

const MapWithReactMapGL = () => {
  const [viewport, setViewport] = useState({
    latitude: 42.35,
    longitude: -70.9,
    zoom: 9,
    width: '100%',
    height: '100%'
  });

  const [selectedPoint, setSelectedPoint] = useState(null);
  const [selectedPolygon, setSelectedPolygon] = useState(null);

  const points = [
    { id: 1, longitude: -70.92, latitude: 42.36, name: '地点1' },
    { id: 2, longitude: -70.88, latitude: 42.34, name: '地点2' },
  ];

  const polygonData = {
    type: 'Feature',
    geometry: {
      type: 'Polygon',
      coordinates: [[
        [-70.92, 42.36],
        [-70.88, 42.36],
        [-70.88, 42.34],
        [-70.92, 42.34],
        [-70.92, 42.36]
      ]]
    },
    properties: {}
  };

  const handlePolygonClick = useCallback((event) => {
    setSelectedPolygon({
      lngLat: event.lngLat,
      feature: event.features[0]
    });
  }, []);

  return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken="YOUR_MAPBOX_ACCESS_TOKEN"
      onViewportChange={setViewport}
      onClick={handlePolygonClick}
      interactiveLayerIds={['polygon-layer']}
    >
      {/* 点标记 */}
      {points.map(point => (
        <Marker
          key={point.id}
          longitude={point.longitude}
          latitude={point.latitude}
        >
          <button
            style={{ background: 'none', border: 'none', cursor: 'pointer' }}
            onClick={e => {
              e.preventDefault();
              setSelectedPoint(point);
            }}
          >
            <div style={{ color: 'red', fontSize: '24px' }}>

继续阅读请点击广告