开发 LOCA 数据可视化 API 2.0 概述

概述 最后更新时间: 2023年03月30日

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 的模糊半径效果

快速开始

1、创建 HTML 地图容器

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

2、引入 Loca 并初始化

推荐使用 Loader 方式引入,因为 Loca API 2.0 依赖 JSAPI 2.0 ,因此需要先引入 JSAPI v2.0。查看更多JS API 2.0引入方式

  • npm 安装 amap-jsapi-loader 
npm i @amap/amap-jsapi-loader --save
// 引入
import AMapLoader from '@amap/amap-jsapi-loader';

或者使用标签引入 loader

<script src="http://webapi.amap.com/loader.js"></script>

标签引入 JS API 2.0 和 Loca 2.0

<script src="http://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script src="http://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>
  • 初始化 Loca
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);
})

3、创建地图和 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
});

4、创建可视化图层和数据源

// 创建圆点图层
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
          ]
        }
      }
    ]
  },
});

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

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

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

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

6、打开样式调试工具

// 样式调试工具,仅用于开发阶段方便调试样式
// 可以将可视化图层添加到调试工具中使用
const dat = new Loca.Dat();
dat.addLayer(pointLayer, '示例的点图层');
返回顶部 示例中心 常见问题 智能客服 公众号
二维码