以下内容仅介绍完成室内地图功能所需要用到的插件,给大家提供一个参考,详细api可以跳转到对应网站进行查看。
一、mapbox-gl
mapbox-gl用于基础的地图渲染,docs.mapbox.com/mapbox-gl-j…
初始化
new mapboxgl.Map(...config)
地图管理
map.fitBounds() //自适应缩放
map.setPitch()
...
资源管理Source
map.addSource(sourceid, {
type: 'geojson',
data: data
})
map.getSource(sourceid)
map.removeSource(sourceid)
图层管理Layer
map.addLayer({
id,
type,
source,
layout,
paint
})
map.removeLayer(id)
二、turfjs
turfjs主要用于处理地理空间数据,turfjs.fenxianglu.cn/docs/api/al…
判断
turf.booleanPointInPolygon(point, polygon) //判断点是否在多边形内
turf.booleanCrosses(line1, line2) //判断是否相交
...
变换
turf.transformRotate(poly, 10, options) //旋转
turf.transformTranslate(poly, 100, 35) //平移
...
三、threebox
threebox用于加载3d模型,github.com/jscastro76/…
初始化
window.tb = new Threebox(
map,
map.getCanvas().getContext('webgl'),
{
defaultLights,
enableSelectingObjects,
enableDraggingObjects,
enableRotatingObjects,
enableTooltips
}
)
加载模型
window.tb.loadObj({
obj,
type,
units,
anchor,
scale,
rotation,
clone
}, (model) => {
});
四、mapbox-gl-draw
mapbox-gl-draw为基础的地图绘制工具,github.com/mapbox/mapb…
初始化
new MapboxDraw({
id,
displayControlsDefault,
defaultMode,
styles
})
切换模式
mapboxDraw.changeMode()
五、mapbox-gl-draw-extra
mapbox-gl-draw-extra为扩展的地图绘制工具,可用于绘制圆、矩形、吸附、缩放等功能,非官方插件,结合npm中相关源码进行的扩展
初始化
new MapboxDraw({
id,
defaultMode,
styles,
modes: {
...MapboxDraw.modes,
draw_rect: SnapRectMode,
draw_circle:SnapCircleMode,
draw_polygon: SnapPolygonMode,
draw_line_string: SnapLineMode,
draw_point: SnapPointMode,
direct_select: SnapDirectSelect,
simple_select: SnapSimpleSelect,
scale_rotate: ScaleRotate
},
snap: true,
snapOptions: {
snapPx: 5, // defaults to 15
snapToMidPoints: false, // defaults to false
snapVertexPriorityDistance: 0.0025, // defaults to 1.25
},
guides: false,
})
六、graphology、graphology-shortest-path
-
graphology用于处理路径规划所需要的Graph数据,graphology.github.io/ -
graphology-shortest-path用于路径规划,www.npmjs.com/package/gra…
创建图Graph
const graph = new UndirectedGraph();
graph.addNode(key, attr);
graph.addEdge(preKey, key, { weight: 1 })
路径规划
const path = dijkstra.bidirectional(
graph,
source,
target
)