概述最后更新时间: 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="https://webapi.amap.com/loader.js"></script>

标签引入 JS API 2.0 和 Loca 2.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>

初始化 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, '示例的点图层');

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

简介