您现在的位置: 开发 > 数据可视化 JS API v2.0 > 产品介绍

产品介绍 最后更新时间: 2021年03月01日

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。关系如下:

\

JSAPI 版本

Loca 版本

老版本

JSAPI 1.4.x

Loca 1.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="http://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> <script src="http://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, '示例的点图层');

新用户
福利
示例
中心
常见
问题