如何在mapbox中为不同的数据集设置不同的标记

问题描述

我正在使用带有反应的地图框api，我从后端获得两种数据集，一种是自行车的停车点，另一种是数据集是发生事故的地方，我想用不同的标记显示两个数据集mapBox 中的 /icons，我该怎么做？

当前显示单个数据集我使用下面的代码。

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,image) {
          if (error) throw error;
          map.addImage(imageMarker,image);
          // Add a GeoJSON source with 2 points
          map.addSource(sourceName,'features': data
            }
          });

          // Add a symbol layer
          map.addLayer({
            'id': layerName,'source': sourceName,'icon-allow-overlap': true,'layout': {
              'icon-image': imageMarker,'text-anchor': 'top'
            }
          });


         
        }
      );
    }

解决方法

自行车停放点和事故地点是否包含在同一个源（数据集）中，还是您要添加到地图中的两个不同的源和图层？

如果自行车停放和事故包含在同一个源中，您可以使用 data driven styling in Mapbox 根据数据中的字段分配图标。因此，如果您在源中有一个字段可用于确定一个点是否代表自行车停放点或事故，您将关闭它。

这里有一些伪代码说明了如何做到这一点。

map.addLayer({
  id: 'points',type: 'symbol',source: 'points',layout: {
    'icon-image': [
      'match',[ 'get','type' ],// type corresponds to the field name you are keying off of
      [ 'bike parking' ],'custom-marker',[ 'pedestrian' ],'custom-marker-2','custom-marker' // fallback icon
    ],// 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'
  }
})

如果自行车停放和事故包含在两个单独的源中，您只需为每个源添加一个图层，并在将图层添加到地图时指定一个图标。

这是一些伪代码

// Add a bike parking layer
map.addLayer({
  'id': 'bike-parking','type': 'symbol','source': 'bike-parking-source','layout': {
    'icon-image': 'custom-marker',// get the title name from the source's "title" property
    'text-field': ['get','title'],'text-offset': [0,1.25],'text-anchor': 'top'
  }
});

// Add an accidents layer
map.addLayer({
  'id': 'accidents','source': 'accidents-source','layout': {
    'icon-image': 'custom-marker-2','text-anchor': 'top'
  }
});

我写了许多关于使用 React 和 Mapbox 的深入文章，如果您觉得它们有用，我会在下面链接到它们。我还在编写 Mapbox 开发人员手册，其中包含如何构建强大的地图驱动应用程序的来龙去脉。

mapbox mapbox mapbox-gl mapbox-gl-js mapbox-marker

如何在mapbox中为不同的数据集设置不同的标记

问题描述

解决方法

相关问答