快速上手

初始化地图

简单创建一个地图只需要一行代码，构造参数中的container为准备阶段添加的地图容器的id：

var map = new mapgl.Map(container:"map"）

创建的时候可以给地图设置中心点、级别、显示级别、自定义样式等属性。

        var map = new mapgl.Map({
            container:"map",
            center:[116.4124519634895,39.9043382673205],
            zoom:8,
			style:"http://vmapi.wutu.com.cn/api/v1/styles/wutu/f8cfc188-6a86-475a-b207-a108cfdfbabd/style.json"
        })

叠加图层

默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过map.add方法添加图层：

假设我们需要添加一个线类型的矢量图层：

    <script>
        map.on('load', function () {
            map.addLayer({
                "id": "route",
                "type": "line",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "Feature",
                        "properties": {},
                        "geometry": {
                            "type": "LineString",
                            "coordinates": [

                                [ 115.9820125103085,  40.48338535194236],
                                [ 116.2292048931211, 40.23013645857591],
                                [116.10835528377311 ,39.9548863718903 ],
                                [116.11110186578799 ,39.7545816571313 ],
                                [116.3747737408055 ,39.75669317147805],
                                [ 116.68239092829214, 39.54945723525219],

                            ]
                        }
                    }
                },
                "layout": {
                    "line-join": "round",
                    "line-cap": "round"
                },
                "paint": {
                    "line-color": "#888",
                    "line-width": 4
                }
            });
        });
    </script>

地图 JS API 提供了标准矢量图、线、填充、符号、影像、圆、热力图、建筑等多个官方图层，同时也提供了加载第三方WMS、WMTS、XYZ等标准图层的接口，也提供了把一般的图片、Canvas、视频、热力等作为图层的能力，详情具体访问相关教程。

添加点标记

点标记是用来标示某个位置点信息的一种地图要素，分别包括：

1. 点标记 Marker
2. 自定义点标记 Marker

点标记 Marker

添加一个默认点标记

new mapgl.Marker()
    .setLngLat([116.4124519634895,39.9043382673205]) //设置点标记位置
    .addTo(map); //添加到地图中

自定义点标记 Marker

添加一个自定义点标记

var img = new Image();
    img.src = "../../img/marker1.png"; //加载自定义点标记图片

var marker = new mapgl.Marker(img)
    .setLngLat([116.4124519634895,40.0963382673205])
    .addTo(map);

事件功能与信息窗体

事件功能

事件功能是对 Map 底图操作后触发的事件，包括地图缩放事件、地图平移事件、地图点击事件、鼠标移动事件、图层点击事件等，事件回调中返回 MapsEvent对象。该对象包含触发的对象目标、触发所在经纬度等信息。

地图点击事件

map.on("click",function (e) {
    setInfo(`点击地图,位置：${e.lngLat.lng},${e.lngLat.lat}`);
})

信息窗体

添加一个信息窗体的方式,默认信息窗体封装了关闭按钮，使用 API 默认的信息窗体样式.

var popup = new mapgl.Popup()
    .setLngLat(map.getCenter())
    .setHTML('我是一个信息窗体 Popup')
    .addTo(map);