快速入门

介绍

MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。

支持地图

推荐使用百度地图JavaScript API 4.0，也支持空白地图，可在示例demo中查看具体用法。

这里我们以百度地图JavaScript API 4.0为例，我们需要先引入地图的jsapi，然后就可以按照下面的使用方法介绍的，来做一个demo效果了。

1
<script src="https://api.map.baidu.com/api?v=4.0&ak=你的密钥"></script>

从JavaScript API GL版升级：把v=1.0&type=webgl改为v=4.0，命名空间改用BMap（BMapGL仍可作为别名使用），详见升级指南。

使用方法

NPM:

1
$ npm i mapvgl

CDN:

npm的cdn地址

1
2
3
4
<script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>

<!-- 如果使用到Three.js相关的图层需要引用 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>

备用百度cdn地址

1
2
3
4
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.200/dist/mapvgl.min.js"></script>

<!-- 如果使用到Three.js相关的图层需要引用 -->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.200/dist/mapvgl.threelayers.min.js"></script>

Hello World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 1. 创建地图实例，JSAPI 4.0支持在创建时指定中心点、级别、倾斜角和旋转角
var map = new BMap.Map('map_container', {
    center: new BMap.Point(116.403748, 39.915055),
    zoom: 17,
    tilt: 60,
    heading: 0
});

// 2. 创建MapVGL图层管理器
var view = new mapvgl.View({
    map: map
});

// 3. 创建可视化图层，并添加到图层管理器中
var layer = new mapvgl.PointLayer({
    color: 'rgba(50, 50, 200, 1)',
    blend: 'lighter',
    size: 2
});
view.addLayer(layer);

// 4. 准备好规范化坐标数据
var data = [{
    geometry: {
        type: 'Point',
        coordinates: [116.403748, 39.915055]
    }
}];

// 5. 关联图层与数据，享受震撼的可视化效果
layer.setData(data);

示例

更多炫酷的示例请访问示例demo