时间戳

首页 > 解决方案 > mapbox-gl-directions（插件）如何更改标记 A 和 B

reactjs - mapbox-gl-directions（插件）如何更改标记 A 和 B

问题描述

我使用这个名为 mapbox-gl-directions 的插件，有没有办法更改标记 A 和 B？我没有看到任何关于如何编辑这些标记的文档或教程，如果有感谢，请帮助我。

地图图片

import { useEffect, useRef } from "react";
import mapboxgl from "mapbox-gl";
import MapboxDirection from "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions";

import * as Styles from "./styled";
import "mapbox-gl/dist/mapbox-gl.css";
import "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css";

mapboxgl.accessToken = process.env.REACT_APP_MAPBOX;

const Map = () => {
  const mapContainer = useRef(null);
  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mystyle",
      center: [121.0503, 14.5547],
      zoom: 17,
    });

    const directions = new MapboxDirection({
      accessToken: mapboxgl.accessToken,
      unit: "metric",
      profile: "mapbox/walking",
      alternatives: true,
      geometries: false,
      controls: { instructions: true },
      flyTo: false,
    });

    

    map.addControl(directions, "top-left");
    map.scrollZoom.enable();
  }, []);

  return (
    <div>
      <Styles.Mapcontainer
        ref={mapContainer}
        className="map-container"
      ></Styles.Mapcontainer>
    </div>
  );
};

export default Map;

标签： reactjsmapboxmapbox-gl-jsmapbox-gl

解决方案

我有另一个问题。如何更改此部分以制作自定义标记，我只能更改其颜色和文本字段

谢谢 ：）

 {
        id: "directions-origin-point",
        type: "circle",
        source: "directions",
        paint: {
          "circle-radius": 18,
          "circle-color": "#3bb2d0",
        },
        filter: ["all", ["in", "$type", "Point"], ["in", "marker-symbol", "A"]],
      },
      {
        id: "directions-origin-label",
        type: "symbol",
        source: "directions",
        layout: {
          "text-field": "A",
          "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
          "text-size": 12,
        },
        paint: {
          "text-color": "#fff",
        },
        filter: ["all", ["in", "$type", "Point"], ["in", "marker-symbol", "A"]],
      },

推荐阅读