lonbon-map v1.1.50

lonbon-map

安装

1.安装npm包

npm install lonbon-map -S

2. index.html添加threebox依赖

<script src="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/dist/threebox.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/dist/threebox.css" rel="stylesheet" />

使用

import { Map } from 'lonbon-map'

this.map = new Map({
    is3D: this.is3D, //默认true
    center: [longitude, latitude],
})
this.map.on('load', async () => {
    await this.map.createBack(require("./back.png"))
    this.map.createFloors({
        floorId: floorId, //楼层唯一标识
        maps: [{
            polygons: polygons, //建筑物
            scenegraphs: scenegraphs //3d模型
        }],
        bottom: bottom //楼层底图数据
    })
})

方法

地图相关

1.  创建背景图

    使用方法：this.map.createBack(image|color)

    参数：

    image|color 图片|颜色

2.  创建多楼层/单楼层地图

    使用方法：this.map.createFloors(array|object)

    参数（多楼层传array，单楼层传object）：

    floorId 楼层唯一标识
    maps 地图信息
        --polygons 建筑物geojson
        --scenegraphs 3d模型geojson
        --pois 兴趣点geojson（待开发）
    bottom 底图geojson
    

3. 创建标记点

    使用方法：this.map.createMarker(params)

    参数：

    position 地理坐标，必填
    content 显示内容，必填
    popup 点击显示的弹框
    其它参数参考https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker

4. 创建弹框

    使用方法：this.map.createPopup(params)

    参数：

    position 地理坐标，必填
    content 显示内容，必填
    其它参数参考https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup

5. 创建多边形

    使用方法：this.map.createPolygon(params)

    参数：

    geometry geojson数据，必填
    id 唯一标识
    color 颜色
    base 基础高度
    height 高度
    opacity 透明度

6. 切换视角

    使用方法： this.map.transView()

    返回值：boolean 当前视角是否为3d

7. 创建围栏

    使用方法： this.map.createFence(params)

    参数：

    editable 是否为编辑状态
    geometry geojson数据

围栏相关

1. 更改可编辑状态

    使用方法： this.map.fence.changeEditable()

    返回值：boolean 当前可编辑状态

2. 删除围栏

    使用方法： this.map.fence.remove()

3. 销毁当前围栏对象

    使用方法： this.map.fence.destroy()

4. 获取围栏geojson数据

    使用方法：this.map.fence.getGeoJson()