您现在的位置: 开发 > LOCA 数据可视化 API 2.0 > 概述

概述 最后更新时间: 2021年05月27日

Loca 数据可视化 API 2.0(以下简称为LOCA API 2.0)是一个基于高德地图JS API 2.0的高性能地图数据可视化库。

简介


Loca API 2.0采用了和1.3版本中不同的架构模式和渲染管线,极大的提升了性能和渲染效果。我们在2.0版本中也引入了自定义镜头动画、图层动效、光照和材质等能力。

数据源我们进行了标准化,新版本中仅支持标准的GeoJSON格式数据。

另外API也进行了重新设计,改动较大,如需升级请查看参考手册示例

版本更新


Loca API 2.0版本可视化库是对AMap JS API 2.0版本的可视化功能封装,因此只适用于JS API 2.0版本的地图。

注意:新版Loca API 2.0和Loca 1.3.x版本不兼容,它们是针对不同的JS API版本进行的封装。 因此如果您需要使用JS API 1.4.x,那么只能使用Loca API 1.3.x;如果您需要使用JS API 2.0,那么只能使用Loca API 2.0。关系如下:

新特性


         

 ViewControl 镜头动画                                                                    ScatterLayer 贴地呼吸点

        

 LinkLayer 高亮连接线                                                                   PulseLine 轨迹线

        

LineLayer 高程支持                                                                       IconLayer 海量图标点

       

HeatMap 支持地理单位聚合                                                          PointLayer 的模糊半径效果

快速开始


引入

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, '示例的点图层');
新用户
福利
示例
中心
常见
问题
智能
客服