Невозможно изменить размер и перетащить круг, используя mapbox-gl-circle - PullRequest
Новая
       17

Невозможно изменить размер и перетащить круг, используя mapbox-gl-circle

0 голосов
/ 08 февраля 2020

Я использую react-map-gl + mapbox-gl-circle. Я отобразил круг, но не могу изменить его размер и перетащить его.

Но если я использую mapbox-gl + mapbox-gl-circle = все хорошо. 

import React from "react";
import MapboxCircle from "mapbox-gl-circle";
import MapGL from "react-map-gl";

const MAPBOX_ACCESS_TOKEN =
  "pk.eyJ1IjoiYWxlcGhyaSIsImEiOiJjamdwbHpycjIyZm45Mndud3AzamRibHpqIn0.ejAHwSGT6dcGxiDOrPCFLg";

export default function App() {
  const [viewport, setViewport] = React.useState({
    latitude: 6,
    longitude: 22,
    zoom: 12,
    bearing: 0,
    pitch: 0
  });

  const [mapRef, setMapRef] = React.useState(null);

  const myCircle = new MapboxCircle({ lat: 6, lng: 22 }, 2200, {
    editable: true,
    minRadius: 120,
    fillColor: "#29AB87"
  });

  if (mapRef !== null) {
    myCircle.addTo(mapRef.getMap());

    myCircle.on("centerchanged", function(circleObj) {
      console.log("New center:", circleObj.getCenter());
    });
    myCircle.once("radiuschanged", function(circleObj) {
      console.log("New radius (once!):", circleObj.getRadius());
    });
    myCircle.on("click", function(mapMouseEvent) {
      console.log("Click:", mapMouseEvent.point);
    });
    myCircle.on("contextmenu", function(mapMouseEvent) {
      console.log("Right-click:", mapMouseEvent.lngLat);
    });
  }

  return (
      <MapGL
        ref={e => setMapRef(e)}
        width="100%"
        height="100vh"
        mapStyle="mapbox://styles/mapbox/light-v9"
        mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
        latitude={viewport.latitude}
        longitude={viewport.longitude}
        zoom={viewport.zoom}
        bearing={viewport.bearing}
        pitch={viewport.pitch}
        onViewportChange={viewport => setViewport(viewport)}
      />
  );
}

Codesandbox react-map-gl пример: https://codesandbox.io/s/competent-feather-geo7c

Codesandbox mapbox-gl пример: https://codesandbox.io/s/react-and-mapbox-gl-2tnnx

...