安装

加载高德地图

L7 目前底图采用高德地图,因此使用之前你还需要使用开发者 Key,你可以使用适用于『Web端』开发者 Key。如果没有可以点击 这里申请
申请开发者 Key 是免费的。如果指定错误的版本号和开发者 Key,将无法加载 L7。目前最新版本请参考这里,如果不指定版本号,则使用最新版本。
在 你的页面引入高德地图API
<script src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>

HTML 引入 L7

既可以通过将脚本下载到本地也可以直接引入在线资源;
<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.0.0/dist/l7.min.js"></script>

通过 npm 安装

我们提供了 L7 npm 包,通过下面的命令即可完成安装
npm i @antv/l7 --save
成功安装完成之后,即可使用 import 或 require 进行引用。
// 使用L7之前,需要加入引入高德地图API

//<script src="https://webapi.amap.com/maps?v=1.4.8&key=你的密钥&plugin=Map3D"></script>

import L7 from '@antv/l7';
// 初始化 场景
var scene = new L7.Scene({
  id: 'map',
  mapStyle: 'dark', // 样式URL
  center: [102.602992, 23.107329],
  pitch: 15,
  zoom: 13.82
});
// 初始化地图,添加线图层
scene.on('loaded', function() {
  $.get('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json', function(data) {
    scene.LineLayer({
      zIndex: 2
    }).source(data).size('ELEV', function(value) {
      return [1, (value - 1000) * 7];
    }).active(true)
       .shape('line')
       .color('ELEV', ["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse())
       .render();
  });
});