【发布时间】：2021-03-17 16:46:59
【问题描述】：
我正在使用带有 react 的地图框 api，我从后端获得了两种数据集，一种是自行车的停车点，另一种是发生事故的地方，我想用不同的标记显示这两种数据集/mapbox中的图标，我该怎么做？
目前显示单个数据集我正在使用下面的代码。
import React, { useState, useEffect, useRef } from "react";
import { useDispatch, useSelector } from 'react-redux';
import mapboxgl from 'mapbox-gl';
import {getBikeInfo, mapDetails} from './features/counter/getInfo/getDetails.js'
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet"></link>
function App() {
const dispatch = useDispatch();
const [dataLoaded, setDataLoaded] = useState(false);
const dataToDisplay = useSelector(mapDetails);
mapboxgl.accessToken = 'pk.eyJ1IjoidmloYW5nMTYiLCJhIjoiY2ttOHowc2ZhMWN2OTJvcXJ0dGpiY21pNyJ9.hK5Wxwby89E7tKWoBoY5bg';
const mapContainer = useRef(null);
let styles = {
'display' : 'none'
}
useEffect(() => {
// dispatch(getBikeInfo())
var map = new mapboxgl.Map({
container: mapContainer.current,
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
map.on('load', function () {
// Add an image to use as a custom marker
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
function (error, image) {
if (error) throw error;
map.addImage('custom-marker', image);
// Add a GeoJSON source with 2 points
map.addSource('points', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': dataToDisplay //list of all coordinates along require data
}
});
// Add a symbol layer
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'points',
'layout': {
'icon-image': 'custom-marker',
// get the title name from the source's "title" property
'text-field': ['get', 'title'],
'text-font': [
'Open Sans Semibold',
'Arial Unicode MS Bold'
],
'text-offset': [0, 1.25],
'text-anchor': 'top'
}
});
}
);
});
setDataLoaded(true);
}, [dataToDisplay]);
useEffect(() => {
dispatch(getBikeInfo())
},[])
return (
<div className="district-map-wrapper" style={dataLoaded ? undefined : {display: 'none'}}>
<div id="districtDetailMap" className="map">
<div style={{ height: "100%" }} ref={mapContainer}>
</div>
</div>
</div>
);
}
export default App;
以下是要填充的示例数据
type: "Feature",
geometry: {
type: "Point",
coordinates: [
-74.04281705617905,
40.71458403535893,
]
},
properties: {
title: 'some field'
}
解决方案： 根据@tylerban 的回答，我已经像这样更新了我的代码：
map.on('load', function () {
// Add an image to use as a custom marker
loadDataFromPara( dataToDisplay, 'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png', 'bikeLocation', 'bikePoints', 'bike-marker')
loadDataFromPara( collisionInfo, marker, 'collisionLocation', 'collisionPoints', 'collision-marker')
});
setDataLoaded(true);
function loadDataFromPara( data, image1, sourceName, layerName, imageMarker ){
map.loadImage(
image1,
function (error, image) {
if (error) throw error;
map.addImage(imageMarker, image);
// Add a GeoJSON source with 2 points
map.addSource(sourceName, {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': data
}
});
// Add a symbol layer
map.addLayer({
'id': layerName,
'type': 'symbol',
'source': sourceName,
'icon-allow-overlap': true,
'layout': {
'icon-image': imageMarker,
// get the title name from the source's "title" property
'text-field': ['get', 'title'],
'icon-allow-overlap': true,
'text-font': [
'Open Sans Semibold',
'Arial Unicode MS Bold'
],
'text-offset': [0, 1.25],
'text-anchor': 'top'
}
});
}
);
}
【问题讨论】：
标签： mapbox mapbox-gl-js mapbox-gl mapbox-marker