From 3c6a80c9ea4d03ee09e5765e790436787455c849 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 20 Nov 2019 22:43:44 +0800 Subject: [PATCH] fix(demo): demo --- docs/API/L7.en.md | 70 +++- docs/API/L7.zh.md | 8 +- docs/API/component/control.en.md | 2 +- docs/API/layer/heatmap.en.md | 203 ++++++++++- docs/API/layer/heatmap.zh.md | 19 +- docs/API/layer/imagelayer.en.md | 21 +- docs/API/layer/layer.en.md | 318 ++++++++++++++++++ docs/API/layer/linelayer.en.md | 70 +++- docs/API/layer/pointlayer.en.md | 75 ++++- docs/API/layer/polygonlayer.en.md | 24 +- docs/API/quickstart.en.md | 168 +++++++++ examples/heatmap/heatmap/index.zh.md | 2 + examples/polygon/3d/index.zh.md | 2 + examples/raster/basic/index.zh.md | 2 + packages/layers/src/line/index.ts | 8 + .../plugins/RegisterStyleAttributePlugin.ts | 4 +- .../__tests__/polygonTriangulation.spec.ts | 2 +- site/pages/index.zh.tsx | 2 +- 18 files changed, 976 insertions(+), 24 deletions(-) diff --git a/docs/API/L7.en.md b/docs/API/L7.en.md index ee28caf482..c26a8f7e2e 100644 --- a/docs/API/L7.en.md +++ b/docs/API/L7.en.md @@ -4,4 +4,72 @@ order: 0 redirect_from: - /en/docs/api --- -# An open source large-scale geospatial data visualization analysis development framework powered by WebGL \ No newline at end of file +#### An open source large-scale geospatial data visualization analysis development framework powered by WebGL + +L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。 + + + +## 核心特性 + + +🌏 数据驱动可视化展示 + +数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。 + +🌏 2D，3D 一体化的海量数据高性能渲染 + +百万级空间数据实时，动态渲染。 + +🌏 简单灵活的数据接入 + +支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 + + 🌏 多地图底图支持，支持离线内网部署 + +高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。 + +## 支持丰富的图表类型 + +### 点图层 + + - 气泡图 + - 散点图 + - 符号地图 + - 3D柱状地图 + - 聚合地图 + - 复合图表地图 + - 自定义Marker + +### 线图层 + +- 路径地图 +- 弧线，支持2D弧线、3D弧线以及大圆航线 +- 等值线 + +### 面图层 + +- 填充图 +- 3D填充图 + +### 热力图 + +- 经典热力图 +- 蜂窝热力图 +- 网格热力图 + +### 栅格地图 +- 图片 +- Raster + +## L7 2.0 Roadmap + +![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ) + + +更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。 \ No newline at end of file diff --git a/docs/API/L7.zh.md b/docs/API/L7.zh.md index 4a64d36219..99742bd0c3 100644 --- a/docs/API/L7.zh.md +++ b/docs/API/L7.zh.md @@ -19,19 +19,19 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源 ## 核心特性 -### 🌏 数据驱动可视化展示 +🌏 数据驱动可视化展示 数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。 -### 🌏 2D，3D 一体化的海量数据高性能渲染 +🌏 2D，3D 一体化的海量数据高性能渲染 百万级空间数据实时，动态渲染。 -### 🌏 简单灵活的数据接入 +🌏 简单灵活的数据接入 支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。 -### 🌏 多地图底图支持，支持离线内网部署 + 🌏 多地图底图支持，支持离线内网部署 高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。 diff --git a/docs/API/component/control.en.md b/docs/API/component/control.en.md index 04aea5ea1f..7e1e7c0cf8 100644 --- a/docs/API/component/control.en.md +++ b/docs/API/component/control.en.md @@ -1,5 +1,5 @@ --- -title: sControl +title: Control order: 1 --- # control diff --git a/docs/API/layer/heatmap.en.md b/docs/API/layer/heatmap.en.md index c092214c9a..2bf68b6740 100644 --- a/docs/API/layer/heatmap.en.md +++ b/docs/API/layer/heatmap.en.md @@ -1,4 +1,205 @@ --- title: HeatmapLayer order: 5 ---- \ No newline at end of file +--- + +# heatmapLayer + + +### 简介 + +热力图图层，包含三种类型的， +- 方格热力图 + +将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 + +- 六边形热力图 + +将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 + +- 经典热力图 + + + +⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法 + +### source + +热力图只支持点数据作为数据源 + +布局方法 通过source的 tansforms属性配置 + +- type  数据聚合类型 grid、hexagon +- size  网格半径 单位 米 +- field  聚合字段 +- method 聚合方法  count,max,min,sum,mean5个统计维度 + +```javascript + +layer.source(data, { + parser: { + type: 'csv', + x: 'lng', + y: 'lat' + }, + transforms:[ + { + type: 'grid', + size: 15000, + field:'v', + method:'sum' + } + ], + } +``` + +### shape + +不同类型热力图shape支持 + +| | 2D | 3d | +| --- | --- | --- | +| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn | +| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon | +| 普通热力图 | heatmap | heatmap | + + +热力图布局下只shape方法只支持常量的可视化。 + +```javascript +HeatmapLayer.shape('square'); +HeatmapLayer.shape('hexagon'); +// 默认类型可以不设置 +``` + +### size +当前版本 shape 为grid，hexagon不需要设置 size 映射 + +default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size) + +**size(field,values) ** + +- field: 热力图权重字段 +- values: 数据映射区间 热力图显示 [0, 1] 效果最佳 + +```javascript +HeatmapLayer.size ('field', [0, 1]) +``` + + +### color +default heatMap 类型不需设置 color映射 + +color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color) + + + +### style + +grid hexagon 可以通过style 设置透明度 + +default热力图需要通过style配置参数热力图参数 + +- intensity   全局热力权重   推荐权重范围 1-5 +- radius  热力半径，单位像素 +- rampColors 色带参数 + - colors  颜色数组 + - positions 数据区间 + +```javascript + HeatmapLayer.style({ + intensity: 3, + radius: 20, + rampColors: { + colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ], + positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] + } + }) +``` + + +### 完整代码示例 + +#### 普通热力图 + +```javascript +// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json + + HeatmapLayer({ + zIndex: 2 + }) + .source(data) + .size('mag', [ 0, 1 ]) // weight映射通道 + .style({ + intensity: 3, + radius: 20, + rampColors: { + colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ], + positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] + } + }) +``` + + + +#### 网格热力图 + +```javascript +var layer = scene.HeatmapLayer({ + zIndex: 2 + }) + .source(data, { + parser: { + type: 'csv', + x: 'lng', + y: 'lat' + }, + transforms:[ + + { + type: 'grid', + size: 15000, + field:'v', + method:'sum' + } + ] + }) + .shape('grid') + .style({ + coverage: 0.8 + }) + .color('count', + ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"]) + +``` + + +#### 六边形热力图 + +```javascript + var layer = scene.HeatmapLayer({ + zIndex: 2 + }). + souce(data,{ + parser:{ + type:'csv', + x:lng, + y:lat, + }, + transforms:[ + { + type:'hexgon', + size:1500, + field:'count', + operation: 'sum', + } + ] + }) + .shape('hexgon') + .size(1000) + .color('sum') + .style({ + coverage:0.8 + }) +render() +``` \ No newline at end of file diff --git a/docs/API/layer/heatmap.zh.md b/docs/API/layer/heatmap.zh.md index d0fa1f946f..2431fc5cb7 100644 --- a/docs/API/layer/heatmap.zh.md +++ b/docs/API/layer/heatmap.zh.md @@ -47,9 +47,9 @@ layer.source(data, { size: 15000, field:'v', method:'sum' - } - ] - } + } + ], + } ``` ### shape @@ -186,12 +186,13 @@ var layer = scene.HeatmapLayer({ y:lat, }, transforms:[ - type:'hexgon', - size:1500, - field:'count' - operation: 'sum' - } - ] + { + type:'hexgon', + size:1500, + field:'count', + operation: 'sum', + }, + ], }) .shape('hexgon') .size(1000) diff --git a/docs/API/layer/imagelayer.en.md b/docs/API/layer/imagelayer.en.md index 7563898fbc..4d0c122617 100644 --- a/docs/API/layer/imagelayer.en.md +++ b/docs/API/layer/imagelayer.en.md @@ -1,4 +1,23 @@ --- title: ImageLayer order: 5 ---- \ No newline at end of file +--- +# ImageLayer + +## 简介 +将图片添加到地图上，需要指定图片的经纬度范围 + +### 代码示例 + +```javascript +const layer = new ImageLayer({}); +layer.source( + 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', + { + parser: { + type: 'image', + extent: [ 121.168, 30.2828, 121.384, 30.4219 ] + } + } +); +``` diff --git a/docs/API/layer/layer.en.md b/docs/API/layer/layer.en.md index dc3ba34e41..21ccab7477 100644 --- a/docs/API/layer/layer.en.md +++ b/docs/API/layer/layer.en.md @@ -2,3 +2,321 @@ title: Map Layer order: 0 --- +# Layer + + +## 简介 +L7 Layer 接口设计遵循图形语法，在可视表达上 + +语法示例 + +```javascript +new Layer(option) +.source() +.color() +.size() +.shape() +.style() + +``` + + +## 构造函数 + + +## 配置项 + +### visable +图层是否可见   {bool } default true + +### zIndex + 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0 +### minZoom +图层显示最小缩放等级，（0-18）   {number}  default 0 + +### maxZoom + 图层显示最大缩放等级 （0-18）   {number}  default 18 + + +## 鼠标事件 + +beta版当前不支持，正式版会支持 + +```javascript +layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件 +layer.on('dblclick', (ev)=>{}); // 鼠标左键双击图层事件 +layer.on('mousemove', (ev)=>{}); // 鼠标在图层上移动时触发 +layer.on('mouseover', (ev)=>{}); // 鼠标移入图层要素内时触发 +layer.on('mouseout', (ev)=>{}); // 鼠标移出图层要素时触发 +layer.on('mouseup', (ev)=>{}); // 鼠标在图层上单击抬起时触发 +layer.on('mousedown', (ev)=>{}); // 鼠标在图层上单击按下时触发 +layer.on('mouseleave', (ev)=>{}); // 鼠标离开图层要素 +layer.on('rightclick', (ev)=>{}); // 鼠标右键图层要素 + +``` + + +## 方法 + +### source +数据源为layer设置数据 source(data,config) + +- data {geojson|json|csv} + + +      源数据 + +- config  可选 数据源配置项 + - parser 数据解析，默认是解析层geojson + - transforms [transform，transform ]  数据处理转换 可设置多个 + + parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source) + +```javascript +layer.source(data, { + parser: { + type: 'csv', + x: 'lng', + y: 'lat' + }, + transforms:[ + { + type: 'map', + callback:function(item){ + const [x, y] = item.coordinates; + item.lat = item.lat*1; + item.lng = item.lng*1; + item.v = item.v *1; + item.coordinates = [x*1,y*1]; + return item; + } + + }, + { + type: 'hexagon', + size: 6000, + field:'v', + method:'sum' + } + ] + }) +``` + +### + +### scale + + +cscle('field', scaleConfig) + +(field: string, scaleConfig: object) + +为指定的数据字段进行列定义，返回 layer 实例。 + + + +- `field` 字段名。 + +- `scaleConfig` 列定义配置，对象类型，可配置的属性如下： + +```javascript +{ + type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize +} + +``` + +### size + +将数据值映射到图形的大小上的方法。 + +**注意：**  + +不同图层的 size 的含义有所差别： + +- point 图形的 size 影响点的半径大小和高度； + +- line, arc, path 中的 size 影响线的粗细,和高度； + +- polygon size 影响的是高度 + + + +```javascript +pointLayer.size(10); // 常量 +pointLayer.size('type'); // 使用字段映射到大小 +pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值 +pointLayer.size('type', (type) => { // 回调函数 + if(type === 'a') { + return 10; + } + return 5; +}); +``` + + +#### size(value） + +传入数字常量，如 `pointLayer.size(20)` + +#### size(field) +根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。 + +#### size(field, callback) +使用回调函数控制图形大小。 + +- `callback`: function 回调函数。 + +```javascript +pointLayer.size('age', (value) => { + if(value === 1) { + return 5; + } + return 10; +}); +``` + +### color + +将数据值映射到图形的颜色上的方法。 + +```javascript +layer.color('red'); // 常量颜色 +layer.color('type'); // 对 type 字段进行映射，使用内置的颜色 +layer.color('type', [ 'red', 'blue' ]) // 指定颜色 +layer.color('type', (type) => { // 通过回调函数 + if (type === 'a') { + return 'red'; + } + return 'blue'; +}); +layer.color('type*value', (type, value) => { //多个参数，通过回调函数 + if (type === 'a' && value > 100) { + return 'red'; + } + return 'blue'; +}); +``` + + +#### color(value) + + +参数：`value` ：string +只支持接收一个参数，value 可以是： + +- 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。 + +- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。 + + +示例 +```javascript +layer.color('name') // 映射数据字段 +layer.color('white') // 指定颜色 +``` + + +#### color(field, colors) + +参数： + +- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。 + +-  `colors`: string | array | function + + +colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。 + +```javascript +layer.color('name'); // 使用默认的颜色 +layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色 +``` + +- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入： + + + +```javascript +layer.color('gender', (value) => { + if(value === 1) { + return 'red' + } + return 'blue'; +}); +layer.color('gender*age', (gender, age) => { + if(age === 20 && gender ==' 男' ) { + return 'red' + } + return 'blue'; +}); +``` + +### shape +将数据值映射到图形的形状上的方法。 + +**shape(shape)** + +参数`shape` string + +只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状 + +| layer类型 | shape类型 | 备注 | +| --- | --- | --- | +| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | | +| line | line,arc, arc3d, greatcircle | | +| polygon | fill,line, extrude | | + + +**shape(field, shapes)** + +**shape(field, callback)** + + +### style + +用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放 + +- fill + +- opacity  设置透明度 + +- stroke 线填充颜色 + +- strokeWidth 线的宽度 + + +```javascript +layer.style({ + fill:'red', + opacity:0.8, + stroke:'white' +}) +``` + + +### show +图层显示 + +```javascript +layer.show(); +``` + + +### hide + +图层隐藏 + +```javascript +layer.hide(); +``` + + +### fitBounds + +缩放到图层范围 + +```javascript +layer.fitBounds() + +``` \ No newline at end of file diff --git a/docs/API/layer/linelayer.en.md b/docs/API/layer/linelayer.en.md index c78c99b653..90d7b56a43 100644 --- a/docs/API/layer/linelayer.en.md +++ b/docs/API/layer/linelayer.en.md @@ -1,4 +1,72 @@ --- title: LineLayer order: 2 ---- \ No newline at end of file +--- +## 线图层 + +### shape + +线图层支持4种 shape + +- line 绘制路径图， +- arc 绘制弧线 通过贝塞尔曲线算法技术弧线 +- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 +- arc3d 3d弧线地图 3D视角 + +⚠️ 弧线只需要设置起始点坐标即可 + +``` + new LineLayer() + .source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2', + }, + }) +``` + +如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点 +``` +{ + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": {}, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + 106.5234375, + 57.51582286553883 + ], + [ + 136.40625, + 61.77312286453146 + ] + ] + } + } + ] +} + +``` + +### size + +线图层 可以设置高度 + +- size 类型为number 则表示 line的宽度 +- size 类型为 [number , number] 分别表示宽度和高度 + +```javascript + +lineLayer.size(1); // 线的宽度为 1 +lineLayer.size([1,2]); // 宽度为1，高度2 + +``` + + diff --git a/docs/API/layer/pointlayer.en.md b/docs/API/layer/pointlayer.en.md index 029939baf5..340d0d39d3 100644 --- a/docs/API/layer/pointlayer.en.md +++ b/docs/API/layer/pointlayer.en.md @@ -1,4 +1,77 @@ --- title: PointLayer order: 1 ---- \ No newline at end of file +--- +# PointLayer + + +## 简介 +点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。 + +shape 支持 + +**3D类型 柱图** + +``` +'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn' + +``` + +**2D 符号图** + +``` +'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica', + +``` + +**图片标注** + +通过 ```Scene.addImage()``` 可以添加图片资源， + + +### 代码示例 + + +#### 基本图形显示示例 + +```javascript +import { PointLayer } from "@antv/l7" + +const layer = PointLayer({ + zIndex: 2 + }) + .source(data.list, { + type: 'array', + x: 'j', + y: 'w', + }) + .shape('cylinder') + .size('t',(level)=> { + return [4,4,(level+40)]; + }) + .color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"]) + +``` + + +#### 符号图 + +使用图片添加地图标注 + +```javascript + +scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png'); + + +const layer = new PointLayer({ + zIndex: 4 + }) + .source(city) + .size(20.0) + .shape('local') + .color('#0D408C') + +``` + + + diff --git a/docs/API/layer/polygonlayer.en.md b/docs/API/layer/polygonlayer.en.md index 8f3fc671ac..bbfe14d1a3 100644 --- a/docs/API/layer/polygonlayer.en.md +++ b/docs/API/layer/polygonlayer.en.md @@ -1,4 +1,26 @@ --- title: PolygonLayer order: 3 ---- \ No newline at end of file +--- +# 填充图 + +绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 + +### shape + +填充图支持3种shape + +- fill 绘制填充面 不支持数据映射 +- line 绘制填充图描边 不支持数据映射 +- extrude 对填充图3D拉伸 不支持数据映射 + +``` javascript + PolyonLayer.shape('fill'); + PolyonLayer.shape('line').size(1); // size 表示线宽度 + PolyonLayer.shape('extrude'); // size 表示高度 + +``` + +其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer) + + diff --git a/docs/API/quickstart.en.md b/docs/API/quickstart.en.md index 184b15299d..91a02644b5 100644 --- a/docs/API/quickstart.en.md +++ b/docs/API/quickstart.en.md @@ -4,3 +4,171 @@ order: 0 redirect_from: - /en/docs/tutorial --- +# 使用方法 + +L7 提供三种使用方式：CDN、Submodule 以及 React 组件。 + +## 通过 CDN 使用 + +首先在 `` 中引入 L7 CDN 版本的 JS 和 CSS 文件： +```html + + + + +``` + +如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)： +```html + + + + + +``` +⚠️高德采用异步加载，因此不需要引入任何额外静态文件。 + +然后在 `` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`： +⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下： +* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/) +* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens) + +## 通过 Submodule 使用 + +首先通过 `npm/yarn` 安装 `@l7/scene` 和 `@l7/layers`： +```bash +npm install --save @l7/scene @l7/layers +// or +yarn add @l7/scene @l7/layers +``` + +然后就可以使用其中包含的场景和各类图层： +```typescript +import { Scene } from '@l7/scene'; +import { PolygonLayer } from '@l7/layers'; + +(async function() { + // 获取数据 + const response = await fetch( + 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', + ); + const data = await response.json(); + + // 创建场景 + const scene = new Scene({ + center: [110.19382669582967, 50.258134], + id: 'map', + pitch: 0, + style: 'dark', + type: 'amap', + zoom: 3, + token: 'pg.xxx', // 高德或者 Mapbox 的 token + }); + + // 创建图层 + const layer = new PolygonLayer({}); + layer + .source(data) + .size('name', [0, 10000, 50000, 30000, 100000]) + .color('name', [ + '#2E8AE6', + '#69D1AB', + '#DAF291', + '#FFD591', + '#FF7A45', + '#CF1D49', + ]) + .shape('fill') + .style({ + opacity: 0.8, + }); + + // 添加图层到场景中 + scene.addLayer(layer); + + // 渲染场景 + scene.render(); +})(); +``` + +最后在 `` 中引入 L7 CDN 版本的 CSS 文件： +```html + + + +``` + +L7 目前的文档都通过这种方式使用，可以参考项目中的 stories： +* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx) +* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx) + + +## [WIP] React + +React 组件待开发，目前可以暂时以 Submodule 方式使用： +```tsx +import { Scene } from '@l7/scene'; +import { PolygonLayer } from '@l7/layers'; +import * as React from 'react'; + +export default class AMap extends React.Component { + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const response = await fetch( + 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json', + ); + const scene = new Scene({ + center: [110.19382669582967, 50.258134], + id: 'map', + pitch: 0, + style: 'dark', + type: 'amap', + zoom: 3, + token: 'pg.xxx', // 高德或者 Mapbox 的 token + }); + const layer = new PolygonLayer({}); + + layer + .source(await response.json()) + .size('name', [0, 10000, 50000, 30000, 100000]) + .color('name', [ + '#2E8AE6', + '#69D1AB', + '#DAF291', + '#FFD591', + '#FF7A45', + '#CF1D49', + ]) + .shape('fill') + .style({ + opacity: 0.8, + }); + scene.addLayer(layer); + scene.render(); + this.scene = scene; + } + + public render() { + return ( +
+ ); + } +} +``` + +⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。 + diff --git a/examples/heatmap/heatmap/index.zh.md b/examples/heatmap/heatmap/index.zh.md index 17f554fdef..2cb7ecb9c5 100644 --- a/examples/heatmap/heatmap/index.zh.md +++ b/examples/heatmap/heatmap/index.zh.md @@ -1,5 +1,7 @@ --- title: 经典热力图 order: 0 +redirect_from: + - /zh/examples/heatmap/ --- 区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。 \ No newline at end of file diff --git a/examples/polygon/3d/index.zh.md b/examples/polygon/3d/index.zh.md index 246fca05e8..7a97e3407c 100644 --- a/examples/polygon/3d/index.zh.md +++ b/examples/polygon/3d/index.zh.md @@ -1,5 +1,7 @@ --- title: 3D填充图 order: 0 +redirect_from: + - /zh/examples/polygon/ --- 填充地图的增强实现，通过三维视角中的高度体现数据差异。 \ No newline at end of file diff --git a/examples/raster/basic/index.zh.md b/examples/raster/basic/index.zh.md index 6147459f75..29cc71a8e1 100644 --- a/examples/raster/basic/index.zh.md +++ b/examples/raster/basic/index.zh.md @@ -1,4 +1,6 @@ --- title: 栅格图层 order: 0 +redirect_from: + - /zh/examples/raster/ --- diff --git a/packages/layers/src/line/index.ts b/packages/layers/src/line/index.ts index a7f431164a..f7cee5bc06 100644 --- a/packages/layers/src/line/index.ts +++ b/packages/layers/src/line/index.ts @@ -42,4 +42,12 @@ export default class LineLayer extends BaseLayer { const shape = shapeAttribute?.scale?.field as LineModelType; return shape || 'line'; } + // 拆分的动画插件 + private initAnimate() { + const { enable } = this.animateOptions; + if (enable) { + this.layerService.startAnimate(); + this.animateStartTime = this.layerService.clock.getElapsedTime(); + } + } } diff --git a/packages/layers/src/plugins/RegisterStyleAttributePlugin.ts b/packages/layers/src/plugins/RegisterStyleAttributePlugin.ts index 35cfced0d3..ea709b6952 100644 --- a/packages/layers/src/plugins/RegisterStyleAttributePlugin.ts +++ b/packages/layers/src/plugins/RegisterStyleAttributePlugin.ts @@ -60,8 +60,8 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin { }, size: 4, update: (feature: IEncodeFeature, featureIdx: number) => { - const { color = [1.0, 1.0, 1.0, 1.0] } = feature; - return color; + const { color } = feature; + return !color || !color.length ? [0, 0, 0, 0] : color; }, }, }); diff --git a/packages/layers/src/polygon/__tests__/polygonTriangulation.spec.ts b/packages/layers/src/polygon/__tests__/polygonTriangulation.spec.ts index 3828d6de6b..d69c058c28 100644 --- a/packages/layers/src/polygon/__tests__/polygonTriangulation.spec.ts +++ b/packages/layers/src/polygon/__tests__/polygonTriangulation.spec.ts @@ -1,5 +1,5 @@ import { IEncodeFeature } from '@l7/core'; -import { polygonTriangulation } from '..'; +import { polygonTriangulation } from '../../core/triangulation'; describe('PolygonTriangulation', () => { it('should do triangulation with a polygon correctly', () => { diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx index 1e1aa70d8e..8051cc7429 100644 --- a/site/pages/index.zh.tsx +++ b/site/pages/index.zh.tsx @@ -58,7 +58,7 @@ const IndexPage = () => { { logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ', title: t('浅色色板'), - description: t('将复杂的地理数据，通过简单易用的API，转化成一个个真实的可视化案例，达到开箱即用的效果。'), + description: t('一个个真实的地理数据可视化案例，将复杂的地理数据,通过简单，易用的API接口,让用户达到开箱即用的效果。'), link: `/${i18n.language}/examples/gallery/basic`, image: 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RPxeQZ8Uk7EAAAAAAAAAAABkARQnAQ',