简体繁体 English

Mapbox GL绘制线条和贝塞尔曲线

[英]Mapbox GL draw lines and bezier

原文 2016-06-29 18:52:59 9 2 javascript/ mapbox-gl/ mapbox-gl-js

There is some way to draw line inside Mapbox GL? 有一些方法可以在Mapbox GL中绘制线条吗？ For example, i need to draw some lines (straight or curve) that connect my markers. 例如，我需要画一些连接我的标记的线（直线或曲线）。 With Mapbox i can use Arc.js but i don't know if there already exist some solution for Mapbox GL. 使用Mapbox我可以使用Arc.js，但我不知道是否已经存在Mapbox GL的某些解决方案。

I found mapbox-gl-draw ( https://bl.ocks.org/danswick/083a0b48c2cc78c4a08d ) but it seems just a tool to use inside a map... but i don't see any API to for draw using javascript. 我找到了mapbox-gl-draw（ https://bl.ocks.org/danswick/083a0b48c2cc78c4a08d ），但它似乎只是一个在地图中使用的工具......但我没有看到任何使用javascript绘制的API。

I also found this Tesspathy ( http://gree.github.io/tesspathy/ ) and maybe one solution could be using it to draw inside a map's context. 我也发现了这个Tesspathy（ http://gree.github.io/tesspathy/ ），也许一个解决方案可以用它来绘制地图的上下文。

What do you think? 你怎么看？ What could be the best way? 什么是最好的方式？ Thanks! 谢谢！

2 个解决方案

The preferred way to draw lines within Mapbox GL JS is to express the lines as GeoJSON and add them to the map as a GeoJSONSource / line layer pair. 在Mapbox GL JS中绘制线条的首选方法是将线条表示为GeoJSON，并将它们作为GeoJSONSource /线图层对添加到地图中。

You might find this example of drawing a GeoJSON line and this example of drawing a great arc line helpful. 您可能会发现这个绘制GeoJSON线的示例，这个绘制一条很棒的弧线的示例很有帮助。

mapbox-gl-draw is the Mapbox supported GeoJSON drawing tool for mapbox-gl. mapbox-gl-draw是Mapbox支持的Mapbox-gl GeoJSON绘图工具。 It creates GeoJSON which does not support bezier curves, but it can be used to draw LineStrings. 它创建了不支持贝塞尔曲线的GeoJSON，但它可用于绘制LineStrings。