您现在的位置: 开发 > 数据可视化 JS API v2.0 > 概述

概述 最后更新时间: 2021年04月23日

Loca v2.0是一个基于高德地图JSAPI 2.0的高性能地图数据可视化库。

简介


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

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

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

版本更新


Loca v2.0 Beta版本可视化库是对AMap JSAPI 2.0版本的可视化功能封装,因此只适用于JSAPI 2.0版本的地图。

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

新特性


         

 ViewControl 镜头动画                                                                    ScatterLayer 贴地呼吸点

        

 LinkLayer 高亮连接线                                                                   PulseLine 轨迹线

        

LineLayer 高程支持                                                                       IconLayer 海量图标点

       

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

快速开始


引入

Loca v2.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.0beta&key=您申请的key值"></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, '示例的点图层');
新用户
福利
示例
中心
常见
问题