mapbox | 基于Mapbox的可视化模型展示方案 - | Graphics library

I use a similar code to draw a polygon on a basemap and have a similar issue when using Vue3 with leaflet and leaflet-draw. After drawing a polygon, I get a bunch of errors in the console, probably triggered by a mouseover event.

You may be missing the js and css for the mapbox-gl please put these in index.html it will work.

The moveTo method belongs to Camera object. ref.

I don't have the environment setuped to test. The code will look something like this:

It turns out to be mentioned in one of the example projects on compose right from the google, the code and the project on github can be found here

It can be done something like this:

Precision of 6 decimal places gives you ~10 centimeter accuracy. Mapbox is using GeoJSON specification which has following recommendation about precision:

The size of a GeoJSON text in bytes is a major interoperability consideration, and precision of coordinate values has a large impact on the size of texts. A GeoJSON text containing many detailed Polygons can be inflated almost by a factor of two by increasing coordinate precision from 6 to 15 decimal places. For geographic coordinates with units of degrees, 6 decimal places (a default common in, e.g., sprintf) amounts to about 10 centimeters, a precision well within that of current GPS systems. Implementations should consider the cost of using a greater precision than necessary.

GPS-enabled smartphones are typically accurate to within a 4.9 m (16 ft.) radius under open sky. However, their accuracy worsens near buildings, bridges, and trees.ref

Here is a demo of distance accuracy when precision of 6 decimal places is used:

By putting viewport and setViewport in the same context, you are forcing the sidebar to re-render each time the viewport changes, because it uses useContext(ViewportContext) — even though it only uses the setViewport part of the context. There are a few options:

• Reduce the performance impact of re-rendering by simply moving useContext(ViewportContext) into a sub-component, so that only the sub-component, not the whole sidebar, renders whenever the viewport is updated.
• If you only need one-way updates (sidebar button can set the map's viewport, but no other components need to know when the user moves around the map), then you could remove the setViewport call from the map.
• Put viewport and setViewport in separate contexts. This would mean two createContext() calls, but you would still keep a single ViewportProvider component that renders both providers, e.g. const [viewport, setViewport] = useState(); return .... Then, your sidebar can useContext only for the context it needs, and will not re-render when the other one changes.
• Use something like useContextSelector to replace const {setViewport} = useContext(ViewportContext) with const setViewport = useContextSelector(ViewportContext, (ctx) => ctx.setViewport).
• If you're considering broader architectural changes, libraries like React Redux or Recoil could provide alternative designs that would avoid this problem.

(By the way, in your code as written, I would recommend you wrap the value you pass to ViewportContext.Provider in a useMemo(() => ({viewport, setViewport}), [viewport, setViewport]), so that it doesn't trigger an update when the ViewportProvider is re-rendered if the viewport hasn't changed.)

That means that the package-lock.json file was created while performing an npm install with an npm version less than 7.

npm 7 has changed not only the format of package-lock.json, but also how it handles peer dependencies. When you upgrade to a newer npm version ( >=7 ) make sure to test everything properly with a freshly checked out repo that still has the old file version.

You can resolve the issue (when all testing went well) by committing and pushing the package-lock.json in the new format.

Having worked with mapbox pretty extensively, I can tell you that map.resize() will have to be called at some point, either by you, or by the react-map-gl bindings internally.

So, you need to first create a resize-handler, I prefer to do this in a hook:

The general approach to changing properties that don't have a specific method for them is: