高德地图LOCA 数据可视化 API 2.0 — 快速开始

引入

Loca 数据可视化 API 2.0 依赖 JSAPI 2.0，因此需要先引入 JSAPI v2.0。

使用标签引入

<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>

使用 Loader 引入

npm 引入 Loader

安装 loader

npm i @amap/amap-jsapi-loader --save

使用

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",       // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '2.0.0'  // Loca 版本，缺省 1.3.2
    },
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

标签引入 Loader

<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript" >
AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
    },
}).then((AMap)=>{
        var map = new AMap.Map('container');
        map.addControl(new AMap.Scale());
        new AMapUI.SimpleMarker({
            map: map,
            position: map.getCenter(),
        });
    }).catch((e)=>{
        console.error(e);  //加载错误提示
    });   
</script>

使用

创建 HTML 地图容器

<style>
    .map-container {
        width: 500px;
        height: 500px;
    }
</style>
<div id="map" class="map-container"></div>

创建地图和 Loca 实例

var map = new AMap.Map('map', {
    center: [80.601, 40.32],
    zoom: 12,
    viewMode: '3D',  // 地图设置成 3D 模式，否则图层会失去高度信息
});

// 创建 Loca 实例
var loca = new Loca.Container({
    map: map
});

创建可视化图层和数据源

// 创建圆点图层
var pointLayer = new Loca.PointLayer({
    zIndex: 10,
    opacity: 1,
    visible: true,
    blend: 'lighter',
});

// 创建数据源
var dataSource = new Loca.GeoJSONSource({
    // url: 'xxx.geojson', 或者使用 data 字段
    data: {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Point",
            "coordinates": [
              116.40014,
              39.909736
            ]
          }
        }
      ]
    },
});

为图层关联数据和样式，将图层添加到地图上

// 图层添加数据
pointLayer.setSource(dataSource);

// 设置样式
pointLayer.setStyle({
    radius: 30,
    color: 'red',
    borderWidth: 10,
    borderColor: '#fff',
    unit: 'px',
})

// 添加到地图上
loca.add(pointLayer);

样式调试工具

// 样式调试工具，仅用于开发阶段方便调试样式
// 可以将可视化图层添加到调试工具中使用
const dat = new Loca.Dat();
dat.addLayer(pointLayer, '示例的点图层');