基于mapboxgl的室内地图制图编辑器-插件概览

992 阅读1分钟

以下内容仅介绍完成室内地图功能所需要用到的插件,给大家提供一个参考,详细api可以跳转到对应网站进行查看。

一、mapbox-gl

初始化

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

判断

turf.booleanPointInPolygon(point, polygon) //判断点是否在多边形内
turf.booleanCrosses(line1, line2) //判断是否相交
...

变换

turf.transformRotate(poly, 10, options) //旋转
turf.transformTranslate(poly, 100, 35) //平移
...

三、threebox

初始化

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

初始化

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

创建图Graph

const graph = new UndirectedGraph();
graph.addNode(key, attr);
graph.addEdge(preKey, key, { weight: 1 })

路径规划

const path = dijkstra.bidirectional(
  graph,
  source,
  target
)