diff --git a/README.md b/README.md index 4c7fad7d74..292ba124a4 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ new Scene({ ``` ### Add Layer -``` javascript +```javascript import { PointLayer } from '@antv/l7'; const pointLayer = new PointLayer() diff --git a/docs/api/component/control.en.md b/docs/api/component/control.en.md index 7e1e7c0cf8..2c0e468fe6 100644 --- a/docs/api/component/control.en.md +++ b/docs/api/component/control.en.md @@ -2,137 +2,138 @@ title: Control order: 1 --- + # control 地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺 - ## 构造函数 ```javascript const baseControl = new L7.Control.Base(option); ``` - #### option - position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft` - +position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft` #### scene 内置地图组件 -zoom 地图放大缩小  默认添加
Scale 地图比例尺   默认添加
attribution 地图数据属性  默认添加
layer 图层列表 -**scene配置项设置控件添加状态** +zoom 地图放大缩小   默认添加
Scale 地图比例尺     默认添加
attribution 地图数据属性    默认添加
layer 图层列表 + +**scene 配置项设置控件添加状态** ```javascript scene = new L7.scene({ - zoomControl: true, - scaleControl: true, - attributionControl: true -}) + zoomControl: true, + scaleControl: true, + attributionControl: true, +}); ``` -#### +#### #### Zoom + 放大缩小组件 默认 左上角 ```javascript - new L7.Control.Zoom({ - position: 'topleft' - }).addTo(scene); +new L7.Control.Zoom({ + position: 'topleft', +}).addTo(scene); ``` - #### Scale + 比例尺组件默认左下角 ```javascript - new L7.Control.Scale({ - position: 'bottomleft' - }).addTo(scene); +new L7.Control.Scale({ + position: 'bottomleft', +}).addTo(scene); ``` - #### attribution + 默认右下角 ```javascript new L7.Control.Attribution({ - position: 'bottomleft' - }).addTo(scene); -``` - - -#### layer -图层列表目前只支持可视化overlayers 图层控制 - -```javascript - var overlayers = { - "围栏填充": layer, - "围栏边界": layer2 - }; -new L7.Control.Layers({ - overlayers: overlayers + position: 'bottomleft', }).addTo(scene); ``` +#### layer + +图层列表目前只支持可视化 overlayers 图层控制 + +```javascript +var overlayers = { + 围栏填充: layer, + 围栏边界: layer2, +}; +new L7.Control.Layers({ + overlayers: overlayers, +}).addTo(scene); +``` ## 方法 #### onAdd -组件添加到地图Scene时调用，自定义组件时需要实现此方法 +组件添加到地图 Scene 时调用，自定义组件时需要实现此方法 #### addTo -添加到地图scene + +添加到地图 scene ```javascript control.addTo(scene); ``` - #### setPosition + 设置组件位置 ```javascript control.setPosition('bottomright'); ``` - #### remove + 移除地图组件 ```javascript control.remove(); ``` - - ## 示例代码 - #### 自定义图例控件 + [源码](https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html) ```javascript var legend = new L7.Control.Base({ - position: 'bottomright' - }); - legend.onAdd = function() { - var el = document.createElement('div'); - el.className = 'infolegend legend'; - var grades = [0, 8, 15, 30, 65, 120]; - for (var i = 0; i < grades.length; i++) { - el.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); - } - return el; - }; - legend.addTo(scene); - + position: 'bottomright', +}); +legend.onAdd = function() { + var el = document.createElement('div'); + el.className = 'infolegend legend'; + var grades = [0, 8, 15, 30, 65, 120]; + for (var i = 0; i < grades.length; i++) { + el.innerHTML += + ' ' + + grades[i] + + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); + } + return el; +}; +legend.addTo(scene); ``` -## +## ## FAQ - diff --git a/docs/api/component/control.zh.md b/docs/api/component/control.zh.md index 9d71c6f2ff..6ea82d3ed8 100644 --- a/docs/api/component/control.zh.md +++ b/docs/api/component/control.zh.md @@ -5,28 +5,23 @@ order: 3 地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺 +L7 目前支持 Control -L7 目前支持Control - -- Zoom 放大缩小 -- Scale 比例尺 -- Layers 图层列表 - +- Zoom 放大缩小 +- Scale 比例尺 +- Layers 图层列表 ## 构造函数 - #### option -  - position: `string` 控件位置支持是个方位 + +position: `string` 控件位置支持是个方位 - bottomright - topright - bottomleft, - topleft` - - ### 组件介绍 ``` @@ -34,67 +29,58 @@ import { Scale Layers, Zoom } from '@antv/l7'; ``` - - - #### Zoom 放大缩小组件 默认 左上角 ```javascript - const zoomControl = new Zoom({ - position: 'topleft' - }) - - scene.addControl(zoomControl); +const zoomControl = new Zoom({ + position: 'topleft', +}); +scene.addControl(zoomControl); ``` - #### Scale + 比例尺组件默认左下角 ```javascript - const zoomControl = new Zoom({ - position: 'topleft' - }) - - scene.addControl(zoomControl); +const zoomControl = new Zoom({ + position: 'topleft', +}); +scene.addControl(zoomControl); ``` - #### Layers + 图层列表目前支持可视化的图层控制 ```javascript - - const overlayers = { - "点图层": layer, - - }; - const layersControl = new Layers({ - overlayers - }); +const overlayers = { + 点图层: layer, +}; +const layersControl = new Layers({ + overlayers, +}); scene.addControl(layersControl); - ``` - ## 方法 #### setPosition + 设置组件位置 ```javascript control.setPosition('bottomright'); ``` - #### remove + 移除地图组件 ```javascript control.remove(); ``` - diff --git a/docs/api/component/marker.en.md b/docs/api/component/marker.en.md index 9fbab14dcc..bc6ee0bcf4 100644 --- a/docs/api/component/marker.en.md +++ b/docs/api/component/marker.en.md @@ -3,26 +3,23 @@ title: Marker order: 3 --- -Marker 地图标注 目前只支持2D dom标注 - +Marker 地图标注 目前只支持 2D dom 标注 ## 构造函数 + Marker `const Marker = new L7.Marker(option)` - - - #### option -- color        `string ` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认marker的颜色 -- element    `Dom|string`    自定义marker Dom节点，可以是dom实例，也可以是dom id -- anchor     `string`  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right -- offset    `Array`  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量 +- color        `string` ![L7 Marker](https://gw.alipayobjects.com/zos/basement_prod/b10e0efd-8379-4b04-bcbb-5cfefaa0327f.svg)设置默认 marker 的颜色 +- element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id +- anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right +- offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量 +### 添加到 Scene -### 添加到Scene ```javascript scene.addMarker(marker); ``` @@ -30,62 +27,67 @@ scene.addMarker(marker); ## 方法 #### setLnglat -设置marker经纬度位置 + +设置 marker 经纬度位置 #### addTo -将marker添加到地图Scene + +将 marker 添加到地图 Scene #### remove -移除marker + +移除 marker #### getElement -获取marker dom Element + +获取 marker dom Element #### getLngLat -获取marker经纬度坐标 + +获取 marker 经纬度坐标 #### togglePopup -开启或者关闭marker弹出框 + +开启或者关闭 marker 弹出框 #### setPopup -为marker设置popup + +为 marker 设置 popup #### getPopup -获取marker弹出框 +获取 marker 弹出框 ## 示例代码 -#### 默认Marker -**
` const marker = new L7.Marker({color:'blue'})` +#### 默认 Marker +\*\*
`const marker = new L7.Marker({color:'blue'})` -#### 自定义Marker +#### 自定义 Marker ```javascript var el = document.createElement('label'); - el.className = 'lableclass'; - el.textContent = data[i].v; - el.style.background = getColor(data[i].v); - new L7.Marker({ - element: el - }) - .setLnglat([data[i].x * 1, data[i].y]) - .addTo(scene); +el.className = 'lableclass'; +el.textContent = data[i].v; +el.style.background = getColor(data[i].v); +new L7.Marker({ + element: el, +}) + .setLnglat([data[i].x * 1, data[i].y]) + .addTo(scene); ``` - #### 设置 popup ```javascript - var popup = new L7.Popup({ - anchor: 'left' - }).setText(item.name); +var popup = new L7.Popup({ + anchor: 'left', +}).setText(item.name); new L7.Marker({ - element: el -}).setLnglat(item.coordinates) - .setPopup(popup) + element: el, +}) + .setLnglat(item.coordinates) + .setPopup(popup); ``` - - diff --git a/docs/api/component/marker.zh.md b/docs/api/component/marker.zh.md index 5adbea840f..0e1b0b2ae4 100644 --- a/docs/api/component/marker.zh.md +++ b/docs/api/component/marker.zh.md @@ -3,81 +3,84 @@ title: Marker order: 3 --- -Marker 地图标注 目前只支持2D dom标注 - +Marker 地图标注 目前只支持 2D dom 标注 ## 构造函数 -Marker
`const Marker = new L7.Marker(option)` +Marker
`const Marker = new L7.Marker(option)` #### option -- color        `string `   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32) 设置默认marker的颜色 -- element    `Dom|string`    自定义marker Dom节点，可以是dom实例，也可以是dom id -- anchor     `string`  锚点位置  支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right -- offset    `Array`  偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量 - +- color        `string`   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32)  设置默认 marker 的颜色 +- element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id +- anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right +- offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量 ## 方法 #### setLnglat -设置marker经纬度位置 + +设置 marker 经纬度位置 #### addTo -将marker添加到地图Scene + +将 marker 添加到地图 Scene #### remove -移除marker + +移除 marker #### getElement -获取marker dom Element + +获取 marker dom Element #### getLngLat -获取marker经纬度坐标 + +获取 marker 经纬度坐标 #### togglePopup -开启或者关闭marker弹出框 + +开启或者关闭 marker 弹出框 #### setPopup -为marker设置popup + +为 marker 设置 popup #### getPopup -获取marker弹出框 +获取 marker 弹出框 ## 示例代码 -#### 默认Marker -**
` const marker = new L7.Marker({color:'blue'})` +#### 默认 Marker +\*\*
`const marker = new L7.Marker({color:'blue'})` -#### 自定义Marker +#### 自定义 Marker ```javascript var el = document.createElement('label'); - el.className = 'lableclass'; - el.textContent = data[i].v; - el.style.background = getColor(data[i].v); - new L7.Marker({ - element: el - }) - .setLnglat([data[i].x * 1, data[i].y]) - .addTo(scene); +el.className = 'lableclass'; +el.textContent = data[i].v; +el.style.background = getColor(data[i].v); +new L7.Marker({ + element: el, +}) + .setLnglat([data[i].x * 1, data[i].y]) + .addTo(scene); ``` - #### 设置 popup ```javascript - var popup = new L7.Popup({ - anchor: 'left' - }).setText(item.name); +var popup = new L7.Popup({ + anchor: 'left', +}).setText(item.name); new L7.Marker({ - element: el -}).setLnglat(item.coordinates) + element: el, +}) + .setLnglat(item.coordinates) .setPopup(popup) .addTo(scene); ``` - - diff --git a/docs/api/component/popup.en.md b/docs/api/component/popup.en.md index fca06aefdd..ae3e7e9888 100644 --- a/docs/api/component/popup.en.md +++ b/docs/api/component/popup.en.md @@ -2,19 +2,19 @@ title: Popup order: 4 --- + # popup 地图标注信息窗口，用于展示地图要素的属性信息 - ## 构造函数 + Popup ```javascript -const popup = new L7.Popup(option) +const popup = new L7.Popup(option); ``` - #### option - closeButton @@ -22,67 +22,71 @@ const popup = new L7.Popup(option) - maxWidth - anchor - ## 方法 #### setLnglat -设置popup的经纬度位置
**参数**：lnglat 经纬度数组 [112,32] + +设置 popup 的经纬度位置
**参数**：lnglat 经纬度数组 [112,32] ```javascript popup.setLnglat([112, 32]); ``` - #### addTo -**参数**：scene 地图scene实例 -将popup添加到地图scene显示 +**参数**：scene 地图 scene 实例 + +将 popup 添加到地图 scene 显示 ```javascript popup.addTo(scene); ``` - #### setHtml + **参数**：html 字符串 -设置popup html 内容 +设置 popup html 内容 ```javascript -var html = '

\u7701\u4EFD\uFF1A' + feature.s + '

\n

\u5730\u533A\uFF1A' + feature.m + '

\n

\u6E29\u5EA6\uFF1A' + feature.t + '

\n '; +var html = + '

\u7701\u4EFD\uFF1A' + + feature.s + + '

\n

\u5730\u533A\uFF1A' + + feature.m + + '

\n

\u6E29\u5EA6\uFF1A' + + feature.t + + '

\n '; popup.setHtml(html); - ``` - #### setText + 设置 popup 显示文本内容 ```javascript popup.setText('hello world'); ``` - #### remove -移除popup + +移除 popup ```javascript -popup.remove() +popup.remove(); ``` - ## 事件 #### close ```javascript -popup.on('close',()=>{}) +popup.on('close', () => {}); ``` - ## 示例代码 -#### 添加popup +#### 添加 popup ``` var html = '

'+feature.m+'

'; diff --git a/docs/api/component/popup.zh.md b/docs/api/component/popup.zh.md index e3fa32bfbe..81e1ad08b4 100644 --- a/docs/api/component/popup.zh.md +++ b/docs/api/component/popup.zh.md @@ -2,19 +2,19 @@ title: popup order: 0 --- + # popup 地图标注信息窗口，用于展示地图要素的属性信息 - ## 构造函数 + Popup ```javascript -const popup = new L7.Popup(option) +const popup = new L7.Popup(option); ``` - #### option - closeButton @@ -22,67 +22,71 @@ const popup = new L7.Popup(option) - maxWidth - anchor - ## 方法 #### setLnglat -设置popup的经纬度位置
**参数**：lnglat 经纬度数组 [112,32] + +设置 popup 的经纬度位置
**参数**：lnglat 经纬度数组 [112,32] ```javascript popup.setLnglat([112, 32]); ``` - #### addTo -**参数**：scene 地图scene实例 -将popup添加到地图scene显示 +**参数**：scene 地图 scene 实例 + +将 popup 添加到地图 scene 显示 ```javascript popup.addTo(scene); ``` - #### setHtml + **参数**：html 字符串 -设置popup html 内容 +设置 popup html 内容 ```javascript -var html = '

\u7701\u4EFD\uFF1A' + feature.s + '

\n

\u5730\u533A\uFF1A' + feature.m + '

\n

\u6E29\u5EA6\uFF1A' + feature.t + '

\n '; +var html = + '

\u7701\u4EFD\uFF1A' + + feature.s + + '

\n

\u5730\u533A\uFF1A' + + feature.m + + '

\n

\u6E29\u5EA6\uFF1A' + + feature.t + + '

\n '; popup.setHtml(html); - ``` - #### setText + 设置 popup 显示文本内容 ```javascript popup.setText('hello world'); ``` - #### remove -移除popup + +移除 popup ```javascript -popup.remove() +popup.remove(); ``` - ## 事件 #### close ```javascript -popup.on('close',()=>{}) +popup.on('close', () => {}); ``` - ## 示例代码 -#### 添加popup +#### 添加 popup ``` var html = '

'+feature.m+'

'; diff --git a/docs/api/layer/heatmap.en.md b/docs/api/layer/heatmap.en.md index 2bf68b6740..03eed2228e 100644 --- a/docs/api/layer/heatmap.en.md +++ b/docs/api/layer/heatmap.en.md @@ -5,37 +5,35 @@ order: 5 # heatmapLayer - ### 简介 热力图图层，包含三种类型的， -- 方格热力图 + +- 方格热力图 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 -- 六边形热力图 +- 六边形热力图 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 -- 经典热力图 +- 经典热力图 - - -⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法 +⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在 source 方法设置数据聚合方法 ### source 热力图只支持点数据作为数据源 -布局方法 通过source的 tansforms属性配置 +布局方法 通过 source 的 tansforms 属性配置 - type  数据聚合类型 grid、hexagon - size  网格半径 单位 米 - field  聚合字段 -- method 聚合方法  count,max,min,sum,mean5个统计维度 +- method 聚合方法   count,max,min,sum,mean5 个统计维度 ```javascript - + layer.source(data, { parser: { type: 'csv', @@ -46,7 +44,7 @@ layer.source(data, { { type: 'grid', size: 15000, - field:'v', + field:'v', method:'sum' } ], @@ -55,16 +53,15 @@ layer.source(data, { ### shape -不同类型热力图shape支持 +不同类型热力图 shape 支持 -| | 2D | 3d | -| --- | --- | --- | +| | 2D | 3d | +| ------------ | ------------------------------ | ------------------------------------------------- | | 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn | -| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon | -| 普通热力图 | heatmap | heatmap | +| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon | +| 普通热力图 | heatmap | heatmap | - -热力图布局下只shape方法只支持常量的可视化。 +热力图布局下只 shape 方法只支持常量的可视化。 ```javascript HeatmapLayer.shape('square'); @@ -73,9 +70,10 @@ HeatmapLayer.shape('hexagon'); ``` ### size -当前版本 shape 为grid，hexagon不需要设置 size 映射 -default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size) +当前版本 shape 为 grid，hexagon 不需要设置 size 映射 + +default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size) **size(field,values) ** @@ -83,123 +81,139 @@ default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com - values: 数据映射区间 热力图显示 [0, 1] 效果最佳 ```javascript -HeatmapLayer.size ('field', [0, 1]) +HeatmapLayer.size('field', [0, 1]); ``` - ### color -default heatMap 类型不需设置 color映射 + +default heatMap 类型不需设置 color 映射 color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color) - - ### style -grid hexagon 可以通过style 设置透明度 +grid hexagon 可以通过 style 设置透明度 -default热力图需要通过style配置参数热力图参数 +default 热力图需要通过 style 配置参数热力图参数 -- intensity   全局热力权重   推荐权重范围 1-5 -- radius  热力半径，单位像素 +- 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 ] - } - }) +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 +// 测试数据 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 ] - } - }) +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:[ - - { +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"]) - + 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, +var layer = scene + .HeatmapLayer({ + zIndex: 2, + }) + .souce(data, { + parser: { + type: 'csv', + x: lng, + y: lat, }, - transforms:[ - { - type:'hexgon', - size:1500, - field:'count', - operation: 'sum', - } - ] + transforms: [ + { + type: 'hexgon', + size: 1500, + field: 'count', + operation: 'sum', + }, + ], }) .shape('hexgon') - .size(1000) + .size(1000) .color('sum') .style({ - coverage:0.8 - }) -render() -``` \ No newline at end of file + coverage: 0.8, + }); +render(); +``` diff --git a/docs/api/layer/heatmap.zh.md b/docs/api/layer/heatmap.zh.md index 2431fc5cb7..03ab83a547 100644 --- a/docs/api/layer/heatmap.zh.md +++ b/docs/api/layer/heatmap.zh.md @@ -2,39 +2,38 @@ title: HeatmapLayer order: 5 --- -# heatmapLayer +# heatmapLayer ### 简介 热力图图层，包含三种类型的， -- 方格热力图 + +- 方格热力图 将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。 -- 六边形热力图 +- 六边形热力图 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局 -- 经典热力图 +- 经典热力图 - - -⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法 +⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在 source 方法设置数据聚合方法 ### source 热力图只支持点数据作为数据源 -布局方法 通过source的 tansforms属性配置 +布局方法 通过 source 的 tansforms 属性配置 - type  数据聚合类型 grid、hexagon - size  网格半径 单位 米 - field  聚合字段 -- method 聚合方法  count,max,min,sum,mean5个统计维度 +- method 聚合方法   count,max,min,sum,mean5 个统计维度 ```javascript - + layer.source(data, { parser: { type: 'csv', @@ -45,7 +44,7 @@ layer.source(data, { { type: 'grid', size: 15000, - field:'v', + field:'v', method:'sum' } ], @@ -54,16 +53,15 @@ layer.source(data, { ### shape -不同类型热力图shape支持 +不同类型热力图 shape 支持 -| | 2D | 3d | -| --- | --- | --- | +| | 2D | 3d | +| ------------ | ------------------------------ | ------------------------------------------------- | | 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn | -| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon | -| 普通热力图 | heatmap | heatmap | +| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon | +| 普通热力图 | heatmap | heatmap | - -热力图布局下只shape方法只支持常量的可视化。 +热力图布局下只 shape 方法只支持常量的可视化。 ```javascript HeatmapLayer.shape('square'); @@ -72,9 +70,10 @@ HeatmapLayer.shape('hexagon'); ``` ### size -当前版本 shape 为grid，hexagon不需要设置 size 映射 -default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size) +当前版本 shape 为 grid，hexagon 不需要设置 size 映射 + +default 类型需要设置 size 映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size) **size(field,values) ** @@ -82,123 +81,139 @@ default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com - values: 数据映射区间 热力图显示 [0, 1] 效果最佳 ```javascript -HeatmapLayer.size ('field', [0, 1]) +HeatmapLayer.size('field', [0, 1]); ``` - ### color -default heatMap 类型不需设置 color映射 + +default heatMap 类型不需设置 color 映射 color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color) - - ### style -grid hexagon 可以通过style 设置透明度 +grid hexagon 可以通过 style 设置透明度 -default热力图需要通过style配置参数热力图参数 +default 热力图需要通过 style 配置参数热力图参数 -- intensity   全局热力权重   推荐权重范围 1-5 -- radius  热力半径，单位像素 +- 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 ] - } - }) +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 +// 测试数据 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 ] - } - }) +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:[ - - { +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"]) - + 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, +var layer = scene + .HeatmapLayer({ + zIndex: 2, + }) + .souce(data, { + parser: { + type: 'csv', + x: lng, + y: lat, }, - transforms:[ - { - type:'hexgon', - size:1500, - field:'count', - operation: 'sum', - }, - ], + transforms: [ + { + type: 'hexgon', + size: 1500, + field: 'count', + operation: 'sum', + }, + ], }) .shape('hexgon') - .size(1000) + .size(1000) .color('sum') .style({ - coverage:0.8 - }) -render() -``` \ No newline at end of file + coverage: 0.8, + }); +render(); +``` diff --git a/docs/api/layer/imagelayer.en.md b/docs/api/layer/imagelayer.en.md index 4d0c122617..1aa89d7da4 100644 --- a/docs/api/layer/imagelayer.en.md +++ b/docs/api/layer/imagelayer.en.md @@ -2,9 +2,11 @@ title: ImageLayer order: 5 --- + # ImageLayer ## 简介 + 将图片添加到地图上，需要指定图片的经纬度范围 ### 代码示例 @@ -16,8 +18,8 @@ layer.source( { parser: { type: 'image', - extent: [ 121.168, 30.2828, 121.384, 30.4219 ] - } - } + extent: [121.168, 30.2828, 121.384, 30.4219], + }, + }, ); ``` diff --git a/docs/api/layer/imagelayer.zh.md b/docs/api/layer/imagelayer.zh.md index 4d0c122617..1aa89d7da4 100644 --- a/docs/api/layer/imagelayer.zh.md +++ b/docs/api/layer/imagelayer.zh.md @@ -2,9 +2,11 @@ title: ImageLayer order: 5 --- + # ImageLayer ## 简介 + 将图片添加到地图上，需要指定图片的经纬度范围 ### 代码示例 @@ -16,8 +18,8 @@ layer.source( { parser: { type: 'image', - extent: [ 121.168, 30.2828, 121.384, 30.4219 ] - } - } + 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 cf80d00331..af26053af4 100644 --- a/docs/api/layer/layer.en.md +++ b/docs/api/layer/layer.en.md @@ -2,135 +2,130 @@ title: Map Layer order: 0 --- + # Layer - ## 简介 + L7 Layer 接口设计遵循图形语法，在可视表达上 语法示例 ```javascript new Layer(option) -.source() -.color() -.size() -.shape() -.style() - + .source() + .color() + .size() + .shape() + .style(); ``` - ## 构造函数 - ## 配置项 ### visable -图层是否可见   {bool } default true + +图层是否可见   {bool } default true ### zIndex - 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0 + +图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0 + ### minZoom + 图层显示最小缩放等级，（0-18）   {number}  default 0 ### maxZoom - 图层显示最大缩放等级 （0-18）   {number}  default 18 +图层显示最大缩放等级 （0-18）   {number}  default 18 -## 鼠标事件 +## 鼠标事件 -⚠️ beta版当前不支持，正式版会支持 +⚠️ 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)=>{}); // 鼠标右键图层要素 - +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) + +数据源为 layer 设置数据 source(data,config) - data {geojson|json|csv} +源数据 -      源数据 - -- config  可选 数据源配置项 - - parser 数据解析，默认是解析层geojson +- config   可选   数据源配置项 + - parser 数据解析，默认是解析层 geojson - transforms [transform，transform ]  数据处理转换 可设置多个 - parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source) +parser 和  transforms [见 source 文档](https://www.yuque.com/antv/l7/source) ```javascript layer.source(data, { - parser: { - type: 'csv', - x: 'lng', - y: 'lat' + 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; }, - 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' - } - ] - }) + }, + { + 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 + type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize } - ``` ### size 将数据值映射到图形的大小上的方法。 -**注意：**  +**注意：** 不同图层的 size 的含义有所差别： @@ -140,36 +135,36 @@ cscle('field', scaleConfig) - polygon size 影响的是高度 - - ```javascript pointLayer.size(10); // 常量 pointLayer.size('type'); // 使用字段映射到大小 -pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值 -pointLayer.size('type', (type) => { // 回调函数 - if(type === 'a') { +pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值 +pointLayer.size('type', (type) => { + // 回调函数 + if (type === 'a') { return 10; } return 5; }); ``` - #### size(value） -传入数字常量，如 `pointLayer.size(20)` +传入数字常量，如  `pointLayer.size(20)` #### size(field) -根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。 + +根据 field 字段的值映射大小，使用默认的`最大值 max:10`  和`最小值 min: 1`。 #### size(field, callback) + 使用回调函数控制图形大小。 - `callback`: function 回调函数。 ```javascript pointLayer.size('age', (value) => { - if(value === 1) { + if (value === 1) { return 5; } return 10; @@ -183,14 +178,16 @@ pointLayer.size('age', (value) => { ```javascript layer.color('red'); // 常量颜色 layer.color('type'); // 对 type 字段进行映射，使用内置的颜色 -layer.color('type', [ 'red', 'blue' ]) // 指定颜色 -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) => { //多个参数，通过回调函数 +layer.color('type*value', (type, value) => { + //多个参数，通过回调函数 if (type === 'a' && value > 100) { return 'red'; } @@ -198,10 +195,8 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数 }); ``` - #### color(value) - 参数：`value` ：string 只支持接收一个参数，value 可以是： @@ -209,13 +204,12 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数 - 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。 - 示例 -```javascript -layer.color('name') // 映射数据字段 -layer.color('white') // 指定颜色 -``` +```javascript +layer.color('name'); // 映射数据字段 +layer.color('white'); // 指定颜色 +``` #### color(field, colors) @@ -223,36 +217,34 @@ layer.color('white') // 指定颜色 - `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。 --  `colors`: string | array | function +- `colors`: string | array | function - -colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。 +colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。 ```javascript layer.color('name'); // 使用默认的颜色 -layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色 +layer.color('name', ['red', 'blue']); // 使用传入的指定颜色 ``` - colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入： - - ```javascript layer.color('gender', (value) => { - if(value === 1) { - return 'red' + if (value === 1) { + return 'red'; } return 'blue'; }); layer.color('gender*age', (gender, age) => { - if(age === 20 && gender ==' 男' ) { - return 'red' + if (age === 20 && gender == ' 男') { + return 'red'; } return 'blue'; }); ``` ### shape + 将数据值映射到图形的形状上的方法。 **shape(shape)** @@ -261,48 +253,44 @@ layer.color('gender*age', (gender, age) => { 只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 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 | | - +| 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  设置透明度 +- opacity   设置透明度 -- stroke 线填充颜色 +- stroke 线填充颜色 - strokeWidth 线的宽度 - ```javascript layer.style({ - fill:'red', - opacity:0.8, - stroke:'white' -}) + fill: 'red', + opacity: 0.8, + stroke: 'white', +}); ``` - ### show + 图层显示 ```javascript layer.show(); ``` - ### hide 图层隐藏 @@ -311,12 +299,10 @@ layer.show(); layer.hide(); ``` - ### fitBounds 缩放到图层范围 ```javascript -layer.fitBounds() - +layer.fitBounds(); ``` diff --git a/docs/api/layer/layer.zh.md b/docs/api/layer/layer.zh.md index 05f63ab333..5b2be78088 100644 --- a/docs/api/layer/layer.zh.md +++ b/docs/api/layer/layer.zh.md @@ -2,135 +2,130 @@ title: Layer order: 0 --- + # Layer - ## 简介 + L7 Layer 接口设计遵循图形语法，在可视表达上 语法示例 ```javascript new Layer(option) -.source() -.color() -.size() -.shape() -.style() - + .source() + .color() + .size() + .shape() + .style(); ``` - ## 构造函数 - ## 配置项 ### visable -图层是否可见   {bool } default true + +图层是否可见   {bool } default true ### zIndex - 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0 + +图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int}   default 0 + ### minZoom + 图层显示最小缩放等级，（0-18）   {number}  default 0 ### maxZoom - 图层显示最大缩放等级 （0-18）   {number}  default 18 +图层显示最大缩放等级 （0-18）   {number}  default 18 -## 鼠标事件 +## 鼠标事件 -⚠️ beta版当前不支持，正式版会支持 +⚠️ 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)=>{}); // 鼠标右键图层要素 - +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) + +数据源为 layer 设置数据 source(data,config) - data {geojson|json|csv} +源数据 -      源数据 - -- config  可选 数据源配置项 - - parser 数据解析，默认是解析层geojson +- config   可选   数据源配置项 + - parser 数据解析，默认是解析层 geojson - transforms [transform，transform ]  数据处理转换 可设置多个 - parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source) +parser 和  transforms [见 source 文档](https://www.yuque.com/antv/l7/source) ```javascript layer.source(data, { - parser: { - type: 'csv', - x: 'lng', - y: 'lat' + 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; }, - 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' - } - ] - }) + }, + { + 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 + type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize } - ``` ### size 将数据值映射到图形的大小上的方法。 -**注意：**  +**注意：** 不同图层的 size 的含义有所差别： @@ -140,36 +135,36 @@ cscle('field', scaleConfig) - polygon size 影响的是高度 - - ```javascript pointLayer.size(10); // 常量 pointLayer.size('type'); // 使用字段映射到大小 -pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值 -pointLayer.size('type', (type) => { // 回调函数 - if(type === 'a') { +pointLayer.size('type', [0, 10]); // 使用字段映射到大小，并指定最大值和最小值 +pointLayer.size('type', (type) => { + // 回调函数 + if (type === 'a') { return 10; } return 5; }); ``` - #### size(value） -传入数字常量，如 `pointLayer.size(20)` +传入数字常量，如  `pointLayer.size(20)` #### size(field) -根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。 + +根据 field 字段的值映射大小，使用默认的`最大值 max:10`  和`最小值 min: 1`。 #### size(field, callback) + 使用回调函数控制图形大小。 - `callback`: function 回调函数。 ```javascript pointLayer.size('age', (value) => { - if(value === 1) { + if (value === 1) { return 5; } return 10; @@ -183,14 +178,16 @@ pointLayer.size('age', (value) => { ```javascript layer.color('red'); // 常量颜色 layer.color('type'); // 对 type 字段进行映射，使用内置的颜色 -layer.color('type', [ 'red', 'blue' ]) // 指定颜色 -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) => { //多个参数，通过回调函数 +layer.color('type*value', (type, value) => { + //多个参数，通过回调函数 if (type === 'a' && value > 100) { return 'red'; } @@ -198,10 +195,8 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数 }); ``` - #### color(value) - 参数：`value` ：string 只支持接收一个参数，value 可以是： @@ -209,13 +204,12 @@ layer.color('type*value', (type, value) => { //多个参数，通过回调函数 - 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。 - 示例 -```javascript -layer.color('name') // 映射数据字段 -layer.color('white') // 指定颜色 -``` +```javascript +layer.color('name'); // 映射数据字段 +layer.color('white'); // 指定颜色 +``` #### color(field, colors) @@ -223,36 +217,34 @@ layer.color('white') // 指定颜色 - `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。 --  `colors`: string | array | function +- `colors`: string | array | function - -colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。 +colors 的参数有以下情况：  如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。 ```javascript layer.color('name'); // 使用默认的颜色 -layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色 +layer.color('name', ['red', 'blue']); // 使用传入的指定颜色 ``` - colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入： - - ```javascript layer.color('gender', (value) => { - if(value === 1) { - return 'red' + if (value === 1) { + return 'red'; } return 'blue'; }); layer.color('gender*age', (gender, age) => { - if(age === 20 && gender ==' 男' ) { - return 'red' + if (age === 20 && gender == ' 男') { + return 'red'; } return 'blue'; }); ``` ### shape + 将数据值映射到图形的形状上的方法。 **shape(shape)** @@ -261,48 +253,44 @@ layer.color('gender*age', (gender, age) => { 只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 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 | | - +| 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  设置透明度 +- opacity   设置透明度 -- stroke 线填充颜色 +- stroke 线填充颜色 - strokeWidth 线的宽度 - ```javascript layer.style({ - fill:'red', - opacity:0.8, - stroke:'white' -}) + fill: 'red', + opacity: 0.8, + stroke: 'white', +}); ``` - ### show + 图层显示 ```javascript layer.show(); ``` - ### hide 图层隐藏 @@ -311,12 +299,10 @@ layer.show(); layer.hide(); ``` - ### fitBounds 缩放到图层范围 ```javascript -layer.fitBounds() - +layer.fitBounds(); ``` diff --git a/docs/api/layer/linelayer.en.md b/docs/api/layer/linelayer.en.md index 90d7b56a43..47e7a1e33c 100644 --- a/docs/api/layer/linelayer.en.md +++ b/docs/api/layer/linelayer.en.md @@ -2,16 +2,17 @@ title: LineLayer order: 2 --- + ## 线图层 ### shape -线图层支持4种 shape +线图层支持 4 种 shape - line 绘制路径图， - arc 绘制弧线 通过贝塞尔曲线算法技术弧线 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 -- arc3d 3d弧线地图 3D视角 +- arc3d 3d 弧线地图 3D 视角 ⚠️ 弧线只需要设置起始点坐标即可 @@ -28,7 +29,8 @@ order: 2 }) ``` -如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点 +如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点 + ``` { "type": "FeatureCollection", @@ -59,14 +61,10 @@ order: 2 线图层 可以设置高度 -- size 类型为number 则表示 line的宽度 +- size 类型为 number 则表示 line 的宽度 - size 类型为 [number , number] 分别表示宽度和高度 ```javascript - lineLayer.size(1); // 线的宽度为 1 -lineLayer.size([1,2]); // 宽度为1，高度2 - +lineLayer.size([1, 2]); // 宽度为1，高度2 ``` - - diff --git a/docs/api/layer/linelayer.zh.md b/docs/api/layer/linelayer.zh.md index 0bc2f6ae6b..5a9c25e21c 100644 --- a/docs/api/layer/linelayer.zh.md +++ b/docs/api/layer/linelayer.zh.md @@ -2,16 +2,17 @@ title: LineLayer order: 2 --- + ## 线图层 ### shape -线图层支持4种 shape +线图层支持 4 种 shape - line 绘制路径图， - arc 绘制弧线 通过贝塞尔曲线算法技术弧线 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 -- arc3d 3d弧线地图 3D视角 +- arc3d 3d 弧线地图 3D 视角 ⚠️ 弧线只需要设置起始点坐标即可 @@ -28,7 +29,8 @@ order: 2 }) ``` -如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点 +如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点 + ``` { "type": "FeatureCollection", @@ -59,14 +61,10 @@ order: 2 线图层 可以设置高度 -- size 类型为number 则表示 line的宽度 +- size 类型为 number 则表示 line 的宽度 - size 类型为 [number , number] 分别表示宽度和高度 ```javascript - lineLayer.size(1); // 线的宽度为 1 -lineLayer.size([1,2]); // 宽度为1，高度2 - +lineLayer.size([1, 2]); // 宽度为1，高度2 ``` - - diff --git a/docs/api/layer/pointlayer.en.md b/docs/api/layer/pointlayer.en.md index 340d0d39d3..5804e506b9 100644 --- a/docs/api/layer/pointlayer.en.md +++ b/docs/api/layer/pointlayer.en.md @@ -2,15 +2,16 @@ title: PointLayer order: 1 --- + # PointLayer - ## 简介 -点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。 + +点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。 shape 支持 -**3D类型 柱图** +**3D 类型 柱图** ``` 'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn' @@ -26,52 +27,54 @@ shape 支持 **图片标注** -通过 ```Scene.addImage()``` 可以添加图片资源， - +通过 `Scene.addImage()` 可以添加图片资源， ### 代码示例 - #### 基本图形显示示例 ```javascript -import { PointLayer } from "@antv/l7" +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"]) - + 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', +); -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') - +const layer = new PointLayer({ + zIndex: 4, +}) + .source(city) + .size(20.0) + .shape('local') + .color('#0D408C'); ``` - - - diff --git a/docs/api/layer/pointlayer.zh.md b/docs/api/layer/pointlayer.zh.md index 1381b60128..5804e506b9 100644 --- a/docs/api/layer/pointlayer.zh.md +++ b/docs/api/layer/pointlayer.zh.md @@ -5,13 +5,13 @@ order: 1 # PointLayer - ## 简介 -点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。 + +点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。 shape 支持 -**3D类型 柱图** +**3D 类型 柱图** ``` 'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn' @@ -27,52 +27,54 @@ shape 支持 **图片标注** -通过 ```Scene.addImage()``` 可以添加图片资源， - +通过 `Scene.addImage()` 可以添加图片资源， ### 代码示例 - #### 基本图形显示示例 ```javascript -import { PointLayer } from "@antv/l7" +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"]) - + 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', +); -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') - +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 bbfe14d1a3..dfe5238b6a 100644 --- a/docs/api/layer/polygonlayer.en.md +++ b/docs/api/layer/polygonlayer.en.md @@ -2,25 +2,23 @@ title: PolygonLayer order: 3 --- + # 填充图 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 ### shape -填充图支持3种shape +填充图支持 3 种 shape -- fill 绘制填充面 不支持数据映射 -- line 绘制填充图描边 不支持数据映射 -- extrude 对填充图3D拉伸 不支持数据映射 - -``` javascript - PolyonLayer.shape('fill'); - PolyonLayer.shape('line').size(1); // size 表示线宽度 - PolyonLayer.shape('extrude'); // size 表示高度 +- 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/layer/polygonlayer.zh.md b/docs/api/layer/polygonlayer.zh.md index bbfe14d1a3..dfe5238b6a 100644 --- a/docs/api/layer/polygonlayer.zh.md +++ b/docs/api/layer/polygonlayer.zh.md @@ -2,25 +2,23 @@ title: PolygonLayer order: 3 --- + # 填充图 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。 ### shape -填充图支持3种shape +填充图支持 3 种 shape -- fill 绘制填充面 不支持数据映射 -- line 绘制填充图描边 不支持数据映射 -- extrude 对填充图3D拉伸 不支持数据映射 - -``` javascript - PolyonLayer.shape('fill'); - PolyonLayer.shape('line').size(1); // size 表示线宽度 - PolyonLayer.shape('extrude'); // size 表示高度 +- 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/source/geojson.en.md b/docs/api/source/geojson.en.md index d6949d2fc5..cb89d7a3c1 100644 --- a/docs/api/source/geojson.en.md +++ b/docs/api/source/geojson.en.md @@ -3,25 +3,196 @@ title: geojson order: 1 --- - -# geojson 数据介绍 - - ## 简介 -GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 +GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 +[The GeoJSON Format](https://tools.ietf.org/html/draft-butler-geojson-06) -[geojson详细文档]() +L7 数据 source 支持   传入 Geometry 集合 FeatureCollection -## Geojson相关的JS库 +### Feature Collection Object + +```json +{ + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "name": "tom" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [-2.8125, 34.59704151614417], + [65.390625, 34.59704151614417], + [65.390625, 61.10078883158897], + [-2.8125, 61.10078883158897], + [-2.8125, 34.59704151614417] + ] + ] + } + } + ] +} +``` + +### Feature Object + +```json +{ + "type": "Feature", + "properties": {}, + "geometry": {} +} +``` + +### Gemetry Object + +支持 Gemetry Object 类型 + +### Point + +```json +{ + "type": "Point", + "coordinates": [100.0, 0.0] +} +``` + +### MultiPoint + +```json +{ + "type": "MultiPoint", + "coordinates": [ + [100.0, 0.0], + [101.0, 1.0] + ] +} +``` + +Line + +### LineSring + +```json +{ + "type": "LineString", + "coordinates": [ + [100.0, 0.0], + [101.0, 1.0] + ] +} +``` + +### MultiLineString + +```json +{ + "type": "MultiLineString", + "coordinates": [ + [ + [100.0, 0.0], + [101.0, 1.0] + ], + [ + [102.0, 2.0], + [103.0, 3.0] + ] + ] +} +``` + +Polygon + +### Polygon + +```json +{ + "type": "Polygon", + "coordinates": [ + [ + [100.0, 0.0], + [101.0, 0.0], + [101.0, 1.0], + [100.0, 1.0], + [100.0, 0.0] + ] + ] +} +``` + +With holes: + +```json +{ + "type": "Polygon", + "coordinates": [ + [ + [-170.0, 10.0], + [170.0, 10.0], + [170.0, -10.0], + [-170.0, -10.0], + [-170.0, 10.0] + ], + [ + [175.0, 5.0], + [-175.0, 5.0], + [-175.0, -5.0], + [175.0, -5.0], + [175.0, 5.0] + ] + ] +} +``` + +### MultiPolygon + +```json +{ + "type": "MultiPolygon", + "coordinates": [ + [ + [ + [102.0, 2.0], + [103.0, 2.0], + [103.0, 3.0], + [102.0, 3.0], + [102.0, 2.0] + ] + ], + [ + [ + [100.0, 0.0], + [101.0, 0.0], + [101.0, 1.0], + [100.0, 1.0], + [100.0, 0.0] + ], + [ + [100.2, 0.2], + [100.8, 0.2], + [100.8, 0.8], + [100.2, 0.8], + [100.2, 0.2] + ] + ] + ] +} +``` + +[geojson 详细文档]() + +## Geojson 相关的 JS 库 ### 地理统计分析工具 -[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库 - +[turfjs](http://turfjs.org/):   地理数据计算，处理，统计，分析的 Javascript 库 ### 在线工具： -[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据 +[http://geojson.io/](http://geojson.io/)     可以在线查看，绘制，修改 GeoJSON 数据 -[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据 +[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的 geojson，还能够简化 GeoJSON 数据 diff --git a/docs/api/source/geojson.zh.md b/docs/api/source/geojson.zh.md index d6949d2fc5..ad1a9d1ac9 100644 --- a/docs/api/source/geojson.zh.md +++ b/docs/api/source/geojson.zh.md @@ -2,26 +2,200 @@ title: geojson order: 1 --- - - -# geojson 数据介绍 - - ## 简介 -GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 +GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 +[The GeoJSON Format](https://tools.ietf.org/html/draft-butler-geojson-06) -[geojson详细文档]() +L7 数据 source 支持   传入 Geometry 集合 FeatureCollection -## Geojson相关的JS库 +### Feature Collection Object + +一个 feature Colletion 由对个 feature 组成 + +```json +{ + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": { + "name": "tom" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ + [ + [-2.8125, 34.59704151614417], + [65.390625, 34.59704151614417], + [65.390625, 61.10078883158897], + [-2.8125, 61.10078883158897], + [-2.8125, 34.59704151614417] + ] + ] + } + } + ] +} +``` + +### Feature Object + +一个 feature 有 geometry 空间信息，properties 属性信息，其中 geometry 是必须字段 + +```json +{ + "type": "Feature", + "properties": {}, + "geometry": {} +} +``` + +### Gemetry Object + +支持 Gemetry Object 类型 + +#### Point + +```json +{ + "type": "Point", + "coordinates": [100.0, 0.0] +} +``` + +#### MultiPoint + +```json +{ + "type": "MultiPoint", + "coordinates": [ + [100.0, 0.0], + [101.0, 1.0] + ] +} +``` + +Line + +#### LineSring + +```json +{ + "type": "LineString", + "coordinates": [ + [100.0, 0.0], + [101.0, 1.0] + ] +} +``` + +#### MultiLineString + +```json +{ + "type": "MultiLineString", + "coordinates": [ + [ + [100.0, 0.0], + [101.0, 1.0] + ], + [ + [102.0, 2.0], + [103.0, 3.0] + ] + ] +} +``` + +Polygon + +#### Polygon + +```json +{ + "type": "Polygon", + "coordinates": [ + [ + [100.0, 0.0], + [101.0, 0.0], + [101.0, 1.0], + [100.0, 1.0], + [100.0, 0.0] + ] + ] +} +``` + +With holes: + +```json +{ + "type": "Polygon", + "coordinates": [ + [ + [-170.0, 10.0], + [170.0, 10.0], + [170.0, -10.0], + [-170.0, -10.0], + [-170.0, 10.0] + ], + [ + [175.0, 5.0], + [-175.0, 5.0], + [-175.0, -5.0], + [175.0, -5.0], + [175.0, 5.0] + ] + ] +} +``` + +#### MultiPolygon + +```json +{ + "type": "MultiPolygon", + "coordinates": [ + [ + [ + [102.0, 2.0], + [103.0, 2.0], + [103.0, 3.0], + [102.0, 3.0], + [102.0, 2.0] + ] + ], + [ + [ + [100.0, 0.0], + [101.0, 0.0], + [101.0, 1.0], + [100.0, 1.0], + [100.0, 0.0] + ], + [ + [100.2, 0.2], + [100.8, 0.2], + [100.8, 0.8], + [100.2, 0.8], + [100.2, 0.2] + ] + ] + ] +} +``` + +[geojson 详细文档]() + +## Geojson 相关的 JS 库 ### 地理统计分析工具 -[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库 - +[turfjs](http://turfjs.org/):   地理数据计算，处理，统计，分析的 Javascript 库 ### 在线工具： -[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据 +[http://geojson.io/](http://geojson.io/)     可以在线查看，绘制，修改 GeoJSON 数据 -[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据 +[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的 geojson，还能够简化 GeoJSON 数据 diff --git a/docs/api/source/source.en.md b/docs/api/source/source.en.md index 5487b1d723..a1111f91ea 100644 --- a/docs/api/source/source.en.md +++ b/docs/api/source/source.en.md @@ -3,23 +3,18 @@ title: Source order: 0 --- - -# Source - - ### 概述 source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform); **parser:** -不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。 +不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json 等不同数据格式，栅格数据，包括 Raster，Image 数据。将来还会支持瓦片格式数据。 **transform** 数据转换，数据统计，网格布局，数据聚合等数据操作。 - ## API ### parser @@ -28,65 +23,61 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据 - 矢量数据 支持 csv，geojson，json 三种数据类型 -- 栅格数据 支持 image，Raster - - +- 栅格数据 支持 image，Raster #### geojson [geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以 -不需要设置parser 参数 +不需要设置 parser 参数 ```javascript -layer.source(data) +layer.source(data); ``` - #### json -json 不是标准的地理数据结构，因此需要设置对应的经纬度字段 +json 不是标准的地理数据结构，因此需要设置对应的经纬度字段 **点数据** -x: 经度字段 +x: 经度字段 y: 纬度字段 ```javascript +const data = [ + { + lng: 112.345, + lat: 30.455, + value: 10, + }, + { + lng: 114.345, + lat: 31.455, + value: 10, + }, +]; -const data = [{ - lng:112.345, - lat:30.455, - value: 10 - },{ -  lng:114.345, - lat:31.455, - value: 10 -  } -] - -layer.source( - data, - { - parser: { - type:'json', - x:'lng', - y:'lat', - } -}) +layer.source(data, { + parser: { + type: 'json', + x: 'lng', + y: 'lat', + }, +}); ``` **线段数据** - type: json +type: json 这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标 - x:经度字段 起点经度 - y:纬度字段 起点纬度 - x1:经度字段 终点经度 - y1:纬度字段 终点纬度 +x:经度字段 起点经度 +y:纬度字段 起点纬度 +x1:经度字段 终点经度 +y1:纬度字段 终点纬度 ```javascript const data = [{ @@ -101,7 +92,7 @@ const data = [{   lng2:112.345, lat2:30.455, value: 10 -  } +  } ]; layer.source( @@ -110,9 +101,9 @@ layer.source( parser:{ type:'json', x:'lng1', - y:'lat1' , + y:'lat1' ,     x1:'lng1', - y1:'lat2' , + y1:'lat2' , } } }) @@ -120,125 +111,106 @@ layer.source( **面数据** -需要指定coordinates 字段, coordinates据格式 +需要指定 coordinates 字段, coordinates 据格式 **注意面数据 coord  是三层数据结构** ```javascript +[ + { + type: 'Polygon', + geometryCoord: [ + [ + [115.1806640625, 30.637912028341123], + [114.9609375, 29.152161283318915], + [117.79541015625001, 27.430289738862594], + [118.740234375, 29.420460341013133], + [117.46582031249999, 31.50362930577303], + [115.1806640625, 30.637912028341123], + ], + ], + }, +]; -[ { - type: "Polygon", - 'geometryCoord': [ - [ - [ - 115.1806640625, - 30.637912028341123 - ], - [ - 114.9609375, - 29.152161283318915 - ], - [ - 117.79541015625001, - 27.430289738862594 - ], - [ - 118.740234375, - 29.420460341013133 - ], - [ - 117.46582031249999, - 31.50362930577303 - ], - [ - 115.1806640625, - 30.637912028341123 - ] - ] - ] - } - ] - - layer.source(data,{ - parser:{ - type:'json', - coordinates:'geometryCoord' - } - }) +layer.source(data, { + parser: { + type: 'json', + coordinates: 'geometryCoord', + }, +}); ``` - - - #### csv -点，线数据配置项同json数据类型 + +点，线数据配置项同 json 数据类型 + +```javascript +layer.source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + x1: 'lng1', + y1: 'lat2', + }, +}); +``` + +**栅格数据类型\*\*** + +#### image + +根据图片的经纬度范围，将图片添加到地图上。  配置项 + +- type: image +- extent: 图像的经纬度范围 [] ```javascript layer.source( - data, + 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', { - parser:{ - type:'csv', - x:'lng1', - y:'lat1' , -     x1:'lng1', - y1:'lat2' , - } -}) + parser: { + type: 'image', + extent: [121.168, 30.2828, 121.384, 30.4219], + }, + }, +); ``` -**栅格数据类型**** - -#### image - 根据图片的经纬度范围，将图片添加到地图上。 配置项 - --  type: image --  extent: 图像的经纬度范围 [] - -```javascript -layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{ - parser:{ - type:'image', - extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ] - } - - }) -``` -  - #### raster -栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项 + +栅格数据类型，主要表示遥感数据类型 data 栅格数据的二维矩阵数据 parser 配置项 - type  raster -- width  数据宽度二维矩阵 columns  +- width  数据宽度二维矩阵 columns - height 数据高度 - min 数据最大值 - max 数据最小值 - extent 经纬度范围 ```javascript - source(values, { - parser: { - type: 'raster', - width: n, - height: m, - min: 0, - max: 8000, - extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ] - } - }) +source(values, { + parser: { + type: 'raster', + width: n, + height: m, + min: 0, + max: 8000, + extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963], + }, +}); ``` - ### transforms -目前支持三种数据处理方法 map，grid，hexagon transform配置项 + +目前支持三种数据处理方法 map，grid，hexagon transform 配置项 - type 数据处理类型 --  tansform cfg  数据处理配置项 - +- tansform cfg  数据处理配置项 #### map -数据处理，支持自定义callback函数 + +数据处理，支持自定义 callback 函数 - callback:function 回调函数 @@ -259,15 +231,14 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp }, ``` - #### grid 生成方格网布局，根据数据字段统计，主要在网格热力图中使用 --  type: 'grid', --  size: 网格半径 --  field: 数据统计字段 --  method:聚合方法  count,max,min,sum,mean5个统计维度 +- type: 'grid', +- size: 网格半径 +- field: 数据统计字段 +- method:聚合方法   count,max,min,sum,mean5 个统计维度 ```javascript layer.source(data, { @@ -282,17 +253,15 @@ layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jp } ``` - #### hexagon + 生成六边形网格布局，根据数据字段统计 --  type: 'hexagon', --  size: 网格半径 --  field: 数据统计字段 --  method:聚合方法  count,max,min,sum,mean5个统计维度 - +- type: 'hexagon', +- size: 网格半径 +- field: 数据统计字段 +- method:聚合方法   count,max,min,sum,mean5 个统计维度 ``` - - +``` diff --git a/docs/api/source/source.zh.md b/docs/api/source/source.zh.md index ebf431e531..7b65f5cdce 100644 --- a/docs/api/source/source.zh.md +++ b/docs/api/source/source.zh.md @@ -3,23 +3,18 @@ title: Source order: 0 --- - -# Source - - ### 概述 source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform); **parser:** -不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。 +不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json 等不同数据格式，栅格数据，包括 Raster，Image 数据。将来还会支持瓦片格式数据。 **transform:** 数据转换，数据统计，网格布局，数据聚合等数据操作。 - ## API ### parser @@ -28,65 +23,61 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据 - 矢量数据 支持 csv，geojson，json 三种数据类型 -- 栅格数据 支持 image，Raster - - +- 栅格数据 支持 image，Raster #### geojson [geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以 -不需要设置parser 参数 +不需要设置 parser 参数 ```javascript layer.source(data); ``` - #### json -json 不是标准的地理数据结构，因此需要设置对应的经纬度字段 +json 不是标准的地理数据结构，因此需要设置对应的经纬度字段 **点数据** -x: 经度字段 +x: 经度字段 y: 纬度字段 ```javascript +const data = [ + { + lng: 112.345, + lat: 30.455, + value: 10, + }, + { + lng: 114.345, + lat: 31.455, + value: 10, + }, +]; -const data = [{ - lng:112.345, - lat:30.455, - value: 10 - },{ -  lng:114.345, - lat:31.455, - value: 10 -  } -] - -layer.source( - data, - { - parser: { - type:'json', - x:'lng', - y:'lat', - } -}) +layer.source(data, { + parser: { + type: 'json', + x: 'lng', + y: 'lat', + }, +}); ``` **线段数据** - type: json +type: json 这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标 - x:经度字段 起点经度 - y:纬度字段 起点纬度 - x1:经度字段 终点经度 - y1:纬度字段 终点纬度 +x:经度字段 起点经度 +y:纬度字段 起点纬度 +x1:经度字段 终点经度 +y1:纬度字段 终点纬度 ```javascript const data = [{ @@ -102,7 +93,7 @@ const data = [{   lng2:112.345, lat2:30.455, value: 10 -  } +  } ]; layer.source( @@ -111,9 +102,9 @@ layer.source( parser:{ type:'json', x:'lng1', - y:'lat1' , + y:'lat1' ,     x1:'lng1', - y1:'lat2' , + y1:'lat2' , } } }) @@ -121,179 +112,158 @@ layer.source( **面数据** -需要指定coordinates 字段, coordinates据格式 +需要指定 coordinates 字段, coordinates 据格式 **注意面数据 coord  是三层数据结构** ```javascript +[ + { + type: 'Polygon', + geometryCoord: [ + [ + [115.1806640625, 30.637912028341123], + [114.9609375, 29.152161283318915], + [117.79541015625001, 27.430289738862594], + [118.740234375, 29.420460341013133], + [117.46582031249999, 31.50362930577303], + [115.1806640625, 30.637912028341123], + ], + ], + }, +]; -[ { - type: "Polygon", - 'geometryCoord': [ - [ - [ - 115.1806640625, - 30.637912028341123 - ], - [ - 114.9609375, - 29.152161283318915 - ], - [ - 117.79541015625001, - 27.430289738862594 - ], - [ - 118.740234375, - 29.420460341013133 - ], - [ - 117.46582031249999, - 31.50362930577303 - ], - [ - 115.1806640625, - 30.637912028341123 - ] - ] - ] - } - ]; - - layer.source(data,{ - parser:{ - type:'json', - coordinates:'geometryCoord' - } - }); +layer.source(data, { + parser: { + type: 'json', + coordinates: 'geometryCoord', + }, +}); ``` - - - #### csv -点，线数据配置项同json数据类型 + +点，线数据配置项同 json 数据类型 + +```javascript +layer.source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + x1: 'lng1', + y1: 'lat2', + }, +}); +``` + +**栅格数据类型\*\*** + +#### image + +根据图片的经纬度范围，将图片添加到地图上。  配置项 + +- type: image +- extent: 图像的经纬度范围 [] ```javascript layer.source( - data, + 'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg', { - parser:{ - type:'csv', - x:'lng1', - y:'lat1' , -     x1:'lng1', - y1:'lat2' , - } -}) + parser: { + type: 'image', + extent: [121.168, 30.2828, 121.384, 30.4219], + }, + }, +); ``` -**栅格数据类型**** - -#### image - 根据图片的经纬度范围，将图片添加到地图上。 配置项 - --  type: image --  extent: 图像的经纬度范围 [] - -```javascript -layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{ - parser:{ - type:'image', - extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ] - } - }); -``` -  - #### raster -栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项 + +栅格数据类型，主要表示遥感数据类型 data 栅格数据的二维矩阵数据 parser 配置项 - type  raster -- width  数据宽度二维矩阵 columns  +- width  数据宽度二维矩阵 columns - height 数据高度 - min 数据最大值 - max 数据最小值 - extent 经纬度范围 ```javascript - source(values, { - parser: { - type: 'raster', - width: n, - height: m, - min: 0, - max: 8000, - extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ] - } - }); +source(values, { + parser: { + type: 'raster', + width: n, + height: m, + min: 0, + max: 8000, + extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963], + }, +}); ``` - ### transforms -目前支持三种数据处理方法 map，grid，hexagon transform配置项 +目前支持三种数据处理方法 map，grid，hexagon transform 配置项 - type 数据处理类型 --  tansform cfg  数据处理配置项 - +- tansform cfg  数据处理配置项 #### map -数据处理，支持自定义callback函数 + +数据处理，支持自定义 callback 函数 - callback:function 回调函数 ```javascript - layer.source(data, { - 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; - } - } - ] - }); +layer.source(data, { + 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; + }, + }, + ], +}); ``` - #### grid 生成方格网布局，根据数据字段统计，主要在网格热力图中使用 --  type: 'grid', --  size: 网格半径 --  field: 数据统计字段 --  method:聚合方法  count,max,min,sum,mean5个统计维度 +- type: 'grid', +- size: 网格半径 +- field: 数据统计字段 +- method:聚合方法   count,max,min,sum,mean5 个统计维度 ```javascript - layer.source(data, { - transforms:[ - { - type: 'grid', - size: 15000, - field:'v', - method:'sum' - } - ], - }) +layer.source(data, { + transforms: [ + { + type: 'grid', + size: 15000, + field: 'v', + method: 'sum', + }, + ], +}); ``` - #### hexagon + 生成六边形网格布局，根据数据字段统计 --  type: 'hexagon', --  size: 网格半径 --  field: 数据统计字段 --  method:聚合方法  count,max,min,sum,mean5个统计维度 +- type: 'hexagon', +- size: 网格半径 +- field: 数据统计字段 +- method:聚合方法   count,max,min,sum,mean5 个统计维度 ``` - - +``` diff --git a/docs/tutorial/map/amap.en.md b/docs/tutorial/map/amap.en.md index de5aeeca89..d4be7b109d 100644 --- a/docs/tutorial/map/amap.en.md +++ b/docs/tutorial/map/amap.en.md @@ -32,7 +32,7 @@ order: 0 ### 初始化 L7 Scene -``` javascript +```javascript const scene = new L7.Scene({ id: 'map', map: new L7.GaodeMap({ @@ -54,7 +54,7 @@ order: 0 - 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 - 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 -``` javascript +```javascript fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') .then(res => res.json()) diff --git a/docs/tutorial/map/amap.zh.md b/docs/tutorial/map/amap.zh.md index b296c31510..642f045fd2 100644 --- a/docs/tutorial/map/amap.zh.md +++ b/docs/tutorial/map/amap.zh.md @@ -32,7 +32,7 @@ order: 0 ### 初始化 L7 Scene -``` javascript +```javascript const scene = new L7.Scene({ id: 'map', map: new L7.GaodeMap({ @@ -54,7 +54,7 @@ order: 0 - 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 - 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 -``` javascript +```javascript fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') .then(res => res.json()) diff --git a/docs/tutorial/map/mapbox.en.md b/docs/tutorial/map/mapbox.en.md index e347c30ed0..23692ed481 100644 --- a/docs/tutorial/map/mapbox.en.md +++ b/docs/tutorial/map/mapbox.en.md @@ -39,7 +39,8 @@ order: 0 ### 初始化 L7 Scene -``` javascript +```javascript + const scene = new L7.Scene({ id: 'map', map: new L7.Mapbox({ @@ -62,7 +63,7 @@ order: 0 - 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据 - 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。 -``` javascript +```javascript fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') .then(res => res.json()) diff --git a/docs/tutorial/map/mapbox.zh.md b/docs/tutorial/map/mapbox.zh.md index dc107fa131..1f75567a33 100644 --- a/docs/tutorial/map/mapbox.zh.md +++ b/docs/tutorial/map/mapbox.zh.md @@ -39,9 +39,7 @@ order: 0 ### 初始化 L7 Scene -``` javascript - -``` javascript +```javascript const scene = new L7.Scene({ id: 'map', map: new L7.Mapbox({ @@ -63,7 +61,7 @@ order: 0 -``` javascript +```javascript fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') .then(res => res.json()) diff --git a/docs/tutorial/quickstart.en.md b/docs/tutorial/quickstart.en.md index 7a28e57ec5..bf32b302f3 100644 --- a/docs/tutorial/quickstart.en.md +++ b/docs/tutorial/quickstart.en.md @@ -1,5 +1,5 @@ --- -title: 快速上手 +title: QuickStart order: 0 redirect_from: - /en/docs/tutorial diff --git a/examples/gallery/basic/demo/arcCircle.js b/examples/gallery/basic/demo/arcCircle.js index c64c1f1eb5..921a567933 100644 --- a/examples/gallery/basic/demo/arcCircle.js +++ b/examples/gallery/basic/demo/arcCircle.js @@ -6,14 +6,14 @@ const scene = new Scene({ map: new Mapbox({ style: 'dark', pitch: 0, - center: [ 107.77791556935472, 35.443286920228644 ], - zoom: 2.9142882493605033 - }) + center: [107.77791556935472, 35.443286920228644], + zoom: 2.9142882493605033, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { @@ -21,15 +21,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') x: 'lng1', y: 'lat1', x1: 'lng2', - y1: 'lat2' - } + y1: 'lat2', + }, }) .size(1) .shape('arc') .color('#8C1EB2') .style({ opacity: 0.8, - blur: 0.99 + blur: 0.99, }); scene.addLayer(layer); }); diff --git a/examples/gallery/basic/demo/bus_dark.js b/examples/gallery/basic/demo/bus_dark.js index f93a386b80..41fd8f8cb1 100644 --- a/examples/gallery/basic/demo/bus_dark.js +++ b/examples/gallery/basic/demo/bus_dark.js @@ -5,27 +5,27 @@ const scene = new Scene({ id: 'map', map: new Mapbox({ style: 'dark', - center: [ 103.83735604457024, 1.360253881403068 ], + center: [103.83735604457024, 1.360253881403068], pitch: 4.00000000000001, zoom: 10.210275860702593, - rotation: 19.313180925794313 - }) + rotation: 19.313180925794313, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json' + 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { coordinates: 'path', - type: 'json' - } + type: 'json', + }, }) - .size('level', level => { - return [ 1.0, level * 1 ]; + .size('level', (level) => { + return [1.0, level * 1]; }) .shape('line') .color( @@ -40,8 +40,8 @@ fetch( '#DEB8D4', '#F5D4E6', '#FAE4F1', - '#FFF3FC' - ].slice(0, 8) + '#FFF3FC', + ].slice(0, 8), ); scene.addLayer(layer); }); diff --git a/examples/gallery/basic/demo/column_dark.js b/examples/gallery/basic/demo/column_dark.js index b2c3ea49fe..a550b5b294 100644 --- a/examples/gallery/basic/demo/column_dark.js +++ b/examples/gallery/basic/demo/column_dark.js @@ -6,25 +6,25 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 35.210526315789465, style: 'dark', - center: [ 104.288144, 31.239692 ], - zoom: 4.4 - }) + center: [104.288144, 31.239692], + zoom: 4.4, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data.list, { parser: { type: 'json', x: 'j', - y: 'w' - } + y: 'w', + }, }) .shape('cylinder') .size('t', function(level) { - return [ 1, 2, level * 2 + 20 ]; + return [1, 2, level * 2 + 20]; }) .color('t', [ '#094D4A', @@ -36,10 +36,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') '#5FD3A6', '#7BE39E', '#A1EDB8', - '#CEF8D6' + '#CEF8D6', ]) .style({ - opacity: 1.0 + opacity: 1.0, }); scene.addLayer(pointLayer); }); diff --git a/examples/gallery/basic/demo/light.js b/examples/gallery/basic/demo/light.js index bf723d7e05..b38847b1a6 100644 --- a/examples/gallery/basic/demo/light.js +++ b/examples/gallery/basic/demo/light.js @@ -6,40 +6,40 @@ const scene = new Scene({ map: new Mapbox({ style: 'dark', pitch: 43, - center: [ 120.13383079335335, 29.651873105004427 ], - zoom: 7.068989519212174 - }) + center: [120.13383079335335, 29.651873105004427], + zoom: 7.068989519212174, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv' + 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv', ) - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data, { parser: { type: 'csv', x: 'lng', - y: 'lat' + y: 'lat', }, transforms: [ { type: 'hexagon', size: 2500, field: 'v', - method: 'sum' - } - ] + method: 'sum', + }, + ], }) - .size('sum', sum => { + .size('sum', (sum) => { return sum * 200; }) .shape('hexagonColumn') .style({ coverage: 0.8, angle: 0, - opacity: 1.0 + opacity: 1.0, }) .color('sum', [ '#094D4A', @@ -53,7 +53,7 @@ fetch( '#A1EDB8', '#C3F9CC', '#DEFAC0', - '#ECFFB1' + '#ECFFB1', ]); scene.addLayer(layer); }); diff --git a/examples/gallery/basic/demo/normal.js b/examples/gallery/basic/demo/normal.js index efddb8fd1a..54732613e7 100644 --- a/examples/gallery/basic/demo/normal.js +++ b/examples/gallery/basic/demo/normal.js @@ -4,27 +4,27 @@ import { GaodeMap } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new GaodeMap({ - center: [ 121.417463, 31.215175 ], + center: [121.417463, 31.215175], pitch: 0, - zoom: 11 - }) + zoom: 11, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt') - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'csv', y: 'lat', - x: 'lng' - } + x: 'lng', + }, }) .size(0.5) .color('#080298') .style({ - opacity: 1 + opacity: 1, }); scene.addLayer(pointLayer); diff --git a/examples/gallery/basic/demo/point.js b/examples/gallery/basic/demo/point.js index f7943a9cc1..3a4fb6cefa 100644 --- a/examples/gallery/basic/demo/point.js +++ b/examples/gallery/basic/demo/point.js @@ -6,16 +6,16 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 64.88, style: 'dark', - center: [ 114.060288, 22.53684 ], - zoom: 15.63 - }) + center: [114.060288, 22.53684], + zoom: 15.63, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json' + 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data) .size(2) @@ -29,10 +29,10 @@ fetch( '#83CED6', '#A6E1E0', '#B8EFE2', - '#D7F9F0' + '#D7F9F0', ]) .style({ - opacity: 1 + opacity: 1, }); scene.addLayer(pointLayer); diff --git a/examples/heatmap/grid/demo/china.js b/examples/heatmap/grid/demo/china.js index 91b2dcccd2..f2e36fa848 100644 --- a/examples/heatmap/grid/demo/china.js +++ b/examples/heatmap/grid/demo/china.js @@ -6,39 +6,39 @@ const scene = new Scene({ map: new GaodeMap({ style: 'light', pitch: 0, - center: [ 107.054293, 35.246265 ], - zoom: 4.056 - }) + center: [107.054293, 35.246265], + zoom: 4.056, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' + 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', ) - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data, { parser: { type: 'csv', x: 'lng', - y: 'lat' + y: 'lat', }, transforms: [ { type: 'grid', size: 20000, field: 'v', - method: 'sum' - } - ] + method: 'sum', + }, + ], }) - .size('count', value => { + .size('count', (value) => { return value * 0; }) .shape('square') .style({ coverage: 1, - angle: 0 + angle: 0, }) .color( 'count', @@ -56,8 +56,8 @@ fetch( '#30C7C4', '#6BD5A0', '#A7ECB2', - '#D0F4CA' - ].reverse() + '#D0F4CA', + ].reverse(), ); scene.addLayer(layer); diff --git a/examples/heatmap/grid/demo/grid1.js b/examples/heatmap/grid/demo/grid1.js index 714214f22e..c0eb85163f 100644 --- a/examples/heatmap/grid/demo/grid1.js +++ b/examples/heatmap/grid/demo/grid1.js @@ -6,39 +6,39 @@ const scene = new Scene({ map: new GaodeMap({ style: 'dark', pitch: 0, - center: [ 110.097892, 33.853662 ], - zoom: 4.056 - }) + center: [110.097892, 33.853662], + zoom: 4.056, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' + 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', ) - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data, { parser: { type: 'csv', x: 'lng', - y: 'lat' + y: 'lat', }, transforms: [ { type: 'grid', size: 10000, field: 'v', - method: 'sum' - } - ] + method: 'sum', + }, + ], }) - .size('count', value => { + .size('count', (value) => { return value * 0; }) .shape('square') .style({ coverage: 1, - angle: 0 + angle: 0, }) .color( 'count', @@ -48,8 +48,8 @@ fetch( '#FFF598', '#FF40F3', '#9415FF', - '#421EB2' - ].reverse() + '#421EB2', + ].reverse(), ); scene.addLayer(layer); }); diff --git a/examples/heatmap/grid/demo/heatmap3.js b/examples/heatmap/grid/demo/heatmap3.js index 53dda2e450..86b3a1eb59 100644 --- a/examples/heatmap/grid/demo/heatmap3.js +++ b/examples/heatmap/grid/demo/heatmap3.js @@ -6,39 +6,39 @@ const scene = new Scene({ map: new GaodeMap({ style: 'light', pitch: 0, - center: [ 110.097892, 33.853662 ], - zoom: 4.056 - }) + center: [110.097892, 33.853662], + zoom: 4.056, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' + 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', ) - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data, { parser: { type: 'csv', x: 'lng', - y: 'lat' + y: 'lat', }, transforms: [ { type: 'grid', size: 20000, field: 'v', - method: 'sum' - } - ] + method: 'sum', + }, + ], }) - .size('count', value => { + .size('count', (value) => { return value * 0; }) .shape('circle') .style({ coverage: 0.9, - angle: 0 + angle: 0, }) .color( 'count', @@ -54,8 +54,8 @@ fetch( '#F77B00', '#ED9909', '#ECC357', - '#EDE59C' - ].reverse() + '#EDE59C', + ].reverse(), ); scene.addLayer(layer); }); diff --git a/examples/heatmap/grid/demo/world.js b/examples/heatmap/grid/demo/world.js index 116fbed6f9..e4bf6bda4f 100644 --- a/examples/heatmap/grid/demo/world.js +++ b/examples/heatmap/grid/demo/world.js @@ -6,39 +6,39 @@ const scene = new Scene({ map: new GaodeMap({ style: 'dark', pitch: 0, - center: [ 110.097892, 33.853662 ], - zoom: 4.056 - }) + center: [110.097892, 33.853662], + zoom: 4.056, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' + 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', ) - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data, { parser: { type: 'csv', x: 'lng', - y: 'lat' + y: 'lat', }, transforms: [ { type: 'grid', size: 10000, field: 'v', - method: 'sum' - } - ] + method: 'sum', + }, + ], }) - .size('count', value => { + .size('count', (value) => { return value * 0; }) .shape('square') .style({ coverage: 1, - angle: 0 + angle: 0, }) .color( 'count', @@ -50,8 +50,8 @@ fetch( '#46F3FF', '#02BEFF', '#1A7AFF', - '#0A1FB2' - ].reverse() + '#0A1FB2', + ].reverse(), ); scene.addLayer(layer); }); diff --git a/examples/heatmap/heatmap/demo/heatmap.js b/examples/heatmap/heatmap/demo/heatmap.js index 495b42778b..3a61c05211 100644 --- a/examples/heatmap/heatmap/demo/heatmap.js +++ b/examples/heatmap/heatmap/demo/heatmap.js @@ -6,20 +6,20 @@ const scene = new Scene({ map: new Mapbox({ style: 'dark', pitch: 0, - center: [ 127.5671666579043, 7.445038892195569 ], - zoom: 2.632456779444394 - }) + center: [127.5671666579043, 7.445038892195569], + zoom: 2.632456779444394, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json' + 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data) .shape('heatmap') - .size('mag', [ 0, 1.0 ]) // weight映射通道 + .size('mag', [0, 1.0]) // weight映射通道 .style({ intensity: 2, radius: 20, @@ -31,10 +31,10 @@ fetch( '#FFF598', '#91EABC', '#2EA9A1', - '#206C7C' + '#206C7C', ].reverse(), - positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] - } + positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], + }, }); scene.addLayer(layer); }); diff --git a/examples/heatmap/heatmap/demo/heatmap3d.js b/examples/heatmap/heatmap/demo/heatmap3d.js index 52334e0ab4..1ef0226c61 100644 --- a/examples/heatmap/heatmap/demo/heatmap3d.js +++ b/examples/heatmap/heatmap/demo/heatmap3d.js @@ -6,20 +6,20 @@ const scene = new Scene({ map: new Mapbox({ style: 'dark', pitch: 58.5, - center: [ 111.8759, 30.6942 ], + center: [111.8759, 30.6942], rotation: 0.519, - zoom: 3.6116 - }) + zoom: 3.6116, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json' + 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data) - .size('capacity', [ 0, 1 ]) + .size('capacity', [0, 1]) .shape('heatmap3D') // weight映射通道 .style({ @@ -33,10 +33,10 @@ fetch( '#DAF291', '#FFD591', '#FF7A45', - '#CF1D49' + '#CF1D49', ], - positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] - } + positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], + }, }); scene.addLayer(layer); }); diff --git a/examples/heatmap/heatmap/demo/heatmap_purple.js b/examples/heatmap/heatmap/demo/heatmap_purple.js index cd4382a48d..d53a8591fc 100644 --- a/examples/heatmap/heatmap/demo/heatmap_purple.js +++ b/examples/heatmap/heatmap/demo/heatmap_purple.js @@ -6,20 +6,20 @@ const scene = new Scene({ map: new Mapbox({ style: 'dark', pitch: 0, - center: [ 127.5671666579043, 7.445038892195569 ], - zoom: 2.632456779444394 - }) + center: [127.5671666579043, 7.445038892195569], + zoom: 2.632456779444394, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json' + 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data) .shape('heatmap') - .size('mag', [ 0, 1.0 ]) // weight映射通道 + .size('mag', [0, 1.0]) // weight映射通道 .style({ intensity: 2, radius: 20, @@ -31,10 +31,10 @@ fetch( '#FFF598', '#F27DEB', '#8C1EB2', - '#421EB2' + '#421EB2', ].reverse(), - positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] - } + positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0], + }, }); scene.addLayer(layer); }); diff --git a/examples/heatmap/hexagon/demo/china.js b/examples/heatmap/hexagon/demo/china.js index 3074425609..c35cde14bb 100644 --- a/examples/heatmap/hexagon/demo/china.js +++ b/examples/heatmap/hexagon/demo/china.js @@ -6,33 +6,33 @@ const scene = new Scene({ map: new Mapbox({ style: 'dark', pitch: 47.49999999999995, - center: [ 112.50447776627743, 30.830476390931125 ], - zoom: 3.9879693680088626 - }) + center: [112.50447776627743, 30.830476390931125], + zoom: 3.9879693680088626, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv' + 'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', ) - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data, { parser: { type: 'csv', x: 'lng', - y: 'lat' + y: 'lat', }, transforms: [ { type: 'hexagon', size: 17000, field: 'v', - method: 'sum' - } - ] + method: 'sum', + }, + ], }) - .size('sum', value => { + .size('sum', (value) => { return value * 20; }) .shape('hexagonColumn') @@ -44,12 +44,12 @@ fetch( '#FFF598', '#FF40F3', '#9415FF', - '#421EB2' - ].reverse() + '#421EB2', + ].reverse(), ) .style({ coverage: 0.9, - angle: 0 + angle: 0, }); scene.addLayer(layer); diff --git a/examples/heatmap/hexagon/demo/hexagon.js b/examples/heatmap/hexagon/demo/hexagon.js index d68e931e25..3735114dd9 100644 --- a/examples/heatmap/hexagon/demo/hexagon.js +++ b/examples/heatmap/hexagon/demo/hexagon.js @@ -6,17 +6,17 @@ const scene = new Scene({ map: new Mapbox({ style: 'light', pitch: 56.499, - center: [ 114.07737552216226, 22.542656745583486 ], + center: [114.07737552216226, 22.542656745583486], rotation: 39.19, - zoom: 12.47985 - }) + zoom: 12.47985, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json' + 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data, { transforms: [ @@ -24,16 +24,16 @@ fetch( type: 'hexagon', size: 100, field: 'h12', - method: 'sum' - } - ] + method: 'sum', + }, + ], }) - .size('sum', [ 0, 600 ]) + .size('sum', [0, 600]) .shape('hexagonColumn') .style({ coverage: 0.8, angle: 0, - opacity: 1.0 + opacity: 1.0, }) .color( 'sum', @@ -47,8 +47,8 @@ fetch( '#5FD3A6', '#7BE39E', '#A1EDB8', - '#CEF8D6' - ].reverse() + '#CEF8D6', + ].reverse(), ); scene.addLayer(layer); }); diff --git a/examples/heatmap/hexagon/demo/light.js b/examples/heatmap/hexagon/demo/light.js index bf723d7e05..b38847b1a6 100644 --- a/examples/heatmap/hexagon/demo/light.js +++ b/examples/heatmap/hexagon/demo/light.js @@ -6,40 +6,40 @@ const scene = new Scene({ map: new Mapbox({ style: 'dark', pitch: 43, - center: [ 120.13383079335335, 29.651873105004427 ], - zoom: 7.068989519212174 - }) + center: [120.13383079335335, 29.651873105004427], + zoom: 7.068989519212174, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv' + 'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv', ) - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data, { parser: { type: 'csv', x: 'lng', - y: 'lat' + y: 'lat', }, transforms: [ { type: 'hexagon', size: 2500, field: 'v', - method: 'sum' - } - ] + method: 'sum', + }, + ], }) - .size('sum', sum => { + .size('sum', (sum) => { return sum * 200; }) .shape('hexagonColumn') .style({ coverage: 0.8, angle: 0, - opacity: 1.0 + opacity: 1.0, }) .color('sum', [ '#094D4A', @@ -53,7 +53,7 @@ fetch( '#A1EDB8', '#C3F9CC', '#DEFAC0', - '#ECFFB1' + '#ECFFB1', ]); scene.addLayer(layer); }); diff --git a/examples/heatmap/hexagon/demo/world.js b/examples/heatmap/hexagon/demo/world.js index 261e44893c..5173eb3a02 100644 --- a/examples/heatmap/hexagon/demo/world.js +++ b/examples/heatmap/hexagon/demo/world.js @@ -6,16 +6,16 @@ const scene = new Scene({ map: new GaodeMap({ style: 'light', pitch: 0, - center: [ 104.995156, 31.450658 ], - zoom: 3.79 - }) + center: [104.995156, 31.450658], + zoom: 3.79, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json' + 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new HeatmapLayer({}) .source(data, { transforms: [ @@ -23,18 +23,18 @@ fetch( type: 'hexagon', size: 90000, field: 'capacity', - method: 'sum' - } - ] + method: 'sum', + }, + ], }) - .size('sum', value => { + .size('sum', (value) => { return value * 50; }) .shape('hexagon') .style({ coverage: 0.9, angle: 0, - opacity: 1.0 + opacity: 1.0, }) .color( 'sum', @@ -50,8 +50,8 @@ fetch( '#0F62FF', '#30B2E9', '#30B2E9', - '#40C4CE' - ].reverse() + '#40C4CE', + ].reverse(), ); scene.addLayer(layer); }); diff --git a/examples/line/arc/demo/arc.js b/examples/line/arc/demo/arc.js index d58d92b78f..c250f4666f 100644 --- a/examples/line/arc/demo/arc.js +++ b/examples/line/arc/demo/arc.js @@ -6,36 +6,36 @@ const scene = new Scene({ map: new Mapbox({ pitch: 0, style: 'dark', - center: [ 0, 23.107329 ], - zoom: 0 - }) + center: [0, 23.107329], + zoom: 0, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json' + 'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { function getAirportCoord(idx) { - return [ data.airports[idx][3], data.airports[idx][4] ]; + return [data.airports[idx][3], data.airports[idx][4]]; } const routes = data.routes.map(function(airline) { return { - coord: [ getAirportCoord(airline[1]), getAirportCoord(airline[2]) ] + coord: [getAirportCoord(airline[1]), getAirportCoord(airline[2])], }; }); const layer = new LineLayer({}) .source(routes, { parser: { type: 'json', - coordinates: 'coord' - } + coordinates: 'coord', + }, }) .size(0.6) .shape('arc') .color('rgb(5, 5, 50)') .style({ - opacity: 0.05 + opacity: 0.05, }); scene.addLayer(layer); }); diff --git a/examples/line/arc/demo/arcCircle.js b/examples/line/arc/demo/arcCircle.js index 3fb1f37441..0df570b8f5 100644 --- a/examples/line/arc/demo/arcCircle.js +++ b/examples/line/arc/demo/arcCircle.js @@ -6,13 +6,13 @@ const scene = new Scene({ map: new Mapbox({ pitch: 0, style: 'dark', - center: [ 107.77791556935472, 35.443286920228644 ], - zoom: 2.9142882493605033 - }) + center: [107.77791556935472, 35.443286920228644], + zoom: 2.9142882493605033, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { @@ -20,15 +20,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') x: 'lng1', y: 'lat1', x1: 'lng2', - y1: 'lat2' - } + y1: 'lat2', + }, }) .size(1) .shape('greatcircle') .color('#8C1EB2') .style({ opacity: 0.8, - blur: 0.99 + blur: 0.99, }); scene.addLayer(layer); }); diff --git a/examples/line/arc/demo/trip_arc.js b/examples/line/arc/demo/trip_arc.js index 735d15076e..e8f3cc5334 100644 --- a/examples/line/arc/demo/trip_arc.js +++ b/examples/line/arc/demo/trip_arc.js @@ -7,15 +7,15 @@ const scene = new Scene({ pitch: 60, type: 'mapbox', style: 'light', - center: [ -74.06967, 40.720399 ], - zoom: 12.45977 - }) + center: [-74.06967, 40.720399], + zoom: 12.45977, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv' + 'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv', ) - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { @@ -23,15 +23,15 @@ fetch( x: 'start station longitude', y: 'start station latitude', x1: 'end station longitude', - y1: 'end station latitude' - } + y1: 'end station latitude', + }, }) .size(1) .shape('arc3d') .color('#0C47BF') .style({ opacity: 1, - blur: 0.9 + blur: 0.9, }); scene.addLayer(layer); }); diff --git a/examples/line/arc/demo/trip_arc_dark.js b/examples/line/arc/demo/trip_arc_dark.js index 5a2f7d20e8..597e7b9a03 100644 --- a/examples/line/arc/demo/trip_arc_dark.js +++ b/examples/line/arc/demo/trip_arc_dark.js @@ -6,15 +6,15 @@ const scene = new Scene({ map: new Mapbox({ pitch: 60, style: 'dark', - center: [ 104.34278, 41.12554 ], + center: [104.34278, 41.12554], zoom: 2.94888, - rotation: 42.3999 - }) + rotation: 42.3999, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { @@ -22,14 +22,14 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') x: 'lng1', y: 'lat1', x1: 'lng2', - y1: 'lat2' - } + y1: 'lat2', + }, }) .size(1) .shape('arc3d') .color('#FF7C6A') .style({ - opacity: 0.8 + opacity: 0.8, }); scene.addLayer(layer); }); diff --git a/examples/line/isoline/demo/ele.js b/examples/line/isoline/demo/ele.js index bced2a4d0b..32919baff6 100644 --- a/examples/line/isoline/demo/ele.js +++ b/examples/line/isoline/demo/ele.js @@ -6,22 +6,22 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 53.6305, style: 'light', - center: [ 102.600579, 23.114887 ], - zoom: 14.66 - }) + center: [102.600579, 23.114887], + zoom: 14.66, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new LineLayer({}) .source(data) - .size('ELEV', h => { - return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ]; + .size('ELEV', (h) => { + return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20]; }) .shape('line') .scale('ELEV', { - type: 'quantize' + type: 'quantize', }) .color( 'ELEV', @@ -35,8 +35,8 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') '#C8D7F5', '#A5C1FC', '#7FA7F9', - '#5F8AE5' - ].reverse() + '#5F8AE5', + ].reverse(), ); scene.addLayer(layer); }); diff --git a/examples/line/isoline/demo/ele_dark.js b/examples/line/isoline/demo/ele_dark.js index e1381edb7d..92f6248663 100644 --- a/examples/line/isoline/demo/ele_dark.js +++ b/examples/line/isoline/demo/ele_dark.js @@ -6,22 +6,22 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 26.842105263157915, style: 'dark', - center: [ 102.599436, 23.116371 ], - zoom: 14.78 - }) + center: [102.599436, 23.116371], + zoom: 14.78, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new LineLayer({}) .source(data) - .size('ELEV', h => { - return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ]; + .size('ELEV', (h) => { + return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20]; }) .shape('line') .scale('ELEV', { - type: 'quantize' + type: 'quantize', }) .color('ELEV', [ '#094D4A', @@ -33,7 +33,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') '#5FD3A6', '#7BE39E', '#A1EDB8', - '#CEF8D6' + '#CEF8D6', ]); scene.addLayer(layer); }); diff --git a/examples/line/isoline/demo/isoline.js b/examples/line/isoline/demo/isoline.js index feebbd0066..4cb12e54da 100644 --- a/examples/line/isoline/demo/isoline.js +++ b/examples/line/isoline/demo/isoline.js @@ -6,22 +6,22 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 0, style: 'light', - center: [ 104.117492, 36.492696 ], - zoom: 3.89 - }) + center: [104.117492, 36.492696], + zoom: 3.89, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json' + 'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new LineLayer({}) .source(data) .scale('value', { - type: 'quantile' + type: 'quantile', }) - .size('value', [ 0.5, 1, 1.5, 2 ]) + .size('value', [0.5, 1, 1.5, 2]) .shape('line') .color( 'value', @@ -35,8 +35,8 @@ fetch( '#83CED6', '#A6E1E0', '#B8EFE2', - '#D7F9F0' - ].reverse() + '#D7F9F0', + ].reverse(), ); scene.addLayer(layer); }); diff --git a/examples/line/line/demo/isoline.js b/examples/line/line/demo/isoline.js index feebbd0066..4cb12e54da 100644 --- a/examples/line/line/demo/isoline.js +++ b/examples/line/line/demo/isoline.js @@ -6,22 +6,22 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 0, style: 'light', - center: [ 104.117492, 36.492696 ], - zoom: 3.89 - }) + center: [104.117492, 36.492696], + zoom: 3.89, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json' + 'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new LineLayer({}) .source(data) .scale('value', { - type: 'quantile' + type: 'quantile', }) - .size('value', [ 0.5, 1, 1.5, 2 ]) + .size('value', [0.5, 1, 1.5, 2]) .shape('line') .color( 'value', @@ -35,8 +35,8 @@ fetch( '#83CED6', '#A6E1E0', '#B8EFE2', - '#D7F9F0' - ].reverse() + '#D7F9F0', + ].reverse(), ); scene.addLayer(layer); }); diff --git a/examples/line/path/demo/bus_dark.js b/examples/line/path/demo/bus_dark.js index 95b40e2686..636ff7697c 100644 --- a/examples/line/path/demo/bus_dark.js +++ b/examples/line/path/demo/bus_dark.js @@ -4,28 +4,28 @@ import { Mapbox } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new Mapbox({ - center: [ 103.83735, 1.3602538 ], + center: [103.83735, 1.3602538], pitch: 4.00000000000001, zoom: 10.210275860702593, rotation: 19.313180925794313, - style: 'dark' - }) + style: 'dark', + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json' + 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { type: 'json', - coordinates: 'path' - } + coordinates: 'path', + }, }) - .size('level', level => { - return [ 0.8, level * 1 ]; + .size('level', (level) => { + return [0.8, level * 1]; }) .shape('line') .color( @@ -40,8 +40,8 @@ fetch( '#DEB8D4', '#F5D4E6', '#FAE4F1', - '#FFF3FC' - ].slice(0, 8) + '#FFF3FC', + ].slice(0, 8), ); scene.addLayer(layer); }); diff --git a/examples/line/path/demo/bus_light.js b/examples/line/path/demo/bus_light.js index 693331944f..eb3f19c5d3 100644 --- a/examples/line/path/demo/bus_light.js +++ b/examples/line/path/demo/bus_light.js @@ -4,28 +4,28 @@ import { Mapbox } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new Mapbox({ - center: [ 103.83735604457024, 1.360253881403068 ], + center: [103.83735604457024, 1.360253881403068], pitch: 4.00000000000001, zoom: 10.210275860702593, rotation: 19.313180925794313, - style: 'light' - }) + style: 'light', + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json' + 'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new LineLayer({}) .source(data, { parser: { type: 'json', - coordinates: 'path' - } + coordinates: 'path', + }, }) - .size('level', level => { - return [ 0.8, level * 1 ]; + .size('level', (level) => { + return [0.8, level * 1]; }) .shape('line') .color( @@ -40,10 +40,10 @@ fetch( '#83CED6', '#A6E1E0', '#B8EFE2', - '#D7F9F0' + '#D7F9F0', ] .reverse() - .slice(0, 8) + .slice(0, 8), ); scene.addLayer(layer); }); diff --git a/examples/line/path/demo/road_dark.js b/examples/line/path/demo/road_dark.js index 0fc137a7d6..c43fde609a 100644 --- a/examples/line/path/demo/road_dark.js +++ b/examples/line/path/demo/road_dark.js @@ -4,23 +4,23 @@ import { Mapbox } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new Mapbox({ - center: [ 116.3956, 39.9392 ], + center: [116.3956, 39.9392], pitch: 0, zoom: 10, rotation: 0, - style: 'dark' - }) + style: 'dark', + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json' + 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new LineLayer({}) .source(data) .size(1.5) .shape('line') - .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]); + .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16']); scene.addLayer(layer); }); diff --git a/examples/line/path/demo/road_light.js b/examples/line/path/demo/road_light.js index 4acf0bfea1..4e7e423eea 100644 --- a/examples/line/path/demo/road_light.js +++ b/examples/line/path/demo/road_light.js @@ -4,23 +4,23 @@ import { Mapbox } from '@antv/l7-maps'; const scene = new Scene({ id: 'map', map: new Mapbox({ - center: [ 116.3956, 39.9392 ], + center: [116.3956, 39.9392], pitch: 0, zoom: 10, rotation: 0, - style: 'light' - }) + style: 'light', + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json' + 'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new LineLayer({}) .source(data) .size(1.5) .shape('line') - .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]); + .color('标准名称', ['#5B8FF9', '#5CCEA1', '#5D7092']); scene.addLayer(layer); }); diff --git a/examples/point/bubble/demo/color.js b/examples/point/bubble/demo/color.js index 47b8b8fa83..09330c4b32 100644 --- a/examples/point/bubble/demo/color.js +++ b/examples/point/bubble/demo/color.js @@ -6,23 +6,23 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 0, style: 'light', - center: [ 121.435159, 31.256971 ], + center: [121.435159, 31.256971], zoom: 14.89, - minZoom: 10 - }) + minZoom: 10, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'json', x: 'longitude', - y: 'latitude' - } + y: 'latitude', + }, }) .shape('name', [ 'circle', @@ -33,13 +33,13 @@ fetch( 'octogon', 'hexagram', 'rhombus', - 'vesica' + 'vesica', ]) - .size('unit_price', [ 10, 25 ]) - .color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ]) + .size('unit_price', [10, 25]) + .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452']) .style({ opacity: 0.3, - strokeWidth: 2 + strokeWidth: 2, }); scene.addLayer(pointLayer); diff --git a/examples/point/bubble/demo/point.js b/examples/point/bubble/demo/point.js index e167950498..5b0360dcda 100644 --- a/examples/point/bubble/demo/point.js +++ b/examples/point/bubble/demo/point.js @@ -7,27 +7,27 @@ const scene = new Scene({ pitch: 0, type: 'amap', style: 'light', - center: [ 140.067171, 36.26186 ], + center: [140.067171, 36.26186], zoom: 5.32, - maxZoom: 10 - }) + maxZoom: 10, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json' + 'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data) .shape('circle') - .size('mag', [ 1, 25 ]) - .color('mag', mag => { + .size('mag', [1, 25]) + .color('mag', (mag) => { return mag > 4.5 ? '#5B8FF9' : '#5CCEA1'; }) .style({ opacity: 0.3, - strokeWidth: 1 + strokeWidth: 1, }); scene.addLayer(pointLayer); diff --git a/examples/point/bubble/demo/scatter.js b/examples/point/bubble/demo/scatter.js index f09afbfdce..2244914ea7 100644 --- a/examples/point/bubble/demo/scatter.js +++ b/examples/point/bubble/demo/scatter.js @@ -5,24 +5,24 @@ const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', - center: [ -121.24357, 37.58264 ], + center: [-121.24357, 37.58264], pitch: 0, - zoom: 6.45 - }) + zoom: 6.45, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv' + 'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv', ) - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'csv', x: 'Longitude', - y: 'Latitude' - } + y: 'Latitude', + }, }) .shape('circle') .size(4) @@ -36,11 +36,11 @@ fetch( '#83CED6', '#A6E1E0', '#B8EFE2', - '#D7F9F0' + '#D7F9F0', ]) .style({ opacity: 0.5, - strokeWidth: 0 + strokeWidth: 0, }); scene.addLayer(pointLayer); diff --git a/examples/point/bubble/demo/world.js b/examples/point/bubble/demo/world.js index b30c794a67..e57f94aa66 100644 --- a/examples/point/bubble/demo/world.js +++ b/examples/point/bubble/demo/world.js @@ -6,34 +6,34 @@ const scene = new Scene({ map: new Mapbox({ pitch: 0, style: 'dark', - center: [ 96.99215001469588, 29.281597225674773 ], + center: [96.99215001469588, 29.281597225674773], zoom: 2.194613775109773, - maxZoom: 10 - }) + maxZoom: 10, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json' + 'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json', ) - .then(res => res.json()) - .then(data => { - data.features = data.features.filter(item => { + .then((res) => res.json()) + .then((data) => { + data.features = data.features.filter((item) => { return item.properties.capacity > 800; }); const pointLayer = new PointLayer({}) .source(data) .shape('circle') - .size('capacity', [ 0, 16 ]) + .size('capacity', [0, 16]) .color('capacity', [ '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', - '#CEF8D6' + '#CEF8D6', ]) .style({ opacity: 0.5, - strokeWidth: 0 + strokeWidth: 0, }); scene.addLayer(pointLayer); diff --git a/examples/point/chart/demo/bar.js b/examples/point/chart/demo/bar.js index 3bca7f7451..fae3103fc3 100644 --- a/examples/point/chart/demo/bar.js +++ b/examples/point/chart/demo/bar.js @@ -6,21 +6,20 @@ const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', - center: [ 2.6125016864608597, 49.359131 ], + center: [2.6125016864608597, 49.359131], pitch: 0, - zoom: 4.19 - }) + zoom: 4.19, + }), }); addChart(); scene.render(); - function addChart() { fetch( - 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json' + 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { data.nodes.forEach(function(item) { const el = document.createElement('div'); const total = @@ -34,18 +33,18 @@ function addChart() { { item: 'Agriculture', count: item.gdp.Agriculture, - percent: item.gdp.Agriculture / total + percent: item.gdp.Agriculture / total, }, { item: 'Industry', count: item.gdp.Industry, - percent: item.gdp.Industry / total + percent: item.gdp.Industry / total, }, { item: 'Service', count: item.gdp.Service, - percent: item.gdp.Service / total - } + percent: item.gdp.Service / total, + }, ]; const chart = new G2.Chart({ @@ -53,27 +52,26 @@ function addChart() { width: size, height: size, render: 'svg', - padding: 0 + padding: 0, }); chart.legend(false); chart.source(itemData); chart.tooltip(false); chart.axis('count', { - grid: false + grid: false, }); chart .interval() .position('item*count') - .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ]) + .color('item', ['#5CCEA1', '#5D7092', '#5B8FF9']) .opacity(1); chart.render(); const marker = new Marker({ - element: el - }) - .setLnglat({ - lng: item.coordinates[0], - lat: item.coordinates[1] - }); + element: el, + }).setLnglat({ + lng: item.coordinates[0], + lat: item.coordinates[1], + }); scene.addMarker(marker); }); }); diff --git a/examples/point/chart/demo/chart.js b/examples/point/chart/demo/chart.js index 4cd14788b1..410279b182 100644 --- a/examples/point/chart/demo/chart.js +++ b/examples/point/chart/demo/chart.js @@ -6,20 +6,20 @@ const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', - center: [ 2.6125016864608597, 49.359131 ], + center: [2.6125016864608597, 49.359131], pitch: 0, - zoom: 4.19 - }) + zoom: 4.19, + }), }); addChart(); scene.render(); function addChart() { fetch( - 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json' + 'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { data.nodes.forEach(function(item) { const el = document.createElement('div'); const total = @@ -33,18 +33,18 @@ function addChart() { { item: 'Agriculture', count: item.gdp.Agriculture, - percent: item.gdp.Agriculture / total + percent: item.gdp.Agriculture / total, }, { item: 'Industry', count: item.gdp.Industry, - percent: item.gdp.Industry / total + percent: item.gdp.Industry / total, }, { item: 'Service', count: item.gdp.Service, - percent: item.gdp.Service / total - } + percent: item.gdp.Service / total, + }, ]; const sliceNumber = 0.02; @@ -54,19 +54,19 @@ function addChart() { draw: function draw(cfg, container) { const points = cfg.points; let path = []; - path.push([ 'M', points[0].x, points[0].y ]); - path.push([ 'L', points[1].x, points[1].y - sliceNumber ]); - path.push([ 'L', points[2].x, points[2].y - sliceNumber ]); - path.push([ 'L', points[3].x, points[3].y ]); + path.push(['M', points[0].x, points[0].y]); + path.push(['L', points[1].x, points[1].y - sliceNumber]); + path.push(['L', points[2].x, points[2].y - sliceNumber]); + path.push(['L', points[3].x, points[3].y]); path.push('Z'); path = this.parsePath(path); return container.addShape('path', { attrs: { fill: cfg.color, - path - } + path, + }, }); - } + }, }); const chart = new G2.Chart({ @@ -74,27 +74,26 @@ function addChart() { width: size, height: size, render: 'svg', - padding: 0 + padding: 0, }); chart.legend(false); chart.source(itemData); chart.coord('theta', { - innerRadius: 0.6 + innerRadius: 0.6, }); chart.tooltip(false); chart .intervalStack() .position('percent') - .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ]) + .color('item', ['#5CCEA1', '#5D7092', '#5B8FF9']) .shape('sliceShape'); chart.render(); const marker = new Marker({ - element: el - }) - .setLnglat({ - lng: item.coordinates[0], - lat: item.coordinates[1] - }); + element: el, + }).setLnglat({ + lng: item.coordinates[0], + lat: item.coordinates[1], + }); scene.addMarker(marker); }); }); diff --git a/examples/point/chart/demo/ring.js b/examples/point/chart/demo/ring.js index 51a59854b8..ba3511f77b 100644 --- a/examples/point/chart/demo/ring.js +++ b/examples/point/chart/demo/ring.js @@ -40,70 +40,71 @@ const scene = new Scene({ map: new Mapbox({ pitch: 0, style: 'dark', - center: [ 52.21496184144132, 24.121126851768906 ], - zoom: 3.802 - }) + center: [52.21496184144132, 24.121126851768906], + zoom: 3.802, + }), }); Promise.all([ fetch( - 'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json' - ).then(d => d.json()), + 'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json', + ).then((d) => d.json()), fetch( - 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json' - ).then(d => d.json()) -]).then(function onLoad([ center, population ]) { + 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json', + ).then((d) => d.json()), +]).then(function onLoad([center, population]) { const popobj = {}; - population.forEach(element => { + population.forEach((element) => { popobj[element.Code] = element['Population, female (% of total) (% of total)']; }); // 数据绑定 - center.features = center.features.map(fe => { + center.features = center.features.map((fe) => { fe.properties.female = popobj[fe.properties.id] * 1 || 0; return fe; }); - center.features.forEach(point => { + center.features.forEach((point) => { const el = document.createElement('div'); const coord = point.geometry.coordinates; const v = point.properties.female * 1; - if (v < 1 || (v > 46 && v < 54)) { return; } + if (v < 1 || (v > 46 && v < 54)) { + return; + } const size = 60; const data = [ { type: '男性', - value: 100.0 - v.toFixed(2) + value: 100.0 - v.toFixed(2), }, { type: '女性', - value: v.toFixed(2) * 1 - } + value: v.toFixed(2) * 1, + }, ]; const chart = new G2.Chart({ container: el, width: size, height: size, render: 'svg', - padding: 0 + padding: 0, }); chart.source(data); chart.legend(false); chart.tooltip(false); chart.coord('theta', { radius: 0.9, - innerRadius: 0.6 + innerRadius: 0.6, }); chart .intervalStack() .position('value') - .color('type', [ '#5CCEA1', '#5B8FF9' ]) + .color('type', ['#5CCEA1', '#5B8FF9']) .opacity(1); chart.render(); - const marker = new Marker({ element: el }) - .setLnglat({ - lng: coord[0], - lat: coord[1] - }); + const marker = new Marker({ element: el }).setLnglat({ + lng: coord[0], + lat: coord[1], + }); scene.addMarker(marker); }); }); diff --git a/examples/point/column/demo/clumn_shape.js b/examples/point/column/demo/clumn_shape.js index a0d134a043..0e00aab966 100644 --- a/examples/point/column/demo/clumn_shape.js +++ b/examples/point/column/demo/clumn_shape.js @@ -6,37 +6,37 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 66.02383, style: 'dark', - center: [ 121.400257, 31.25287 ], + center: [121.400257, 31.25287], zoom: 14.55, - rotation: 134.9507 - }) + rotation: 134.9507, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'json', x: 'longitude', - y: 'latitude' - } + y: 'latitude', + }, }) .shape('name', [ 'cylinder', 'triangleColumn', 'hexagonColumn', - 'squareColumn' + 'squareColumn', ]) - .size('unit_price', h => { - return [ 6, 6, h / 500 ]; + .size('unit_price', (h) => { + return [6, 6, h / 500]; }) - .color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ]) + .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F']) .style({ - opacity: 1.0 + opacity: 1.0, }); scene.addLayer(pointLayer); diff --git a/examples/point/column/demo/clumn_shape_light.js b/examples/point/column/demo/clumn_shape_light.js index c3ad3a2cb0..8559ff008c 100644 --- a/examples/point/column/demo/clumn_shape_light.js +++ b/examples/point/column/demo/clumn_shape_light.js @@ -6,37 +6,37 @@ const scene = new Scene({ map: new Mapbox({ pitch: 60, style: 'light', - center: [ 121.412224, 31.26192438 ], + center: [121.412224, 31.26192438], zoom: 13.13438, - rotation: 35.97133 - }) + rotation: 35.97133, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'json', x: 'longitude', - y: 'latitude' - } + y: 'latitude', + }, }) .shape('name', [ 'cylinder', 'triangleColumn', 'hexagonColumn', - 'squareColumn' + 'squareColumn', ]) - .size('unit_price', h => { - return [ 6, 6, h / 500 ]; + .size('unit_price', (h) => { + return [6, 6, h / 500]; }) - .color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ]) + .color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A']) .style({ - opacity: 1.0 + opacity: 1.0, }); scene.addLayer(pointLayer); diff --git a/examples/point/column/demo/column_dark.js b/examples/point/column/demo/column_dark.js index b2c3ea49fe..a550b5b294 100644 --- a/examples/point/column/demo/column_dark.js +++ b/examples/point/column/demo/column_dark.js @@ -6,25 +6,25 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 35.210526315789465, style: 'dark', - center: [ 104.288144, 31.239692 ], - zoom: 4.4 - }) + center: [104.288144, 31.239692], + zoom: 4.4, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data.list, { parser: { type: 'json', x: 'j', - y: 'w' - } + y: 'w', + }, }) .shape('cylinder') .size('t', function(level) { - return [ 1, 2, level * 2 + 20 ]; + return [1, 2, level * 2 + 20]; }) .color('t', [ '#094D4A', @@ -36,10 +36,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') '#5FD3A6', '#7BE39E', '#A1EDB8', - '#CEF8D6' + '#CEF8D6', ]) .style({ - opacity: 1.0 + opacity: 1.0, }); scene.addLayer(pointLayer); }); diff --git a/examples/point/column/demo/column_light.js b/examples/point/column/demo/column_light.js index e8470d47e7..1ed2fe3885 100644 --- a/examples/point/column/demo/column_light.js +++ b/examples/point/column/demo/column_light.js @@ -6,30 +6,30 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 48.62562, style: 'light', - center: [ 104.026043, 31.847 ], + center: [104.026043, 31.847], rotation: -0.76, - zoom: 4.48 - }) + zoom: 4.48, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data.list, { parser: { type: 'json', x: 'j', - y: 'w' - } + y: 'w', + }, }) .shape('cylinder') .size('t', function(level) { - return [ 1, 2, level * 2 + 20 ]; + return [1, 2, level * 2 + 20]; }) .color('#006CFF') .style({ - opacity: 1.0 + opacity: 1.0, }); scene.addLayer(pointLayer); }); diff --git a/examples/point/image/demo/image.js b/examples/point/image/demo/image.js index 0d1f731f61..8877765759 100644 --- a/examples/point/image/demo/image.js +++ b/examples/point/image/demo/image.js @@ -6,37 +6,37 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 0, style: 'light', - center: [ 121.434765, 31.256735 ], - zoom: 14.83 - }) + center: [121.434765, 31.256735], + zoom: 14.83, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { scene.addImage( '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' + 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', ); scene.addImage( '01', - 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' + 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg', ); scene.addImage( '02', - 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' + 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg', ); const imageLayer = new PointLayer() .source(data, { parser: { type: 'json', x: 'longitude', - y: 'latitude' - } + y: 'latitude', + }, }) - .shape('name', [ '00', '01', '02' ]) + .shape('name', ['00', '01', '02']) .size(20); scene.addLayer(imageLayer); }); diff --git a/examples/point/image/demo/locate.js b/examples/point/image/demo/locate.js index cffb6f6c25..1d8242eeb1 100644 --- a/examples/point/image/demo/locate.js +++ b/examples/point/image/demo/locate.js @@ -6,19 +6,19 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 0, style: 'light', - center: [ 116.276227, 35.256776 ], - zoom: 6 - }) + center: [116.276227, 35.256776], + zoom: 6, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json' + 'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { scene.addImage( 'marker', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ', ); const imageLayer = new PointLayer() .source(data) diff --git a/examples/point/image/demo/weather.js b/examples/point/image/demo/weather.js index 2dea6c9f46..7e8332825b 100644 --- a/examples/point/image/demo/weather.js +++ b/examples/point/image/demo/weather.js @@ -5,65 +5,65 @@ const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark', - center: [ 120.5969, 29.7918 ], + center: [120.5969, 29.7918], pitch: 35, zoom: 7, - rotation: 4.183582 - }) + rotation: 4.183582, + }), }); scene.addImage( '00', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ', ); scene.addImage( '01', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ', ); scene.addImage( '02', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ', ); scene.addImage( '04', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ', ); scene.addImage( '11', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ', ); scene.addImage( '15', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ', ); scene.addImage( '07', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ', ); scene.addImage( '16', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ', ); scene.addImage( '06', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ', ); scene.addImage( '08', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ', ); scene.addImage( '17', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ', ); scene.addImage( '05', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ' + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ', ); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json' + 'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const imageLayer = new PointLayer() .source(data) .shape('w', function(w) { diff --git a/examples/point/marker/demo/marker.js b/examples/point/marker/demo/marker.js index 7d3a074725..d7d6ed8cde 100644 --- a/examples/point/marker/demo/marker.js +++ b/examples/point/marker/demo/marker.js @@ -5,32 +5,32 @@ const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'light', - center: [ 105.790327, 36.495636 ], + center: [105.790327, 36.495636], pitch: 0, - zoom: 4 - }) + zoom: 4, + }), }); addMarkers(); scene.render(); - function addMarkers() { fetch( - 'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json' + 'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json', ) - .then(res => res.json()) - .then(nodes => { + .then((res) => res.json()) + .then((nodes) => { for (let i = 0; i < nodes.length; i++) { - if (nodes[i].g !== '1' || nodes[i].v === '') { continue; } + if (nodes[i].g !== '1' || nodes[i].v === '') { + continue; + } const el = document.createElement('label'); el.className = 'lableclass'; el.textContent = nodes[i].v + '℃'; el.style.background = getColor(nodes[i].v); el.style.borderColor = getColor(nodes[i].v); const marker = new Marker({ - element: el - }) - .setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }); + element: el, + }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }); scene.addMarker(marker); } }); @@ -40,16 +40,16 @@ function getColor(v) { return v > 50 ? '#800026' : v > 40 - ? '#BD0026' - : v > 30 - ? '#E31A1C' - : v > 20 - ? '#FC4E2A' - : v > 10 - ? '#FD8D3C' - : v > 5 - ? '#FEB24C' - : v > 0 - ? '#FED976' - : '#FFEDA0'; + ? '#BD0026' + : v > 30 + ? '#E31A1C' + : v > 20 + ? '#FC4E2A' + : v > 10 + ? '#FD8D3C' + : v > 5 + ? '#FEB24C' + : v > 0 + ? '#FED976' + : '#FFEDA0'; } diff --git a/examples/point/scatter/demo/normal.js b/examples/point/scatter/demo/normal.js index 154d3ff439..56d9096262 100644 --- a/examples/point/scatter/demo/normal.js +++ b/examples/point/scatter/demo/normal.js @@ -5,27 +5,27 @@ const scene = new Scene({ id: 'map', map: new GaodeMap({ style: 'dark', - center: [ 121.417463, 31.215175 ], + center: [121.417463, 31.215175], pitch: 0, - zoom: 11 - }) + zoom: 11, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt') - .then(res => res.text()) - .then(data => { + .then((res) => res.text()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'csv', y: 'lat', - x: 'lng' - } + x: 'lng', + }, }) .size(0.5) .color('#080298') .style({ - opacity: 1 + opacity: 1, }); scene.addLayer(pointLayer); diff --git a/examples/point/scatter/demo/normal2.js b/examples/point/scatter/demo/normal2.js index f7943a9cc1..3a4fb6cefa 100644 --- a/examples/point/scatter/demo/normal2.js +++ b/examples/point/scatter/demo/normal2.js @@ -6,16 +6,16 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 64.88, style: 'dark', - center: [ 114.060288, 22.53684 ], - zoom: 15.63 - }) + center: [114.060288, 22.53684], + zoom: 15.63, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json' + 'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data) .size(2) @@ -29,10 +29,10 @@ fetch( '#83CED6', '#A6E1E0', '#B8EFE2', - '#D7F9F0' + '#D7F9F0', ]) .style({ - opacity: 1 + opacity: 1, }); scene.addLayer(pointLayer); diff --git a/examples/polygon/3d/demo/polygon.js b/examples/polygon/3d/demo/polygon.js index eb576e9911..b626353c7c 100644 --- a/examples/polygon/3d/demo/polygon.js +++ b/examples/polygon/3d/demo/polygon.js @@ -6,20 +6,20 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 0, style: 'dark', - center: [ 114.050008, 22.529272 ], - zoom: 14.1 - }) + center: [114.050008, 22.529272], + zoom: 14.1, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json' + 'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new PolygonLayer({}) .source(data) .shape('extrude') - .size('h20', [ 100, 120, 160, 200, 260, 500 ]) + .size('h20', [100, 120, 160, 200, 260, 500]) .color('h20', [ '#816CAD', '#A67FB5', @@ -27,10 +27,10 @@ fetch( '#DEB8D4', '#F5D4E6', '#FAE4F1', - '#FFF3FC' + '#FFF3FC', ]) .style({ - opacity: 1.0 + opacity: 1.0, }); scene.addLayer(layer); }); diff --git a/examples/polygon/fill/demo/fill.js b/examples/polygon/fill/demo/fill.js index c316b593e7..f6ad615eb9 100644 --- a/examples/polygon/fill/demo/fill.js +++ b/examples/polygon/fill/demo/fill.js @@ -6,16 +6,16 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 0, style: 'light', - center: [ 116.368652, 39.93866 ], - zoom: 10.07 - }) + center: [116.368652, 39.93866], + zoom: 10.07, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json' + 'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const layer = new PolygonLayer({}) .source(data) .color( @@ -30,21 +30,21 @@ fetch( '#98B7F7', '#BDD0F8', '#DDE6F7', - '#F2F5FC' - ].reverse() + '#F2F5FC', + ].reverse(), ) .shape('fill') .style({ - opacity: 1 + opacity: 1, }); const layer2 = new LineLayer({ - zIndex: 2 + zIndex: 2, }) .source(data) .color('#fff') .size(0.3) .style({ - opacity: 1 + opacity: 1, }); scene.addLayer(layer); diff --git a/examples/polygon/fill/demo/polygon.js b/examples/polygon/fill/demo/polygon.js index a5b2b9db05..2ea9ca62e4 100644 --- a/examples/polygon/fill/demo/polygon.js +++ b/examples/polygon/fill/demo/polygon.js @@ -6,14 +6,14 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 0, style: 'light', - center: [ 107.042225, 37.66565 ], - zoom: 3.87 - }) + center: [107.042225, 37.66565], + zoom: 3.87, + }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json') - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const colors = [ '#D7F9F0', '#A6E1E0', @@ -22,24 +22,24 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json') '#3474DB', '#005CBE', '#00419F', - '#00287E' + '#00287E', ]; const layer = new PolygonLayer({}) .source(data) .color('name', colors) .shape('fill') .style({ - opacity: 0.9 + opacity: 0.9, }); const layer2 = new LineLayer({ - zIndex: 2 + zIndex: 2, }) .source(data) .color('#fff') .size(0.3) .style({ - opacity: 1 + opacity: 1, }); scene.addLayer(layer); diff --git a/examples/polygon/fill/demo/population.js b/examples/polygon/fill/demo/population.js index 4e89fda2fa..1637984208 100644 --- a/examples/polygon/fill/demo/population.js +++ b/examples/polygon/fill/demo/population.js @@ -6,25 +6,25 @@ const scene = new Scene({ map: new Mapbox({ pitch: 0, style: 'light', - center: [ 3.438, 40.16797 ], - zoom: 0.51329 - }) + center: [3.438, 40.16797], + zoom: 0.51329, + }), }); Promise.all([ fetch( - 'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json' - ).then(d => d.json()), + 'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json', + ).then((d) => d.json()), fetch( - 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json' - ).then(d => d.json()) -]).then(function onLoad([ world, population ]) { + 'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json', + ).then((d) => d.json()), +]).then(function onLoad([world, population]) { const popobj = {}; - population.forEach(element => { + population.forEach((element) => { popobj[element.Code] = element['Population, female (% of total) (% of total)']; }); // 数据绑定 - world.features = world.features.map(fe => { + world.features = world.features.map((fe) => { fe.properties.female = popobj[fe.id] * 1 || 0; return fe; }); @@ -38,27 +38,27 @@ Promise.all([ '#83CED6', '#A6E1E0', '#B8EFE2', - '#D7F9F0' + '#D7F9F0', ]; const layer = new PolygonLayer({}) .source(world) .scale('female', { - type: 'quantile' + type: 'quantile', }) .color('female', colors) .shape('fill') .style({ - opacity: 0.9 + opacity: 0.9, }); const layer2 = new LineLayer({ - zIndex: 2 + zIndex: 2, }) .source(world) .color('#fff') .size(0.3) .style({ - opacity: 1 + opacity: 1, }); scene.addLayer(layer); diff --git a/examples/raster/basic/demo/image.js b/examples/raster/basic/demo/image.js index 3348b62c6f..57eae68f4d 100644 --- a/examples/raster/basic/demo/image.js +++ b/examples/raster/basic/demo/image.js @@ -6,9 +6,9 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 0, style: 'light', - center: [ 121.268, 30.3628 ], - zoom: 13 - }) + center: [121.268, 30.3628], + zoom: 13, + }), }); const layer = new ImageLayer({}); @@ -17,8 +17,8 @@ layer.source( { parser: { type: 'image', - extent: [ 121.168, 30.2828, 121.384, 30.4219 ] - } - } + extent: [121.168, 30.2828, 121.384, 30.4219], + }, + }, ); scene.addLayer(layer); diff --git a/examples/raster/basic/demo/radar.js b/examples/raster/basic/demo/radar.js index 783c981251..3cffec694a 100644 --- a/examples/raster/basic/demo/radar.js +++ b/examples/raster/basic/demo/radar.js @@ -6,9 +6,9 @@ const scene = new Scene({ map: new GaodeMap({ pitch: 0, style: 'dark', - center: [ 115.5268, 34.3628 ], - zoom: 7 - }) + center: [115.5268, 34.3628], + zoom: 7, + }), }); const layer = new ImageLayer({}); @@ -17,9 +17,8 @@ layer.source( { parser: { type: 'image', - extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ] - } - } + extent: [113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137], + }, + }, ); scene.addLayer(layer); - diff --git a/examples/tutorial/control/demo/amap.js b/examples/tutorial/control/demo/amap.js index 0fac489045..9889f3eb70 100644 --- a/examples/tutorial/control/demo/amap.js +++ b/examples/tutorial/control/demo/amap.js @@ -5,49 +5,47 @@ const scene = new Scene({ map: new GaodeMap({ style: 'light', pitch: 0, - center: [ 121.4316962, 31.26082325 ], - zoom: 15.056 - }) + center: [121.4316962, 31.26082325], + zoom: 15.056, + }), }); -fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json') - .then(res => res.json()) - .then(data => { - const pointLayer = - new PointLayer({ +fetch( + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', +) + .then((res) => res.json()) + .then((data) => { + const pointLayer = new PointLayer({}) + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + }, }) - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude' - } - }).shape('circle') - .size('unit_price', [ 5, 25 ]) - .color('name', [ '#49B5AD', '#5B8FF9' ]) - .style({ - opacity: 0.3, - strokeWidth: 1 - }); + .shape('circle') + .size('unit_price', [5, 25]) + .color('name', ['#49B5AD', '#5B8FF9']) + .style({ + opacity: 0.3, + strokeWidth: 1, + }); scene.addLayer(pointLayer); const overlayers = { - 围栏填充: pointLayer + 围栏填充: pointLayer, }; const layersControl = new Layers({ - overlayers + overlayers, }); scene.addControl(layersControl); - }); - const zoomControl = new Zoom({ - position: 'topright' + position: 'topright', }); const scaleControl = new Scale({ - position: 'bottomright' + position: 'bottomright', }); scene.addControl(zoomControl); scene.addControl(scaleControl); - diff --git a/examples/tutorial/control/demo/mapbox.js b/examples/tutorial/control/demo/mapbox.js index 29d546c756..935f83dbcf 100644 --- a/examples/tutorial/control/demo/mapbox.js +++ b/examples/tutorial/control/demo/mapbox.js @@ -5,13 +5,12 @@ const scene = new Scene({ map: new Mapbox({ style: 'light', pitch: 0, - center: [ 107.054293, 35.246265 ], - zoom: 4.056 - }) + center: [107.054293, 35.246265], + zoom: 4.056, + }), }); const zoomControl = new Zoom(); const scaleControl = new Scale(); scene.addControl(zoomControl); scene.addControl(scaleControl); - diff --git a/examples/tutorial/data/demo/line.js b/examples/tutorial/data/demo/line.js index de86a0fa73..294ce57a38 100644 --- a/examples/tutorial/data/demo/line.js +++ b/examples/tutorial/data/demo/line.js @@ -5,7 +5,7 @@ new Scene({ map: new GaodeMap({ style: 'light', pitch: 0, - center: [ 107.054293, 35.246265 ], - zoom: 4.056 - }) + center: [107.054293, 35.246265], + zoom: 4.056, + }), }); diff --git a/examples/tutorial/map/demo/amap.js b/examples/tutorial/map/demo/amap.js index de86a0fa73..294ce57a38 100644 --- a/examples/tutorial/map/demo/amap.js +++ b/examples/tutorial/map/demo/amap.js @@ -5,7 +5,7 @@ new Scene({ map: new GaodeMap({ style: 'light', pitch: 0, - center: [ 107.054293, 35.246265 ], - zoom: 4.056 - }) + center: [107.054293, 35.246265], + zoom: 4.056, + }), }); diff --git a/examples/tutorial/map/demo/mapbox.js b/examples/tutorial/map/demo/mapbox.js index 6c82028835..ecc239e603 100644 --- a/examples/tutorial/map/demo/mapbox.js +++ b/examples/tutorial/map/demo/mapbox.js @@ -5,7 +5,7 @@ new Scene({ map: new Mapbox({ style: 'light', pitch: 0, - center: [ 107.054293, 35.246265 ], - zoom: 4.056 - }) + center: [107.054293, 35.246265], + zoom: 4.056, + }), }); diff --git a/examples/tutorial/marker/demo/amap.js b/examples/tutorial/marker/demo/amap.js index c55ebbdf66..15cd6befbc 100644 --- a/examples/tutorial/marker/demo/amap.js +++ b/examples/tutorial/marker/demo/amap.js @@ -5,17 +5,17 @@ const scene = new Scene({ map: new Mapbox({ style: 'light', pitch: 0, - center: [ 121.4316962, 31.26082325 ], - zoom: 12.056 - }) + center: [121.4316962, 31.26082325], + zoom: 12.056, + }), }); // 创建默认 marker const popup = new Popup({ - offsets: [ 0, 20 ] + offsets: [0, 20], }).setText('hello'); const marker = new Marker() - .setLnglat([ 121.4316962, 31.26082325 ]) + .setLnglat([121.4316962, 31.26082325]) .setPopup(popup); scene.addMarker(marker); diff --git a/examples/tutorial/marker/demo/mapbox.js b/examples/tutorial/marker/demo/mapbox.js index 29d546c756..935f83dbcf 100644 --- a/examples/tutorial/marker/demo/mapbox.js +++ b/examples/tutorial/marker/demo/mapbox.js @@ -5,13 +5,12 @@ const scene = new Scene({ map: new Mapbox({ style: 'light', pitch: 0, - center: [ 107.054293, 35.246265 ], - zoom: 4.056 - }) + center: [107.054293, 35.246265], + zoom: 4.056, + }), }); const zoomControl = new Zoom(); const scaleControl = new Scale(); scene.addControl(zoomControl); scene.addControl(scaleControl); - diff --git a/gatsby-config.js b/gatsby-config.js index 0eb329c16d..9cebb68641 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -77,7 +77,7 @@ module.exports = { zh: '场景 Scene', en: 'Scene' }, - order: 2 + order: 1 }, { slug: 'api/layer', @@ -85,7 +85,7 @@ module.exports = { zh: '图层 Layer', en: 'Layer' }, - order: 2 + order: 3 }, { slug: 'api/source', @@ -93,7 +93,7 @@ module.exports = { zh: '数据 Source', en: 'Source' }, - order: 3 + order: 2 }, { slug: 'api/component', diff --git a/package.json b/package.json index 3a924ac8c4..916e164057 100644 --- a/package.json +++ b/package.json @@ -123,8 +123,7 @@ "site:clean": "gatsby clean", "site:deploy": "yarn run site:build && gh-pages -d public", "site:publish": "gh-pages -d public", - "lint-fix:examples": "prettier --write examples/**/**/*.js", - "lint:site": "eslint examples/**/**/*.js --fix", + "lint:fix": "prettier --write examples/**/**/*.js docs/api/**/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx", "prebuild": "run-p tsc lint", "build": "yarn clean && lerna run build", "postbuild": "yarn build:declarations", diff --git a/packages/source/__tests__/data/multiLine.ts b/packages/source/__tests__/data/multiLine.ts new file mode 100644 index 0000000000..87a1be1d77 --- /dev/null +++ b/packages/source/__tests__/data/multiLine.ts @@ -0,0 +1,26 @@ +import { FeatureCollection, Geometries, Properties } from '@turf/helpers'; + +const MultiLine: FeatureCollection = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'MultiLineString', + coordinates: [ + [ + [100.0, 0.0], + [101.0, 1.0], + ], + [ + [102.0, 2.0], + [103.0, 3.0], + ], + ], + }, + }, + ], +}; + +export default MultiLine; diff --git a/packages/source/__tests__/data/multipolygon.ts b/packages/source/__tests__/data/multipolygon.ts new file mode 100644 index 0000000000..448655c7d5 --- /dev/null +++ b/packages/source/__tests__/data/multipolygon.ts @@ -0,0 +1,2431 @@ +import { FeatureCollection, Geometries, Properties } from '@turf/helpers'; +const multiPolygon: FeatureCollection = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: { + code: '310100', + name: '上海市', + }, + geometry: { + type: 'MultiPolygon', + coordinates: [ + [ + [ + [121.778859, 31.310198], + [121.775374, 31.31067], + [121.770952, 31.31168], + [121.767396, 31.313293], + [121.764248, 31.315309], + [121.760762, 31.320344], + [121.75586, 31.329072], + [121.751166, 31.337799], + [121.747408, 31.341189], + [121.744656, 31.343672], + [121.740767, 31.346488], + [121.733116, 31.351519], + [121.727939, 31.354803], + [121.686683, 31.376591], + [121.641039, 31.401111], + [121.601422, 31.421856], + [121.590378, 31.427544], + [121.572251, 31.436067], + [121.558469, 31.448792], + [121.549768, 31.457064], + [121.543277, 31.462399], + [121.537418, 31.466701], + [121.52951, 31.471167], + [121.516855, 31.477316], + [121.512903, 31.480344], + [121.510135, 31.482575], + [121.509106, 31.485357], + [121.508873, 31.487658], + [121.509349, 31.489801], + [121.511088, 31.49178], + [121.513458, 31.493359], + [121.516934, 31.494302], + [121.52113, 31.493973], + [121.549922, 31.48975], + [121.562352, 31.486372], + [121.565523, 31.484939], + [121.567342, 31.483506], + [121.569646, 31.477946], + [121.572808, 31.469448], + [121.575823, 31.463808], + [121.580417, 31.458801], + [121.583035, 31.456259], + [121.585567, 31.454671], + [121.59981, 31.450684], + [121.606319, 31.449408], + [121.621759, 31.444148], + [121.673842, 31.427747], + [121.688288, 31.425882], + [121.697193, 31.423993], + [121.708321, 31.419726], + [121.723713, 31.412359], + [121.729291, 31.410351], + [121.737481, 31.408814], + [121.742179, 31.407206], + [121.746545, 31.404724], + [121.753723, 31.400362], + [121.760851, 31.395185], + [121.769386, 31.390744], + [121.774137, 31.386985], + [121.780573, 31.380156], + [121.783447, 31.376711], + [121.787882, 31.371636], + [121.79088, 31.367062], + [121.792379, 31.363304], + [121.792879, 31.35911], + [121.793003, 31.35507], + [121.796011, 31.345623], + [121.796479, 31.339782], + [121.796479, 31.335419], + [121.795871, 31.329982], + [121.794069, 31.319547], + [121.792726, 31.316728], + [121.790984, 31.314314], + [121.787899, 31.312002], + [121.785489, 31.311064], + [121.782005, 31.31033], + [121.778859, 31.310198], + ], + [ + [121.627045, 31.44499], + [121.621542, 31.445816], + [121.616871, 31.446642], + [121.613861, 31.447886], + [121.594151, 31.458572], + [121.589694, 31.46148], + [121.586273, 31.464076], + [121.577881, 31.472489], + [121.57612, 31.474774], + [121.575602, 31.47685], + [121.575809, 31.478199], + [121.577156, 31.479339], + [121.579642, 31.479647], + [121.586896, 31.479537], + [121.595294, 31.478288], + [121.602138, 31.476834], + [121.60857, 31.474449], + [121.613655, 31.471338], + [121.625177, 31.462214], + [121.631616, 31.456825], + [121.635043, 31.45299], + [121.636289, 31.449878], + [121.635666, 31.447802], + [121.634004, 31.445932], + [121.631511, 31.445099], + [121.627045, 31.44499], + ], + [ + [122.242013, 31.419077], + [122.242481, 31.419186], + [122.242611, 31.419303], + [122.242767, 31.420382], + [122.242872, 31.420596], + [122.243123, 31.420685], + [122.243418, 31.420666], + [122.243887, 31.420411], + [122.244078, 31.420381], + [122.244355, 31.42047], + [122.244563, 31.420685], + [122.245032, 31.421264], + [122.245214, 31.421323], + [122.24537, 31.421314], + [122.245492, 31.421242], + [122.245579, 31.421028], + [122.245657, 31.420914], + [122.24583, 31.420845], + [122.245891, 31.420756], + [122.245917, 31.420556], + [122.245995, 31.420493], + [122.246273, 31.420446], + [122.246377, 31.42038], + [122.246351, 31.420282], + [122.24616, 31.420146], + [122.246169, 31.420046], + [122.246802, 31.419948], + [122.246958, 31.41982], + [122.247149, 31.419332], + [122.247123, 31.419134], + [122.247001, 31.418967], + [122.246845, 31.418924], + [122.246654, 31.418939], + [122.246429, 31.419028], + [122.246394, 31.41898], + [122.246472, 31.418833], + [122.246455, 31.418726], + [122.246394, 31.418657], + [122.246273, 31.418639], + [122.246047, 31.418798], + [122.245986, 31.418765], + [122.245969, 31.418533], + [122.245856, 31.418427], + [122.245587, 31.418338], + [122.245283, 31.418349], + [122.245006, 31.418466], + [122.244884, 31.418471], + [122.244763, 31.418408], + [122.244537, 31.41826], + [122.244364, 31.41826], + [122.244208, 31.418338], + [122.243834, 31.418608], + [122.243687, 31.418647], + [122.243609, 31.418608], + [122.243566, 31.41853], + [122.243722, 31.418184], + [122.243687, 31.418045], + [122.243566, 31.417833], + [122.243392, 31.417746], + [122.243218, 31.417766], + [122.242611, 31.418115], + [122.242455, 31.418174], + [122.242247, 31.418196], + [122.241848, 31.418174], + [122.241623, 31.418224], + [122.241475, 31.4184], + [122.241458, 31.418646], + [122.241536, 31.418863], + [122.241709, 31.418999], + [122.242013, 31.419077], + ], + [ + [121.88262, 31.240852], + [121.88991, 31.242594], + [121.897368, 31.242113], + [121.905931, 31.239413], + [121.915451, 31.236555], + [121.923553, 31.233862], + [121.926732, 31.229735], + [121.927522, 31.224019], + [121.925453, 31.205436], + [121.922438, 31.196858], + [121.918782, 31.194315], + [121.913859, 31.193835], + [121.908782, 31.195265], + [121.901642, 31.201457], + [121.889275, 31.215002], + [121.885158, 31.220524], + [121.88254, 31.225607], + [121.881431, 31.231166], + [121.880877, 31.236328], + [121.881831, 31.239583], + [121.88262, 31.240852], + ], + [ + [121.406768, 30.704994], + [121.407081, 30.705096], + [121.407905, 30.705135], + [121.408626, 30.705204], + [121.408955, 30.705204], + [121.409155, 30.705076], + [121.409329, 30.704857], + [121.409294, 30.70452], + [121.409103, 30.70432], + [121.408773, 30.704093], + [121.40662, 30.703089], + [121.406377, 30.703031], + [121.406073, 30.70305], + [121.405969, 30.70317], + [121.405969, 30.703448], + [121.406178, 30.704242], + [121.40636, 30.704707], + [121.406568, 30.704916], + [121.406768, 30.704994], + ], + [ + [121.422454, 30.691481], + [121.423764, 30.691322], + [121.424874, 30.691379], + [121.425967, 30.691479], + [121.426618, 30.69128], + [121.427389, 30.690683], + [121.428447, 30.689769], + [121.428915, 30.689114], + [121.428698, 30.688577], + [121.428247, 30.688222], + [121.425368, 30.687369], + [121.424735, 30.687469], + [121.424041, 30.687906], + [121.423313, 30.688562], + [121.422316, 30.688961], + [121.421284, 30.689139], + [121.420277, 30.689479], + [121.419479, 30.689855], + [121.418829, 30.690511], + [121.418751, 30.691106], + [121.41895, 30.691405], + [121.419462, 30.691622], + [121.420694, 30.691641], + [121.422454, 30.691481], + ], + [ + [121.426677, 30.682181], + [121.427068, 30.682126], + [121.428203, 30.681856], + [121.428594, 30.681747], + [121.42868, 30.681695], + [121.428732, 30.681595], + [121.428741, 30.681484], + [121.428697, 30.681369], + [121.428576, 30.681246], + [121.428177, 30.681137], + [121.427986, 30.681038], + [121.4279, 30.680914], + [121.427822, 30.680667], + [121.427657, 30.680398], + [121.427475, 30.680278], + [121.427249, 30.680209], + [121.427024, 30.680235], + [121.42679, 30.680309], + [121.426651, 30.680459], + [121.426547, 30.680711], + [121.426486, 30.681124], + [121.426417, 30.681734], + [121.426426, 30.681997], + [121.426478, 30.682127], + [121.426582, 30.682166], + [121.426677, 30.682181], + ], + [ + [121.943251, 31.215466], + [121.94659, 31.224363], + [121.951042, 31.228817], + [121.957253, 31.230419], + [121.969182, 31.230287], + [121.98066, 31.228092], + [121.989661, 31.224526], + [122.008565, 31.220992], + [122.01104, 31.217408], + [122.012615, 31.210006], + [122.012013, 31.192044], + [122.010587, 31.188002], + [122.00541, 31.176988], + [121.999558, 31.165074], + [121.995731, 31.160798], + [121.975861, 31.158839], + [121.970769, 31.157556], + [121.965678, 31.157543], + [121.959631, 31.159276], + [121.952629, 31.167202], + [121.948021, 31.176403], + [121.944839, 31.18688], + [121.942614, 31.198469], + [121.941824, 31.20768], + [121.943251, 31.215466], + ], + [ + [121.118496, 31.759078], + [121.149226, 31.787289], + [121.181509, 31.82041], + [121.200328, 31.835144], + [121.225309, 31.847039], + [121.242068, 31.853401], + [121.252109, 31.857733], + [121.265578, 31.864123], + [121.281339, 31.869038], + [121.291162, 31.870989], + [121.301902, 31.872716], + [121.310365, 31.8725], + [121.315854, 31.871483], + [121.323057, 31.868533], + [121.36929, 31.843281], + [121.376375, 31.838576], + [121.385049, 31.833531], + [121.391113, 31.826365], + [121.395382, 31.821294], + [121.396489, 31.820182], + [121.397173, 31.819593], + [121.398168, 31.818344], + [121.399149, 31.817478], + [121.399288, 31.81711], + [121.400423, 31.815713], + [121.405464, 31.809838], + [121.40591, 31.809536], + [121.410235, 31.807159], + [121.411494, 31.806344], + [121.413447, 31.803245], + [121.41459, 31.800979], + [121.416307, 31.797643], + [121.41474, 31.796882], + [121.412379, 31.796205], + [121.410903, 31.795582], + [121.411353, 31.794789], + [121.419054, 31.78249], + [121.42091, 31.779601], + [121.422575, 31.777784], + [121.425783, 31.774271], + [121.431488, 31.769261], + [121.433283, 31.768613], + [121.439496, 31.766363], + [121.445388, 31.764301], + [121.449745, 31.761664], + [121.455573, 31.759341], + [121.464143, 31.757141], + [121.476813, 31.756146], + [121.487748, 31.75342], + [121.488827, 31.754099], + [121.489742, 31.753391], + [121.49856, 31.75326], + [121.513043, 31.743696], + [121.513916, 31.743474], + [121.514984, 31.742871], + [121.521489, 31.741344], + [121.524653, 31.740735], + [121.526687, 31.740216], + [121.528356, 31.73835], + [121.539423, 31.735498], + [121.540124, 31.733313], + [121.549505, 31.726968], + [121.551384, 31.727384], + [121.565022, 31.716706], + [121.57854, 31.710528], + [121.592263, 31.706482], + [121.593248, 31.705377], + [121.599665, 31.703118], + [121.600909, 31.706996], + [121.602752, 31.706938], + [121.611757, 31.704288], + [121.615647, 31.702484], + [121.627334, 31.69777], + [121.627718, 31.697766], + [121.628307, 31.697886], + [121.629202, 31.697747], + [121.633275, 31.696162], + [121.642654, 31.697459], + [121.715262, 31.673842], + [121.817811, 31.652027], + [121.887611, 31.63638], + [121.975185, 31.617039], + [121.988245, 31.529596], + [121.993863, 31.51189], + [121.995716, 31.4931], + [121.991697, 31.476758], + [121.981808, 31.464095], + [121.967288, 31.456661], + [121.934299, 31.442359], + [121.918046, 31.434692], + [121.90114, 31.430124], + [121.89055, 31.428787], + [121.882098, 31.42866], + [121.87299, 31.42934], + [121.857813, 31.430044], + [121.845378, 31.431891], + [121.834217, 31.433976], + [121.819178, 31.438211], + [121.763436, 31.458228], + [121.729886, 31.471978], + [121.682858, 31.491067], + [121.670612, 31.494217], + [121.638648, 31.499722], + [121.625777, 31.501769], + [121.617682, 31.503668], + [121.60879, 31.506904], + [121.547679, 31.531128], + [121.471172, 31.57443], + [121.43422, 31.590338], + [121.414794, 31.591078], + [121.403519, 31.590007], + [121.395461, 31.585441], + [121.372212, 31.553206], + [121.345591, 31.571686], + [121.289106, 31.616282], + [121.179863, 31.720773], + [121.145332, 31.753923], + [121.142064, 31.755309], + [121.118496, 31.759078], + ], + [ + [121.80178, 31.356974], + [121.800564, 31.363992], + [121.797673, 31.369639], + [121.794326, 31.374829], + [121.792804, 31.377577], + [121.792804, 31.379407], + [121.79387, 31.380473], + [121.796761, 31.381079], + [121.803456, 31.381222], + [121.810453, 31.380752], + [121.81745, 31.380588], + [121.820492, 31.379972], + [121.82475, 31.378591], + [121.8284, 31.376449], + [121.831746, 31.375528], + [121.836004, 31.375215], + [121.841935, 31.375051], + [121.845585, 31.374587], + [121.852886, 31.371371], + [121.858514, 31.369379], + [121.870381, 31.366006], + [121.87586, 31.364169], + [121.879056, 31.362793], + [121.913071, 31.350442], + [121.951729, 31.337269], + [122.001555, 31.329251], + [122.041072, 31.323811], + [122.078012, 31.323524], + [122.116671, 31.321234], + [122.121979, 31.315438], + [122.122684, 31.307202], + [122.105206, 31.262136], + [122.097771, 31.255658], + [122.087286, 31.257541], + [122.071999, 31.266826], + [122.016446, 31.282289], + [121.975783, 31.279998], + [121.932257, 31.283148], + [121.900758, 31.291166], + [121.88959, 31.292025], + [121.865962, 31.294935], + [121.860789, 31.294943], + [121.858964, 31.294336], + [121.856682, 31.292814], + [121.852879, 31.292363], + [121.844362, 31.294514], + [121.840559, 31.295436], + [121.838583, 31.296813], + [121.833603, 31.299651], + [121.832044, 31.301706], + [121.827634, 31.304307], + [121.822615, 31.307367], + [121.813186, 31.316231], + [121.806646, 31.324173], + [121.803756, 31.328449], + [121.803147, 31.33211], + [121.802692, 31.342788], + [121.80178, 31.356974], + ], + [ + [121.148297, 31.275376], + [121.150394, 31.275438], + [121.153739, 31.276642], + [121.154216, 31.276736], + [121.15438, 31.277626], + [121.155481, 31.278437], + [121.155481, 31.279598], + [121.155542, 31.280759], + [121.15724, 31.281095], + [121.158314, 31.281174], + [121.159406, 31.281573], + [121.159008, 31.28262], + [121.160428, 31.28307], + [121.160697, 31.283632], + [121.161286, 31.283984], + [121.160931, 31.284736], + [121.159303, 31.287663], + [121.158523, 31.287639], + [121.158341, 31.287263], + [121.156395, 31.287406], + [121.156339, 31.288578], + [121.155066, 31.288556], + [121.154962, 31.290211], + [121.154687, 31.290051], + [121.153142, 31.289964], + [121.152891, 31.291395], + [121.152571, 31.291717], + [121.152033, 31.292004], + [121.151288, 31.291934], + [121.151106, 31.293901], + [121.152718, 31.294077], + [121.151511, 31.296368], + [121.151463, 31.296426], + [121.150522, 31.296208], + [121.150266, 31.29694], + [121.149526, 31.296852], + [121.149314, 31.297694], + [121.148004, 31.297447], + [121.147788, 31.298199], + [121.148828, 31.298484], + [121.148932, 31.298877], + [121.150786, 31.299017], + [121.149118, 31.301347], + [121.149062, 31.301412], + [121.146902, 31.30593], + [121.143776, 31.3097], + [121.141678, 31.307886], + [121.139477, 31.306268], + [121.138957, 31.30563], + [121.139329, 31.304731], + [121.13965, 31.302989], + [121.133772, 31.302067], + [121.132151, 31.302184], + [121.13131, 31.302418], + [121.129948, 31.302592], + [121.129628, 31.30329], + [121.129914, 31.303928], + [121.129714, 31.30509], + [121.129194, 31.306425], + [121.129134, 31.307528], + [121.129776, 31.308311], + [121.129455, 31.308919], + [121.129394, 31.309734], + [121.128874, 31.310199], + [121.129108, 31.311301], + [121.128501, 31.311563], + [121.127972, 31.311882], + [121.128094, 31.312926], + [121.128466, 31.313506], + [121.12864, 31.314261], + [121.128181, 31.314639], + [121.128206, 31.315247], + [121.128241, 31.316061], + [121.12786, 31.3167], + [121.127079, 31.316933], + [121.127079, 31.317599], + [121.126967, 31.318587], + [121.127253, 31.319312], + [121.127921, 31.319572], + [121.128614, 31.319543], + [121.129248, 31.320306], + [121.128987, 31.320764], + [121.128927, 31.321156], + [121.129291, 31.321787], + [121.130436, 31.321792], + [121.130817, 31.321959], + [121.131207, 31.322395], + [121.131077, 31.322938], + [121.131641, 31.323245], + [121.13145, 31.323812], + [121.13145, 31.324479], + [121.131537, 31.325438], + [121.132083, 31.325639], + [121.132786, 31.325465], + [121.133306, 31.325579], + [121.133566, 31.32648], + [121.133271, 31.327321], + [121.132231, 31.327526], + [121.131824, 31.328019], + [121.131858, 31.328629], + [121.133246, 31.328686], + [121.133541, 31.329613], + [121.13348, 31.330164], + [121.132726, 31.33066], + [121.132838, 31.331617], + [121.132578, 31.331965], + [121.131945, 31.332111], + [121.131147, 31.332107], + [121.131069, 31.33275], + [121.130844, 31.333649], + [121.130931, 31.334346], + [121.130116, 31.334697], + [121.12983, 31.335103], + [121.129917, 31.335624], + [121.130463, 31.336146], + [121.130437, 31.336756], + [121.130264, 31.337395], + [121.130376, 31.337974], + [121.13055, 31.338612], + [121.130177, 31.33896], + [121.129917, 31.339657], + [121.129856, 31.340239], + [121.130524, 31.340992], + [121.13081, 31.341515], + [121.130671, 31.342094], + [121.130351, 31.342588], + [121.130264, 31.343139], + [121.130524, 31.343836], + [121.130438, 31.344207], + [121.129553, 31.343884], + [121.127776, 31.343361], + [121.126362, 31.342919], + [121.123942, 31.342759], + [121.122528, 31.342881], + [121.121401, 31.343245], + [121.120394, 31.343367], + [121.117974, 31.343449], + [121.117324, 31.347125], + [121.119623, 31.347488], + [121.120195, 31.347568], + [121.120109, 31.348013], + [121.119302, 31.349062], + [121.118296, 31.350274], + [121.117974, 31.351405], + [121.117246, 31.35169], + [121.115953, 31.351489], + [121.114218, 31.350843], + [121.112526, 31.350479], + [121.11184, 31.350521], + [121.111519, 31.351369], + [121.111155, 31.35153], + [121.110504, 31.351329], + [121.109132, 31.350764], + [121.108325, 31.350643], + [121.107961, 31.352905], + [121.108204, 31.353389], + [121.108412, 31.354036], + [121.107961, 31.35456], + [121.107362, 31.354761], + [121.107275, 31.355248], + [121.107518, 31.356136], + [121.107276, 31.357186], + [121.108083, 31.357306], + [121.107961, 31.357872], + [121.107883, 31.358437], + [121.107927, 31.359327], + [121.108248, 31.360455], + [121.107962, 31.361426], + [121.10764, 31.362275], + [121.107241, 31.363323], + [121.106755, 31.364535], + [121.106799, 31.365505], + [121.106946, 31.366515], + [121.106955, 31.366595], + [121.107841, 31.366681], + [121.108205, 31.366716], + [121.108248, 31.366392], + [121.108891, 31.366514], + [121.109134, 31.365107], + [121.109281, 31.364701], + [121.110444, 31.364642], + [121.112848, 31.365134], + [121.113221, 31.365716], + [121.112961, 31.366324], + [121.113169, 31.366875], + [121.11369, 31.367194], + [121.114358, 31.367398], + [121.11723, 31.367657], + [121.118384, 31.367773], + [121.118679, 31.368324], + [121.119312, 31.368526], + [121.120214, 31.368671], + [121.120327, 31.369252], + [121.119078, 31.370558], + [121.116927, 31.37059], + [121.116727, 31.371317], + [121.115226, 31.37114], + [121.113751, 31.374449], + [121.116042, 31.375153], + [121.118211, 31.37584], + [121.120302, 31.377056], + [121.123286, 31.378476], + [121.124271, 31.376726], + [121.128463, 31.378656], + [121.131247, 31.379662], + [121.131767, 31.378815], + [121.132981, 31.379297], + [121.137299, 31.380949], + [121.138412, 31.381146], + [121.138206, 31.381721], + [121.137991, 31.382376], + [121.13752, 31.382789], + [121.13794, 31.383572], + [121.138625, 31.383087], + [121.139674, 31.383449], + [121.139353, 31.384176], + [121.141044, 31.384536], + [121.141425, 31.383546], + [121.148437, 31.385406], + [121.148419, 31.386627], + [121.148983, 31.386908], + [121.148705, 31.387473], + [121.148056, 31.387717], + [121.147215, 31.388365], + [121.146652, 31.38893], + [121.146652, 31.389254], + [121.147094, 31.3899], + [121.146366, 31.390628], + [121.145681, 31.391354], + [121.145031, 31.391598], + [121.144919, 31.391275], + [121.144919, 31.390913], + [121.144633, 31.390952], + [121.144147, 31.391439], + [121.143705, 31.391924], + [121.143827, 31.392328], + [121.144555, 31.392609], + [121.146565, 31.393374], + [121.148021, 31.394058], + [121.149468, 31.394498], + [121.148905, 31.395105], + [121.148342, 31.395753], + [121.147779, 31.396439], + [121.147658, 31.397329], + [121.148741, 31.397934], + [121.149634, 31.398214], + [121.150353, 31.398172], + [121.151609, 31.397846], + [121.152571, 31.397966], + [121.152736, 31.398168], + [121.152571, 31.398774], + [121.152294, 31.399059], + [121.150474, 31.399303], + [121.14959, 31.399384], + [121.149105, 31.399709], + [121.149071, 31.400314], + [121.149513, 31.400759], + [121.149998, 31.400879], + [121.150838, 31.400715], + [121.151081, 31.400999], + [121.150492, 31.402211], + [121.151948, 31.403014], + [121.152987, 31.403208], + [121.153897, 31.403686], + [121.153343, 31.404588], + [121.153785, 31.404789], + [121.153101, 31.405841], + [121.153863, 31.406285], + [121.154504, 31.406242], + [121.155232, 31.406402], + [121.157329, 31.40765], + [121.158819, 31.405668], + [121.159382, 31.405789], + [121.157892, 31.407893], + [121.158499, 31.408133], + [121.158256, 31.408415], + [121.15797, 31.408861], + [121.15797, 31.409225], + [121.158741, 31.409788], + [121.158863, 31.410112], + [121.158456, 31.410475], + [121.157814, 31.411082], + [121.15713, 31.411367], + [121.156809, 31.411164], + [121.155839, 31.410399], + [121.155475, 31.4104], + [121.155033, 31.410965], + [121.154504, 31.411574], + [121.154747, 31.411936], + [121.155475, 31.412136], + [121.155882, 31.412539], + [121.155796, 31.413065], + [121.155519, 31.413831], + [121.154955, 31.413995], + [121.154548, 31.413874], + [121.153907, 31.413593], + [121.1535, 31.413674], + [121.153422, 31.414078], + [121.153222, 31.414524], + [121.152815, 31.414563], + [121.152295, 31.414404], + [121.151645, 31.414444], + [121.151125, 31.41505], + [121.150918, 31.415496], + [121.150476, 31.415739], + [121.14967, 31.415578], + [121.149271, 31.41562], + [121.148907, 31.415861], + [121.148829, 31.416469], + [121.149271, 31.419132], + [121.148665, 31.419133], + [121.14818, 31.419902], + [121.146204, 31.419703], + [121.146247, 31.421075], + [121.148266, 31.421072], + [121.1485, 31.421516], + [121.149107, 31.421637], + [121.151161, 31.421794], + [121.150641, 31.422683], + [121.150884, 31.423086], + [121.151447, 31.423329], + [121.152616, 31.423448], + [121.152738, 31.423891], + [121.153544, 31.423889], + [121.153743, 31.424174], + [121.153743, 31.425183], + [121.155277, 31.425745], + [121.155719, 31.425622], + [121.156403, 31.425621], + [121.157729, 31.426022], + [121.158058, 31.425579], + [121.159384, 31.425981], + [121.159791, 31.425253], + [121.161359, 31.425775], + [121.160917, 31.426744], + [121.161039, 31.427067], + [121.161966, 31.427309], + [121.162001, 31.427953], + [121.162486, 31.427994], + [121.162927, 31.427429], + [121.163334, 31.427386], + [121.164305, 31.427224], + [121.16434, 31.430374], + [121.16434, 31.43106], + [121.163976, 31.431301], + [121.163656, 31.431061], + [121.163612, 31.430779], + [121.163612, 31.42896], + [121.163136, 31.429002], + [121.16317, 31.429527], + [121.162529, 31.42957], + [121.162486, 31.430698], + [121.163136, 31.430982], + [121.163092, 31.431707], + [121.162711, 31.432215], + [121.158483, 31.432253], + [121.154983, 31.432752], + [121.152488, 31.433599], + [121.149827, 31.434879], + [121.148701, 31.435606], + [121.147826, 31.436187], + [121.14728, 31.436826], + [121.146873, 31.437263], + [121.147419, 31.437711], + [121.146569, 31.439004], + [121.147861, 31.439447], + [121.147055, 31.440861], + [121.14689, 31.441265], + [121.147254, 31.441871], + [121.147783, 31.442475], + [121.147904, 31.442799], + [121.147662, 31.443324], + [121.147341, 31.44393], + [121.160919, 31.449681], + [121.162124, 31.448872], + [121.163051, 31.44887], + [121.164506, 31.449392], + [121.165468, 31.449875], + [121.165486, 31.449875], + [121.166053, 31.450173], + [121.167733, 31.448318], + [121.168335, 31.448537], + [121.168777, 31.449183], + [121.169384, 31.449907], + [121.169826, 31.450027], + [121.170388, 31.449866], + [121.171471, 31.44946], + [121.17232, 31.449054], + [121.173767, 31.449052], + [121.174979, 31.449291], + [121.177639, 31.450256], + [121.178765, 31.450901], + [121.179857, 31.451219], + [121.180819, 31.451461], + [121.184249, 31.453553], + [121.18606, 31.454358], + [121.186181, 31.454883], + [121.186181, 31.455286], + [121.185618, 31.456177], + [121.185454, 31.456903], + [121.185454, 31.457469], + [121.18574, 31.458115], + [121.186181, 31.458801], + [121.186181, 31.459647], + [121.186061, 31.460819], + [121.189448, 31.462267], + [121.189205, 31.462752], + [121.189405, 31.463194], + [121.191285, 31.464717], + [121.192992, 31.466077], + [121.194317, 31.467507], + [121.195045, 31.467829], + [121.195972, 31.467908], + [121.197904, 31.468065], + [121.199273, 31.468386], + [121.200322, 31.469112], + [121.201613, 31.469272], + [121.202904, 31.469351], + [121.203268, 31.469712], + [121.203346, 31.470359], + [121.202904, 31.471328], + [121.203026, 31.471894], + [121.203424, 31.472336], + [121.205565, 31.473829], + [121.206371, 31.474997], + [121.207472, 31.475686], + [121.208486, 31.476294], + [121.20982, 31.477132], + [121.212802, 31.478029], + [121.213799, 31.478908], + [121.214371, 31.479129], + [121.215029, 31.477531], + [121.214209, 31.47702], + [121.214111, 31.476633], + [121.213643, 31.476315], + [121.213643, 31.475937], + [121.214596, 31.475821], + [121.216451, 31.47576], + [121.217777, 31.475628], + [121.219069, 31.475223], + [121.220725, 31.476067], + [121.221566, 31.476149], + [121.223179, 31.475945], + [121.224999, 31.475902], + [121.225355, 31.476023], + [121.225841, 31.47691], + [121.226205, 31.477678], + [121.226769, 31.47804], + [121.227697, 31.478039], + [121.228746, 31.477715], + [121.229795, 31.477351], + [121.230359, 31.477431], + [121.230402, 31.477996], + [121.230723, 31.480096], + [121.230845, 31.481106], + [121.230073, 31.481547], + [121.229344, 31.481723], + [121.228677, 31.482129], + [121.228885, 31.482941], + [121.22964, 31.48352], + [121.230186, 31.48413], + [121.230767, 31.484941], + [121.231348, 31.485724], + [121.232389, 31.487086], + [121.232997, 31.487899], + [121.233751, 31.488101], + [121.234393, 31.487753], + [121.235, 31.487724], + [121.235408, 31.4881], + [121.235261, 31.489087], + [121.234853, 31.491959], + [121.23474, 31.492684], + [121.235235, 31.49312], + [121.235929, 31.493002], + [121.236475, 31.492568], + [121.23723, 31.491958], + [121.238071, 31.491898], + [121.2388, 31.492248], + [121.240076, 31.493232], + [121.240882, 31.493696], + [121.241525, 31.493637], + [121.241898, 31.49329], + [121.241811, 31.492624], + [121.24149, 31.491983], + [121.241143, 31.490911], + [121.241403, 31.490301], + [121.242045, 31.490041], + [121.242305, 31.489658], + [121.242704, 31.489133], + [121.243312, 31.488284], + [121.243797, 31.487316], + [121.243476, 31.485458], + [121.243841, 31.485054], + [121.244075, 31.484529], + [121.243841, 31.483882], + [121.244075, 31.483196], + [121.244405, 31.482632], + [121.244404, 31.481178], + [121.245333, 31.481177], + [121.246175, 31.481379], + [121.246262, 31.481984], + [121.248173, 31.481876], + [121.248278, 31.480781], + [121.246704, 31.480773], + [121.246617, 31.479924], + [121.24581, 31.479885], + [121.245975, 31.479078], + [121.246496, 31.478754], + [121.246739, 31.47827], + [121.246947, 31.477543], + [121.247069, 31.477059], + [121.247667, 31.476896], + [121.248318, 31.477059], + [121.249689, 31.477623], + [121.249967, 31.477986], + [121.250211, 31.478673], + [121.251182, 31.478673], + [121.251226, 31.479602], + [121.253362, 31.479804], + [121.253518, 31.481117], + [121.252858, 31.481195], + [121.252902, 31.481814], + [121.253674, 31.481851], + [121.253631, 31.483088], + [121.254291, 31.483051], + [121.254427, 31.483747], + [121.255645, 31.483631], + [121.255254, 31.480653], + [121.255141, 31.479068], + [121.254751, 31.478178], + [121.254794, 31.477638], + [121.255098, 31.477444], + [121.255445, 31.477599], + [121.255645, 31.478063], + [121.255914, 31.47787], + [121.256374, 31.47756], + [121.256374, 31.477909], + [121.256374, 31.478953], + [121.256105, 31.47899], + [121.256057, 31.479574], + [121.256261, 31.479726], + [121.256765, 31.479687], + [121.25719, 31.479376], + [121.257807, 31.479222], + [121.257694, 31.478758], + [121.25719, 31.478758], + [121.25719, 31.478102], + [121.25765, 31.477792], + [121.259431, 31.477946], + [121.260281, 31.478372], + [121.261054, 31.478683], + [121.261058, 31.478692], + [121.261338, 31.478774], + [121.26146, 31.478852], + [121.261551, 31.479083], + [121.261609, 31.47972], + [121.261666, 31.480401], + [121.261731, 31.480781], + [121.261853, 31.481012], + [121.26202, 31.481186], + [121.262683, 31.481456], + [121.262798, 31.481585], + [121.262876, 31.481779], + [121.263374, 31.482046], + [121.264459, 31.482434], + [121.265154, 31.483129], + [121.267439, 31.483362], + [121.267395, 31.48491], + [121.267326, 31.486223], + [121.267977, 31.486224], + [121.267899, 31.486727], + [121.268247, 31.487074], + [121.268872, 31.487461], + [121.26922, 31.487153], + [121.269837, 31.486882], + [121.270453, 31.486805], + [121.270453, 31.485259], + [121.270801, 31.485105], + [121.271461, 31.484988], + [121.272043, 31.484331], + [121.272894, 31.484681], + [121.27425, 31.485108], + [121.276223, 31.485378], + [121.276448, 31.486655], + [121.277378, 31.486773], + [121.277726, 31.487274], + [121.277961, 31.487854], + [121.278656, 31.488241], + [121.279821, 31.488359], + [121.280324, 31.488668], + [121.279699, 31.490408], + [121.280629, 31.490717], + [121.281368, 31.490757], + [121.28168, 31.489907], + [121.282063, 31.48987], + [121.282532, 31.490024], + [121.283149, 31.490025], + [121.283688, 31.489794], + [121.283879, 31.490684], + [121.285358, 31.490685], + [121.28547, 31.490375], + [121.285861, 31.48995], + [121.2864, 31.489719], + [121.287331, 31.489487], + [121.287869, 31.488947], + [121.288374, 31.489102], + [121.288912, 31.489103], + [121.289382, 31.489027], + [121.289686, 31.489336], + [121.28973, 31.489568], + [121.289539, 31.489879], + [121.28973, 31.490187], + [121.290269, 31.490806], + [121.290426, 31.491077], + [121.290617, 31.491697], + [121.291512, 31.491698], + [121.291625, 31.491311], + [121.292286, 31.490616], + [121.292243, 31.490229], + [121.292982, 31.490345], + [121.293486, 31.489805], + [121.294103, 31.490078], + [121.295382, 31.490466], + [121.295999, 31.490968], + [121.297356, 31.491356], + [121.298599, 31.491514], + [121.298556, 31.493717], + [121.297547, 31.493638], + [121.297547, 31.494102], + [121.300495, 31.494532], + [121.300861, 31.496749], + [121.300261, 31.498373], + [121.300983, 31.498531], + [121.301426, 31.497924], + [121.302496, 31.498446], + [121.302061, 31.49891], + [121.300956, 31.498967], + [121.299931, 31.499758], + [121.300939, 31.500636], + [121.301765, 31.499606], + [121.302131, 31.499192], + [121.302444, 31.499555], + [121.301461, 31.501293], + [121.302035, 31.501734], + [121.302105, 31.502394], + [121.302592, 31.502601], + [121.302836, 31.502221], + [121.303253, 31.502326], + [121.303566, 31.501944], + [121.304123, 31.502015], + [121.30454, 31.5025], + [121.304644, 31.502813], + [121.30521, 31.502811], + [121.305871, 31.503439], + [121.305244, 31.504113], + [121.305297, 31.504554], + [121.305114, 31.505023], + [121.305532, 31.505336], + [121.306315, 31.505389], + [121.306706, 31.505182], + [121.307584, 31.505313], + [121.308132, 31.504663], + [121.308733, 31.504742], + [121.308472, 31.505263], + [121.310351, 31.505915], + [121.310968, 31.505006], + [121.311751, 31.504904], + [121.312038, 31.504099], + [121.311699, 31.50402], + [121.311933, 31.502903], + [121.312429, 31.502825], + [121.312873, 31.502618], + [121.313004, 31.502204], + [121.313839, 31.502205], + [121.313839, 31.501814], + [121.313264, 31.501527], + [121.313421, 31.500748], + [121.315344, 31.501272], + [121.315839, 31.501896], + [121.316683, 31.503489], + [121.316622, 31.503994], + [121.316544, 31.504964], + [121.316649, 31.50577], + [121.320163, 31.50588], + [121.320033, 31.505205], + [121.320451, 31.504945], + [121.320616, 31.504681], + [121.320633, 31.504192], + [121.321729, 31.504247], + [121.321886, 31.503404], + [121.320685, 31.503205], + [121.320033, 31.502996], + [121.320007, 31.502294], + [121.320006, 31.501643], + [121.319798, 31.50089], + [121.319902, 31.49972], + [121.320502, 31.499617], + [121.320528, 31.499306], + [121.321651, 31.499361], + [121.321729, 31.499827], + [121.322503, 31.499849], + [121.322512, 31.499363], + [121.323704, 31.499649], + [121.323652, 31.500498], + [121.323312, 31.500888], + [121.32313, 31.502292], + [121.323521, 31.502707], + [121.324487, 31.502865], + [121.324513, 31.504174], + [121.325427, 31.50428], + [121.325662, 31.503258], + [121.327219, 31.503571], + [121.327211, 31.504244], + [121.328533, 31.504574], + [121.328655, 31.504121], + [121.329516, 31.504253], + [121.335833, 31.508295], + [121.343498, 31.512056], + [121.350562, 31.510256], + [121.357755, 31.508255], + [121.36226, 31.506786], + [121.368341, 31.504359], + [121.376295, 31.50111], + [121.40543, 31.487219], + [121.406286, 31.485382], + [121.405246, 31.483239], + [121.403972, 31.481489], + [121.404334, 31.479212], + [121.406574, 31.478072], + [121.409699, 31.476325], + [121.415332, 31.472791], + [121.415346, 31.472778], + [121.415371, 31.472766], + [121.418688, 31.470685], + [121.434269, 31.458491], + [121.446027, 31.45072], + [121.4637, 31.438283], + [121.481342, 31.427296], + [121.492797, 31.418823], + [121.494267, 31.417846], + [121.496273, 31.41586], + [121.503962, 31.408654], + [121.505997, 31.40702], + [121.506998, 31.408269], + [121.507175, 31.408896], + [121.507226, 31.409722], + [121.501319, 31.411986], + [121.501241, 31.412824], + [121.502367, 31.413399], + [121.510797, 31.40997], + [121.517238, 31.406304], + [121.516584, 31.405283], + [121.509428, 31.408292], + [121.508786, 31.407907], + [121.508257, 31.407394], + [121.507354, 31.405931], + [121.521232, 31.394788], + [121.538014, 31.388495], + [121.559815, 31.383606], + [121.583861, 31.378505], + [121.593713, 31.376417], + [121.598945, 31.374606], + [121.603041, 31.372658], + [121.606599, 31.370442], + [121.610558, 31.368196], + [121.689453, 31.322463], + [121.698862, 31.317176], + [121.712432, 31.30941], + [121.722513, 31.303514], + [121.729099, 31.298287], + [121.743748, 31.283202], + [121.809814, 31.196909], + [121.853365, 31.155347], + [121.86316, 31.147402], + [121.884036, 31.13064], + [121.889459, 31.121706], + [121.946794, 31.065888], + [121.962675, 31.047288], + [121.977555, 31.016103], + [121.990932, 30.968427], + [121.996232, 30.935457], + [121.998493, 30.899961], + [121.996985, 30.874903], + [121.993954, 30.863059], + [121.985368, 30.850696], + [121.970734, 30.839074], + [121.954715, 30.825817], + [121.954332, 30.821411], + [121.955471, 30.817133], + [121.969709, 30.789198], + [121.943682, 30.777097], + [121.924604, 30.806606], + [121.915287, 30.812894], + [121.904464, 30.814152], + [121.793767, 30.816863], + [121.779138, 30.817218], + [121.727069, 30.817719], + [121.681192, 30.818403], + [121.648424, 30.816202], + [121.601328, 30.805082], + [121.55283, 30.7894], + [121.517203, 30.775392], + [121.482853, 30.758373], + [121.478769, 30.756343], + [121.426361, 30.730284], + [121.406995, 30.718082], + [121.361894, 30.679523], + [121.354336, 30.676992], + [121.346646, 30.675593], + [121.326714, 30.675933], + [121.291036, 30.67833], + [121.274652, 30.677396], + [121.272915, 30.688299], + [121.272411, 30.693271], + [121.271603, 30.696891], + [121.271435, 30.697181], + [121.271295, 30.697378], + [121.270421, 30.698071], + [121.27037, 30.69851], + [121.270831, 30.699164], + [121.270909, 30.699781], + [121.270448, 30.700514], + [121.271028, 30.701023], + [121.270666, 30.701567], + [121.268654, 30.702134], + [121.268407, 30.70298], + [121.268442, 30.704057], + [121.26779, 30.704673], + [121.26779, 30.705099], + [121.268025, 30.706099], + [121.267478, 30.706486], + [121.267209, 30.706214], + [121.26667, 30.706292], + [121.266557, 30.707332], + [121.266288, 30.708335], + [121.265862, 30.70949], + [121.266983, 30.711225], + [121.267416, 30.711694], + [121.268443, 30.712151], + [121.267061, 30.71504], + [121.268599, 30.715888], + [121.269598, 30.716698], + [121.270337, 30.716892], + [121.270024, 30.719473], + [121.270102, 30.720474], + [121.270876, 30.721478], + [121.271379, 30.721517], + [121.272031, 30.72325], + [121.271762, 30.724253], + [121.270337, 30.72587], + [121.271449, 30.726257], + [121.271449, 30.72695], + [121.269643, 30.726949], + [121.269643, 30.727489], + [121.271067, 30.727914], + [121.270372, 30.729763], + [121.269756, 30.730108], + [121.269756, 30.730724], + [121.27145, 30.732267], + [121.27145, 30.73273], + [121.27026, 30.732653], + [121.269599, 30.733462], + [121.268175, 30.734925], + [121.267176, 30.734577], + [121.266829, 30.733497], + [121.265726, 30.734236], + [121.263598, 30.736362], + [121.261349, 30.738218], + [121.259803, 30.739959], + [121.258023, 30.742319], + [121.2564, 30.743945], + [121.254307, 30.745106], + [121.248587, 30.747661], + [121.24476, 30.749181], + [121.243102, 30.750531], + [121.242018, 30.749799], + [121.241133, 30.750338], + [121.241679, 30.751072], + [121.239632, 30.752035], + [121.238946, 30.751536], + [121.238331, 30.751805], + [121.238331, 30.752344], + [121.237289, 30.752652], + [121.236361, 30.751845], + [121.23552, 30.752269], + [121.236482, 30.75381], + [121.235034, 30.754508], + [121.232302, 30.755815], + [121.23199, 30.756397], + [121.231643, 30.75782], + [121.230975, 30.760897], + [121.230681, 30.763739], + [121.229666, 30.766296], + [121.22912, 30.767979], + [121.228391, 30.769198], + [121.226917, 30.770826], + [121.227819, 30.772006], + [121.227395, 30.772547], + [121.226206, 30.772972], + [121.226241, 30.774359], + [121.226207, 30.775091], + [121.225591, 30.776594], + [121.224629, 30.776982], + [121.223397, 30.77598], + [121.222123, 30.777119], + [121.221282, 30.779094], + [121.220302, 30.780459], + [121.219609, 30.782144], + [121.218681, 30.783624], + [121.217988, 30.78496], + [121.216913, 30.78563], + [121.213723, 30.785924], + [121.20958, 30.785873], + [121.205533, 30.785907], + [121.203626, 30.784909], + [121.201053, 30.783989], + [121.200091, 30.783297], + [121.200091, 30.782564], + [121.200169, 30.781793], + [121.199172, 30.780754], + [121.199207, 30.779176], + [121.200125, 30.776245], + [121.200324, 30.773624], + [121.198279, 30.773897], + [121.196953, 30.773354], + [121.195853, 30.774431], + [121.193687, 30.776495], + [121.192873, 30.777686], + [121.191833, 30.778848], + [121.191166, 30.780127], + [121.190967, 30.781086], + [121.190621, 30.780767], + [121.190127, 30.780216], + [121.189919, 30.779548], + [121.18952, 30.778969], + [121.189078, 30.778942], + [121.187805, 30.779552], + [121.187112, 30.779494], + [121.186358, 30.779033], + [121.186159, 30.778626], + [121.186133, 30.777466], + [121.185786, 30.776655], + [121.184859, 30.775842], + [121.183438, 30.775033], + [121.183005, 30.775179], + [121.182364, 30.775007], + [121.181065, 30.774399], + [121.179964, 30.774373], + [121.178743, 30.773593], + [121.177002, 30.772882], + [121.174671, 30.772014], + [121.174472, 30.772848], + [121.173563, 30.773642], + [121.172263, 30.774201], + [121.170989, 30.774678], + [121.170834, 30.775234], + [121.171076, 30.775788], + [121.17099, 30.776105], + [121.170912, 30.776622], + [121.170791, 30.777089], + [121.169803, 30.776945], + [121.169396, 30.776191], + [121.168963, 30.775959], + [121.168096, 30.775787], + [121.166562, 30.775588], + [121.165514, 30.775212], + [121.163435, 30.775274], + [121.162707, 30.774665], + [121.16152, 30.773536], + [121.160741, 30.773219], + [121.16068, 30.776584], + [121.160247, 30.776789], + [121.159147, 30.776878], + [121.158454, 30.777227], + [121.157527, 30.777634], + [121.156712, 30.777375], + [121.15582, 30.777203], + [121.154485, 30.777813], + [121.152692, 30.778978], + [121.151071, 30.779011], + [121.148836, 30.779158], + [121.14783, 30.779479], + [121.145742, 30.779395], + [121.144121, 30.779484], + [121.143705, 30.779064], + [121.143419, 30.778196], + [121.142708, 30.778019], + [121.141486, 30.777775], + [121.141018, 30.777417], + [121.140619, 30.776927], + [121.139527, 30.777287], + [121.138704, 30.777599], + [121.138704, 30.778426], + [121.137473, 30.778271], + [121.136762, 30.777825], + [121.136025, 30.777335], + [121.135097, 30.77718], + [121.13182, 30.777318], + [121.130927, 30.777586], + [121.12973, 30.7781], + [121.128924, 30.77837], + [121.128119, 30.778513], + [121.127523, 30.778677], + [121.126298, 30.778752], + [121.123426, 30.778949], + [121.122997, 30.779016], + [121.12279, 30.779177], + [121.122609, 30.779834], + [121.122321, 30.780358], + [121.121812, 30.781052], + [121.121026, 30.78209], + [121.120359, 30.782984], + [121.119895, 30.783509], + [121.119431, 30.783843], + [121.118098, 30.784559], + [121.117764, 30.784822], + [121.117371, 30.785287], + [121.117264, 30.785477], + [121.117216, 30.786074], + [121.117467, 30.786658], + [121.117812, 30.787158], + [121.118038, 30.787432], + [121.118336, 30.787694], + [121.118872, 30.788087], + [121.119514, 30.788384], + [121.120038, 30.788551], + [121.120431, 30.788563], + [121.121157, 30.788526], + [121.123086, 30.788131], + [121.124455, 30.788094], + [121.125252, 30.788177], + [121.125835, 30.788367], + [121.126288, 30.788581], + [121.126573, 30.788998], + [121.126668, 30.789499], + [121.126621, 30.790226], + [121.126526, 30.790679], + [121.126128, 30.792098], + [121.126056, 30.792598], + [121.126044, 30.793039], + [121.126116, 30.793421], + [121.12639, 30.794255], + [121.126569, 30.794828], + [121.126602, 30.795002], + [121.126622, 30.79521], + [121.126656, 30.795774], + [121.126656, 30.796196], + [121.126603, 30.79753], + [121.126609, 30.797973], + [121.126649, 30.798402], + [121.127078, 30.800165], + [121.127118, 30.800486], + [121.127152, 30.800802], + [121.127118, 30.801854], + [121.127139, 30.802699], + [121.127246, 30.803551], + [121.127406, 30.804308], + [121.127587, 30.805514], + [121.128237, 30.807183], + [121.128257, 30.807706], + [121.128204, 30.809148], + [121.128123, 30.809966], + [121.128143, 30.81008], + [121.128204, 30.810227], + [121.128424, 30.810468], + [121.12894, 30.811065], + [121.129067, 30.811259], + [121.129214, 30.811467], + [121.129306, 30.811709], + [121.129436, 30.812257], + [121.129471, 30.81239], + [121.129556, 30.812721], + [121.129794, 30.814021], + [121.129985, 30.814824], + [121.130104, 30.815197], + [121.130222, 30.815579], + [121.130392, 30.815843], + [121.130774, 30.816038], + [121.131104, 30.816207], + [121.13152, 30.816546], + [121.131706, 30.816843], + [121.131957, 30.817697], + [121.132372, 30.819285], + [121.133136, 30.819964], + [121.133674, 30.820434], + [121.134547, 30.821334], + [121.134887, 30.821945], + [121.135154, 30.822365], + [121.136163, 30.82385], + [121.136485, 30.824291], + [121.136799, 30.824614], + [121.137044, 30.824767], + [121.137251, 30.824817], + [121.137416, 30.825031], + [121.13765, 30.826231], + [121.13726, 30.827391], + [121.137191, 30.828785], + [121.137416, 30.829984], + [121.137104, 30.830327], + [121.136515, 30.829972], + [121.136393, 30.829416], + [121.136237, 30.82787], + [121.134261, 30.828507], + [121.134061, 30.830331], + [121.133827, 30.831046], + [121.132917, 30.831603], + [121.134617, 30.833027], + [121.133386, 30.834457], + [121.13212, 30.835766], + [121.131608, 30.836006], + [121.129987, 30.834896], + [121.129111, 30.835374], + [121.127689, 30.835651], + [121.125391, 30.835814], + [121.123057, 30.836053], + [121.120637, 30.836333], + [121.120524, 30.835818], + [121.119371, 30.836136], + [121.119015, 30.835024], + [121.117748, 30.835303], + [121.119839, 30.837732], + [121.120221, 30.839093], + [121.120048, 30.841093], + [121.120048, 30.842745], + [121.120248, 30.843297], + [121.123544, 30.847263], + [121.122156, 30.847931], + [121.122156, 30.84822], + [121.122677, 30.848858], + [121.122365, 30.849408], + [121.121723, 30.849988], + [121.12115, 30.850162], + [121.120803, 30.849873], + [121.120049, 30.84912], + [121.114748, 30.851471], + [121.113446, 30.852601], + [121.113681, 30.852861], + [121.113707, 30.853298], + [121.113386, 30.85376], + [121.11316, 30.854051], + [121.112665, 30.853993], + [121.112171, 30.853615], + [121.112292, 30.853385], + [121.112579, 30.853007], + [121.112084, 30.852892], + [121.111537, 30.852545], + [121.110903, 30.851414], + [121.108352, 30.850605], + [121.104793, 30.849329], + [121.103916, 30.850488], + [121.102267, 30.850256], + [121.101607, 30.850807], + [121.100096, 30.851762], + [121.099514, 30.852546], + [121.099809, 30.852953], + [121.10027, 30.853589], + [121.100122, 30.853908], + [121.099428, 30.85411], + [121.098594, 30.853647], + [121.097691, 30.854921], + [121.098359, 30.855588], + [121.098212, 30.855877], + [121.097578, 30.856137], + [121.097543, 30.856574], + [121.097717, 30.857097], + [121.097343, 30.856929], + [121.097164, 30.856844], + [121.09468, 30.855656], + [121.091107, 30.853814], + [121.087254, 30.852037], + [121.085457, 30.851081], + [121.084015, 30.850279], + [121.081278, 30.849083], + [121.080475, 30.848741], + [121.079884, 30.848741], + [121.078179, 30.848924], + [121.073572, 30.84892], + [121.072021, 30.848895], + [121.071261, 30.848682], + [121.068183, 30.848633], + [121.066998, 30.848772], + [121.066286, 30.848461], + [121.063971, 30.847225], + [121.060526, 30.845181], + [121.061669, 30.843381], + [121.060224, 30.842798], + [121.060973, 30.841293], + [121.061007, 30.840133], + [121.061468, 30.838571], + [121.062051, 30.837788], + [121.056334, 30.835603], + [121.051077, 30.83287], + [121.046751, 30.831092], + [121.048892, 30.825185], + [121.04669, 30.825219], + [121.045105, 30.825912], + [121.044252, 30.826878], + [121.043512, 30.828153], + [121.042946, 30.828098], + [121.041954, 30.827893], + [121.040822, 30.827513], + [121.039951, 30.827222], + [121.03989, 30.826816], + [121.040186, 30.826528], + [121.041109, 30.826007], + [121.041753, 30.825372], + [121.041718, 30.824851], + [121.04137, 30.824502], + [121.040734, 30.82447], + [121.040273, 30.824382], + [121.040212, 30.824035], + [121.04036, 30.823455], + [121.039924, 30.823107], + [121.039336, 30.822621], + [121.039219, 30.821744], + [121.039193, 30.820873], + [121.037686, 30.820261], + [121.037974, 30.819363], + [121.038644, 30.818698], + [121.039079, 30.818584], + [121.040098, 30.818791], + [121.041082, 30.819197], + [121.041492, 30.819864], + [121.04076, 30.821602], + [121.041318, 30.821545], + [121.041579, 30.821198], + [121.042301, 30.819693], + [121.043755, 30.820016], + [121.044974, 30.815526], + [121.040516, 30.814492], + [121.037912, 30.813887], + [121.037876, 30.814345], + [121.037741, 30.814498], + [121.037511, 30.814756], + [121.037279, 30.815355], + [121.036408, 30.817245], + [121.036176, 30.817959], + [121.036311, 30.818211], + [121.036641, 30.818444], + [121.035808, 30.82018], + [121.035382, 30.820546], + [121.035072, 30.820931], + [121.03331, 30.823882], + [121.030056, 30.828548], + [121.029503, 30.828959], + [121.028151, 30.829118], + [121.024963, 30.83054], + [121.019806, 30.832306], + [121.014875, 30.833957], + [121.014405, 30.835814], + [121.013159, 30.835435], + [121.011617, 30.834907], + [121.010894, 30.834616], + [121.006938, 30.830778], + [121.004786, 30.827847], + [121.003418, 30.828711], + [121.003218, 30.828304], + [121.004002, 30.82764], + [121.004324, 30.826859], + [121.003914, 30.826539], + [121.003444, 30.826305], + [121.003095, 30.826449], + [121.001614, 30.82772], + [121.001911, 30.828765], + [121.001327, 30.829371], + [121.000543, 30.829428], + [120.999724, 30.828845], + [120.998478, 30.828231], + [120.997755, 30.827041], + [120.998278, 30.826696], + [120.996212, 30.824082], + [120.995193, 30.824398], + [120.994958, 30.823789], + [120.995716, 30.823385], + [120.99589, 30.822951], + [120.994609, 30.821497], + [120.993625, 30.821438], + [120.992057, 30.822187], + [120.990924, 30.822704], + [120.990889, 30.823312], + [120.991151, 30.823893], + [120.992754, 30.825693], + [120.992754, 30.82613], + [120.992492, 30.826418], + [120.991012, 30.827282], + [120.99008, 30.827831], + [120.989148, 30.828696], + [120.992458, 30.831574], + [120.990777, 30.832121], + [120.989122, 30.832318], + [120.98947, 30.833711], + [120.989993, 30.834727], + [120.991319, 30.836118], + [120.991773, 30.837218], + [120.992238, 30.837901], + [120.992863, 30.838395], + [120.993444, 30.838513], + [120.995113, 30.8387], + [120.995656, 30.838569], + [120.996179, 30.840627], + [120.997111, 30.840689], + [120.996649, 30.841354], + [120.996911, 30.842282], + [120.997756, 30.84408], + [120.999899, 30.843333], + [121.00037, 30.844292], + [121.00098, 30.845627], + [121.001651, 30.846266], + [121.002261, 30.846385], + [121.00301, 30.845835], + [121.003977, 30.846099], + [121.004814, 30.84697], + [121.005545, 30.847988], + [121.006469, 30.850453], + [121.008011, 30.850573], + [121.008595, 30.851272], + [121.009614, 30.852693], + [121.010137, 30.853131], + [121.010573, 30.852959], + [121.011592, 30.852236], + [121.013361, 30.85169], + [121.015016, 30.853608], + [121.010983, 30.85603], + [121.012812, 30.858181], + [121.012255, 30.85902], + [121.012516, 30.859396], + [121.013274, 30.859516], + [121.014268, 30.858939], + [121.0154, 30.860536], + [121.014442, 30.861169], + [121.016271, 30.862856], + [121.013971, 30.864386], + [121.016211, 30.867231], + [121.016969, 30.867292], + [121.017779, 30.869381], + [121.014821, 30.871026], + [121.017782, 30.873359], + [121.020462, 30.871877], + [121.021508, 30.872885], + [121.019801, 30.874001], + [121.020463, 30.874698], + [121.021081, 30.874237], + [121.021891, 30.875166], + [121.019418, 30.876666], + [121.019958, 30.878097], + [121.021273, 30.878101], + [121.021465, 30.878796], + [121.020193, 30.879489], + [121.019496, 30.879989], + [121.018599, 30.88072], + [121.017981, 30.881799], + [121.017475, 30.882725], + [121.015654, 30.882489], + [121.012283, 30.882247], + [121.011089, 30.882219], + [121.009922, 30.882472], + [121.008293, 30.882969], + [121.007944, 30.883431], + [121.007901, 30.884049], + [121.007927, 30.884686], + [121.008877, 30.886237], + [121.009077, 30.887136], + [121.008903, 30.887746], + [121.008519, 30.888126], + [121.007223, 30.888472], + [121.005012, 30.888794], + [120.993819, 30.889664], + [120.993421, 30.889722], + [120.993143, 30.889999], + [120.992951, 30.890792], + [120.992922, 30.893301], + [120.9929, 30.893914], + [120.992508, 30.894337], + [120.99184, 30.894712], + [120.990505, 30.895391], + [120.990405, 30.895558], + [120.990461, 30.895792], + [120.992341, 30.899112], + [120.992576, 30.899458], + [120.992654, 30.899737], + [120.992676, 30.901824], + [120.992811, 30.902159], + [120.993538, 30.902764], + [120.994154, 30.903278], + [120.995094, 30.903627], + [120.995721, 30.903718], + [120.996427, 30.903566], + [120.998632, 30.903388], + [120.998711, 30.905944], + [121.000044, 30.905414], + [121.001847, 30.904922], + [121.00257, 30.904848], + [121.003224, 30.905804], + [121.003608, 30.907064], + [121.004522, 30.906954], + [121.004574, 30.909301], + [121.003704, 30.909531], + [121.002013, 30.90996], + [121.000584, 30.909984], + [120.999364, 30.90975], + [120.998976, 30.909533], + [120.999008, 30.910395], + [120.999139, 30.910833], + [120.999089, 30.911207], + [120.998696, 30.911401], + [120.99913, 30.912586], + [120.999382, 30.912893], + [120.999469, 30.913262], + [120.999626, 30.913955], + [120.999583, 30.914502], + [120.999566, 30.915451], + [120.999679, 30.918267], + [120.999837, 30.927812], + [121.000029, 30.9347], + [121.000273, 30.93654], + [121.000822, 30.937731], + [121.000386, 30.938195], + [120.999019, 30.939292], + [120.997477, 30.941146], + [120.996484, 30.94271], + [120.995673, 30.944332], + [120.996815, 30.944622], + [120.996728, 30.950309], + [120.995369, 30.950366], + [120.994794, 30.954824], + [120.992529, 30.955026], + [120.991684, 30.958215], + [120.99476, 30.958698], + [120.9926, 30.962834], + [120.993697, 30.964023], + [120.99321, 30.964532], + [120.993671, 30.965137], + [120.993184, 30.966299], + [120.992112, 30.966053], + [120.991433, 30.968377], + [120.992452, 30.968671], + [120.991851, 30.97051], + [120.993114, 30.970733], + [120.993141, 30.972114], + [120.995649, 30.972048], + [120.996702, 30.97229], + [120.996748, 30.972317], + [120.996785, 30.97233], + [120.996841, 30.972344], + [120.996918, 30.972352], + [120.99698, 30.972353], + [120.997366, 30.972442], + [120.997497, 30.973185], + [120.999117, 30.972931], + [120.999344, 30.973868], + [121.000511, 30.973937], + [121.000511, 30.974873], + [121.000869, 30.975682], + [121.000573, 30.977005], + [121.002359, 30.977625], + [121.002002, 30.979498], + [121.00113, 30.979591], + [121.000834, 30.980463], + [120.999344, 30.980102], + [120.998604, 30.982265], + [120.998282, 30.983204], + [120.998456, 30.984067], + [120.997132, 30.989231], + [120.996209, 30.989228], + [120.99512, 30.990601], + [120.994597, 30.991922], + [120.995347, 30.992728], + [120.994833, 30.995254], + [120.990511, 30.994551], + [120.989841, 30.996668], + [120.992045, 30.997109], + [120.991749, 31.000426], + [120.991619, 31.001296], + [120.990651, 31.001584], + [120.990538, 31.003254], + [120.992089, 31.003419], + [120.991497, 31.005165], + [120.992089, 31.005286], + [120.991053, 31.00747], + [120.991933, 31.00815], + [120.989981, 31.010489], + [120.989058, 31.012912], + [120.990417, 31.013811], + [120.98952, 31.014394], + [120.988326, 31.014419], + [120.987455, 31.01418], + [120.986462, 31.014133], + [120.98492, 31.014535], + [120.983858, 31.014447], + [120.983152, 31.015103], + [120.982987, 31.016087], + [120.977978, 31.016337], + [120.972962, 31.016324], + [120.970202, 31.016152], + [120.967676, 31.016211], + [120.965126, 31.016304], + [120.963202, 31.016597], + [120.962862, 31.017558], + [120.964856, 31.019747], + [120.96429, 31.020766], + [120.961443, 31.021198], + [120.960477, 31.021665], + [120.959476, 31.024269], + [120.958302, 31.02857], + [120.9559, 31.029472], + [120.954812, 31.030056], + [120.95402, 31.030172], + [120.953106, 31.029994], + [120.952201, 31.030257], + [120.951087, 31.029083], + [120.950026, 31.029549], + [120.949121, 31.029958], + [120.948181, 31.028434], + [120.949443, 31.027733], + [120.948738, 31.025067], + [120.951174, 31.024017], + [120.949973, 31.017633], + [120.936308, 31.017111], + [120.935542, 31.016526], + [120.935751, 31.015384], + [120.94009, 31.010031], + [120.939794, 31.009388], + [120.93809, 31.009003], + [120.933786, 31.010023], + [120.93229, 31.010841], + [120.931377, 31.011776], + [120.929126, 31.011481], + [120.926988, 31.012065], + [120.926162, 31.010424], + [120.918108, 31.01279], + [120.91697, 31.012761], + [120.91102, 31.010561], + [120.909944, 31.012641], + [120.910022, 31.015601], + [120.910057, 31.016945], + [120.901922, 31.017473], + [120.901358, 31.017499], + [120.901054, 31.018632], + [120.90056, 31.020428], + [120.900985, 31.022458], + [120.901342, 31.025505], + [120.901411, 31.027466], + [120.901507, 31.033487], + [120.901976, 31.037643], + [120.901456, 31.038753], + [120.899737, 31.039602], + [120.897021, 31.045579], + [120.897212, 31.048223], + [120.896483, 31.049025], + [120.895442, 31.050326], + [120.894566, 31.053892], + [120.894619, 31.05866], + [120.895912, 31.063076], + [120.897613, 31.066995], + [120.898863, 31.070514], + [120.899575, 31.075093], + [120.899601, 31.076628], + [120.899341, 31.077497], + [120.899619, 31.078361], + [120.900608, 31.078443], + [120.901832, 31.078115], + [120.903403, 31.078067], + [120.904618, 31.078523], + [120.905026, 31.079387], + [120.904723, 31.080497], + [120.90283, 31.082716], + [120.902023, 31.083398], + [120.901676, 31.084093], + [120.902023, 31.084992], + [120.90211, 31.085659], + [120.900461, 31.086703], + [120.899298, 31.086936], + [120.897762, 31.086676], + [120.896695, 31.086646], + [120.896322, 31.087721], + [120.896088, 31.089432], + [120.895419, 31.090707], + [120.893858, 31.091404], + [120.892696, 31.092825], + [120.892175, 31.094189], + [120.892782, 31.095841], + [120.892843, 31.096538], + [120.892349, 31.097494], + [120.891221, 31.097175], + [120.890961, 31.095784], + [120.891021, 31.094305], + [120.890266, 31.093986], + [120.887482, 31.094075], + [120.882391, 31.095182], + [120.878628, 31.095418], + [120.878082, 31.095758], + [120.878238, 31.096211], + [120.878966, 31.098384], + [120.87601, 31.097862], + [120.876634, 31.099942], + [120.873886, 31.100449], + [120.873175, 31.100317], + [120.872542, 31.098887], + [120.871433, 31.099312], + [120.869812, 31.098942], + [120.869578, 31.097221], + [120.865747, 31.097624], + [120.864499, 31.098368], + [120.863996, 31.100303], + [120.862757, 31.100119], + [120.862064, 31.101049], + [120.859768, 31.100284], + [120.858554, 31.100842], + [120.856804, 31.102831], + [120.856856, 31.103895], + [120.856909, 31.104979], + [120.858079, 31.107654], + [120.857914, 31.108523], + [120.858858, 31.108697], + [120.860219, 31.109325], + [120.861371, 31.110895], + [120.862247, 31.112503], + [120.863235, 31.113263], + [120.864015, 31.113842], + [120.86502, 31.114142], + [120.865965, 31.114746], + [120.868713, 31.117263], + [120.870593, 31.119712], + [120.871018, 31.121529], + [120.871018, 31.123803], + [120.871548, 31.125691], + [120.872345, 31.127158], + [120.873394, 31.128031], + [120.87479, 31.129463], + [120.876429, 31.131489], + [120.877686, 31.132397], + [120.878744, 31.133379], + [120.880357, 31.134151], + [120.881293, 31.134721], + [120.898009, 31.135921], + [120.899215, 31.136053], + [120.905395, 31.134205], + [120.906402, 31.134272], + [120.908382, 31.134676], + [120.912619, 31.135415], + [120.916919, 31.13619], + [120.921628, 31.138008], + [120.930336, 31.14141], + [120.952645, 31.138253], + [120.974469, 31.133634], + [120.983911, 31.13171], + [120.985697, 31.13185], + [120.991255, 31.133177], + [121.007268, 31.133425], + [121.017043, 31.133993], + [121.018489, 31.134097], + [121.0193, 31.134571], + [121.022811, 31.138311], + [121.022271, 31.140462], + [121.022907, 31.140932], + [121.025677, 31.140773], + [121.026243, 31.142084], + [121.026618, 31.142624], + [121.027192, 31.14266], + [121.026723, 31.143766], + [121.028368, 31.143873], + [121.028804, 31.142463], + [121.028473, 31.141958], + [121.028778, 31.141253], + [121.031164, 31.141661], + [121.033089, 31.142205], + [121.033594, 31.141601], + [121.034169, 31.141166], + [121.03612, 31.140331], + [121.036259, 31.137373], + [121.037234, 31.137478], + [121.038105, 31.137849], + [121.038645, 31.136911], + [121.040769, 31.137587], + [121.041814, 31.138901], + [121.042824, 31.141088], + [121.044775, 31.145529], + [121.04353, 31.146466], + [121.04239, 31.146396], + [121.041545, 31.146932], + [121.041476, 31.149822], + [121.043435, 31.150632], + [121.045254, 31.151577], + [121.04542, 31.154031], + [121.049129, 31.15461], + [121.050104, 31.151992], + [121.050269, 31.150715], + [121.051888, 31.150484], + [121.053837, 31.150858], + [121.05583, 31.15066], + [121.055656, 31.151802], + [121.057379, 31.15278], + [121.060407, 31.15302], + [121.062556, 31.153126], + [121.062696, 31.152119], + [121.06407, 31.152154], + [121.064139, 31.150842], + [121.066062, 31.150948], + [121.066097, 31.149973], + [121.065418, 31.149401], + [121.065722, 31.148596], + [121.068445, 31.148263], + [121.069123, 31.148701], + [121.068949, 31.149497], + [121.067776, 31.152294], + [121.06848, 31.152966], + [121.070906, 31.153508], + [121.070567, 31.155121], + [121.071411, 31.155424], + [121.072046, 31.15351], + [121.073028, 31.153848], + [121.072559, 31.155595], + [121.073029, 31.156267], + [121.073629, 31.156469], + [121.073837, 31.157075], + [121.077028, 31.158456], + [121.076054, 31.160539], + [121.077063, 31.160708], + [121.077133, 31.161884], + [121.076794, 31.162622], + [121.073699, 31.161711], + [121.073125, 31.163256], + [121.077368, 31.164538], + [121.077298, 31.166017], + [121.075468, 31.170317], + [121.072386, 31.169606], + [121.071917, 31.170513], + [121.072117, 31.171254], + [121.07276, 31.171624], + [121.072526, 31.172698], + [121.07543, 31.173444], + [121.07423, 31.176224], + [121.071404, 31.179475], + [121.071222, 31.181466], + [121.075587, 31.18285], + [121.074988, 31.184385], + [121.069474, 31.182892], + [121.068752, 31.184895], + [121.070857, 31.185614], + [121.071683, 31.185959], + [121.071736, 31.186821], + [121.071509, 31.187702], + [121.071466, 31.188434], + [121.070344, 31.188738], + [121.070344, 31.189863], + [121.070892, 31.190409], + [121.070614, 31.191294], + [121.071849, 31.191431], + [121.072562, 31.191533], + [121.072188, 31.193168], + [121.07011, 31.193608], + [121.069597, 31.195309], + [121.066796, 31.194964], + [121.066605, 31.197187], + [121.066811, 31.197142], + [121.068284, 31.196699], + [121.069214, 31.196519], + [121.068826, 31.198609], + [121.06861, 31.199254], + [121.068106, 31.200481], + [121.067809, 31.200999], + [121.067445, 31.202762], + [121.067276, 31.203579], + [121.067049, 31.204794], + [121.066568, 31.207131], + [121.06619, 31.20851], + [121.066037, 31.209382], + [121.065893, 31.210124], + [121.065776, 31.210914], + [121.065614, 31.211873], + [121.065398, 31.212463], + [121.065259, 31.213396], + [121.065146, 31.213979], + [121.064974, 31.214317], + [121.064983, 31.214753], + [121.064891, 31.215194], + [121.064754, 31.215541], + [121.064491, 31.216279], + [121.064459, 31.216703], + [121.064334, 31.217398], + [121.06414, 31.218273], + [121.063885, 31.219287], + [121.063764, 31.219807], + [121.063618, 31.220652], + [121.063436, 31.221401], + [121.063379, 31.221906], + [121.06338, 31.222559], + [121.063418, 31.222949], + [121.063296, 31.223081], + [121.063079, 31.223322], + [121.063181, 31.223721], + [121.063191, 31.223899], + [121.06278, 31.224161], + [121.062631, 31.224665], + [121.062785, 31.225262], + [121.062938, 31.225914], + [121.062889, 31.226008], + [121.062806, 31.226965], + [121.06472, 31.227274], + [121.065024, 31.228636], + [121.064651, 31.230781], + [121.065782, 31.231191], + [121.067173, 31.230922], + [121.067382, 31.231942], + [121.067382, 31.23293], + [121.064581, 31.23296], + [121.064555, 31.234152], + [121.063668, 31.234151], + [121.063729, 31.235139], + [121.062607, 31.234694], + [121.061998, 31.235238], + [121.061963, 31.236156], + [121.061241, 31.237822], + [121.062059, 31.238097], + [121.063903, 31.238441], + [121.064112, 31.239462], + [121.063564, 31.240994], + [121.063564, 31.242219], + [121.064721, 31.242153], + [121.065061, 31.243141], + [121.064173, 31.243583], + [121.064147, 31.245011], + [121.064347, 31.246136], + [121.063156, 31.246543], + [121.062268, 31.246372], + [121.061651, 31.245246], + [121.061498, 31.245266], + [121.061334, 31.245329], + [121.061253, 31.245352], + [121.061177, 31.245361], + [121.061083, 31.245362], + [121.060826, 31.245353], + [121.060354, 31.245415], + [121.059806, 31.245909], + [121.058771, 31.246398], + [121.058303, 31.246151], + [121.057677, 31.246754], + [121.058144, 31.247044], + [121.05911, 31.247239], + [121.059684, 31.246732], + [121.060981, 31.246489], + [121.060812, 31.248217], + [121.061512, 31.249781], + [121.061895, 31.252969], + [121.061912, 31.255157], + [121.061303, 31.255139], + [121.061234, 31.255699], + [121.062086, 31.256032], + [121.062156, 31.257118], + [121.062652, 31.257699], + [121.061947, 31.257943], + [121.062374, 31.262566], + [121.062931, 31.266664], + [121.06227, 31.266714], + [121.062462, 31.267451], + [121.063244, 31.267906], + [121.066689, 31.267947], + [121.068698, 31.268097], + [121.070438, 31.26853], + [121.072734, 31.269145], + [121.076638, 31.269721], + [121.079176, 31.269883], + [121.080419, 31.270157], + [121.082149, 31.271538], + [121.082975, 31.272856], + [121.084548, 31.275708], + [121.081359, 31.277259], + [121.082419, 31.280921], + [121.084697, 31.287601], + [121.086974, 31.29016], + [121.08733, 31.290658], + [121.086904, 31.291723], + [121.08879, 31.292081], + [121.090137, 31.291903], + [121.091665, 31.290235], + [121.092195, 31.289204], + [121.093585, 31.289879], + [121.09309, 31.28821], + [121.094262, 31.288317], + [121.0954, 31.287004], + [121.096572, 31.283237], + [121.097371, 31.280569], + [121.097858, 31.279673], + [121.098361, 31.278843], + [121.098057, 31.27738], + [121.098804, 31.276251], + [121.101547, 31.275142], + [121.103179, 31.274107], + [121.105445, 31.273651], + [121.10581, 31.27504], + [121.103848, 31.274751], + [121.103822, 31.275327], + [121.106669, 31.276707], + [121.108032, 31.278001], + [121.109534, 31.279783], + [121.111114, 31.281741], + [121.112476, 31.28293], + [121.113943, 31.284432], + [121.114993, 31.285271], + [121.116355, 31.285655], + [121.117717, 31.285689], + [121.127142, 31.281673], + [121.12721, 31.281207], + [121.131051, 31.280107], + [121.13168, 31.281365], + [121.133888, 31.280424], + [121.134186, 31.280258], + [121.133689, 31.278889], + [121.135171, 31.278362], + [121.135861, 31.279641], + [121.138032, 31.278748], + [121.137601, 31.277596], + [121.138377, 31.277307], + [121.138712, 31.276711], + [121.139397, 31.276878], + [121.140528, 31.276495], + [121.141157, 31.276738], + [121.141401, 31.277773], + [121.142881, 31.277662], + [121.142997, 31.275468], + [121.145212, 31.275292], + [121.148297, 31.275376], + ], + ], + ], + }, + }, + ], +}; + +export default multiPolygon; diff --git a/packages/source/__tests__/parser/geojson.spec.ts b/packages/source/__tests__/parser/geojson.spec.ts index df84f5c0cd..536b1d68bf 100644 --- a/packages/source/__tests__/parser/geojson.spec.ts +++ b/packages/source/__tests__/parser/geojson.spec.ts @@ -1,22 +1,19 @@ import geojson from '../../src/parser/geojson'; +import multiLine from '../data/multiLine'; +import multiPolygon from '../data/multipolygon'; import polygon from '../data/polygon'; - describe('parser.geojson', () => { it('parser json', () => { const result = geojson(polygon); expect(result.dataArray.length).toEqual(3); }); - it('parser json hash id ', () => { - const result = geojson(polygon, { - idField: 'name', - }); - expect(result.dataArray.length).toEqual(3); - if (result.featureKeys) { - expect(Object.keys(result.featureKeys)).toEqual([ - '408534', - '410464', - '431974', - ]); - } + it('parser multiPolygon', () => { + const result = geojson(multiPolygon); + expect(result.dataArray.length).toEqual(11); + expect(result.dataArray[0]._id).toEqual(0); + }); + it('parset multiLine', () => { + const result = geojson(multiLine); + expect(result.dataArray.length).toEqual(2); }); }); diff --git a/packages/source/src/parser/geojson.ts b/packages/source/src/parser/geojson.ts index 22cd1b76b7..bf050352be 100644 --- a/packages/source/src/parser/geojson.ts +++ b/packages/source/src/parser/geojson.ts @@ -1,4 +1,3 @@ -import { djb2hash } from '@antv/l7-utils'; // @ts-ignore import rewind from '@mapbox/geojson-rewind'; import { @@ -36,33 +35,30 @@ export default function geoJSON( ); }); // 数据为空时处理 - let i = 0; + const i = 0; // multi polygon 拆分 turfMeta.flattenEach( data, (currentFeature: Feature, featureIndex: number) => { const coord = getCoords(currentFeature); - let id = featureIndex; - // 瓦片数据通过字段hash建立索引 - if ( - cfg && - cfg.idField && - currentFeature.properties && - currentFeature.properties[cfg.idField] - ) { - const value = currentFeature.properties[cfg.idField]; - id = djb2hash(value) % 1000019; - featureKeys[id] = { - index: i++, - idField: value, + const id = featureIndex; + if (currentFeature.geometry.type === 'Polygon') { + coord.forEach((coor) => { + const dataItem = { + ...currentFeature.properties, + coordinates: [coor], + _id: id, + }; + resultData.push(dataItem); + }); + } else { + const dataItem: IParseDataItem = { + ...currentFeature.properties, + coordinates: coord, + _id: id, }; + resultData.push(dataItem); } - const dataItem: IParseDataItem = { - ...currentFeature.properties, - coordinates: coord, - _id: id, - }; - resultData.push(dataItem); }, ); return { diff --git a/stories/Layers/components/Polygon3D.tsx b/stories/Layers/components/Polygon3D.tsx index e4f5d5cb62..c607d07515 100644 --- a/stories/Layers/components/Polygon3D.tsx +++ b/stories/Layers/components/Polygon3D.tsx @@ -25,16 +25,16 @@ export default class Polygon3D extends React.Component { public async componentDidMount() { const response = await fetch( - 'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json' + 'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json', ); const scene = new Scene({ id: 'map', map: new GaodeMap({ pitch: 0, style: 'dark', - center: [ 114.050008, 22.529272 ], - zoom: 14.1 - }) + center: [114.050008, 22.529272], + zoom: 14.1, + }), }); const layer = new PolygonLayer({}) @@ -48,13 +48,12 @@ export default class Polygon3D extends React.Component { '#DEB8D4', '#F5D4E6', '#FAE4F1', - '#FFF3FC' + '#FFF3FC', ]) .style({ - opacity: 1.0 + opacity: 1.0, }); scene.addLayer(layer); - } public render() { diff --git a/stories/Layers/components/Text.tsx b/stories/Layers/components/Text.tsx index d1ced6b7b4..13f5d4ffcb 100644 --- a/stories/Layers/components/Text.tsx +++ b/stories/Layers/components/Text.tsx @@ -41,7 +41,7 @@ export default class Point3D extends React.Component { '#D42F31', '#730D1C', ]) - .shape('subregion',[ + .shape('subregion', [ 'circle', 'triangle', 'square', diff --git a/stories/Layers/components/column.tsx b/stories/Layers/components/column.tsx index 0e351af6bb..5e83acb16c 100644 --- a/stories/Layers/components/column.tsx +++ b/stories/Layers/components/column.tsx @@ -17,42 +17,42 @@ export default class Column extends React.Component { map: new GaodeMap({ pitch: 66.02383, style: 'dark', - center: [ 121.400257, 31.25287 ], + center: [121.400257, 31.25287], zoom: 14.55, - rotation: 134.9507 - }) + rotation: 134.9507, + }), }); fetch( - 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json' + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', ) - .then(res => res.json()) - .then(data => { + .then((res) => res.json()) + .then((data) => { const pointLayer = new PointLayer({}) .source(data, { parser: { type: 'json', x: 'longitude', - y: 'latitude' - } + y: 'latitude', + }, }) .shape('name', [ 'cylinder', 'triangleColumn', 'hexagonColumn', - 'squareColumn' + 'squareColumn', ]) - .size('unit_price', h => { - return [ 6, 6, h / 500]; + .size('unit_price', (h) => { + return [6, 6, h / 500]; }) - .color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ]) + .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F']) .style({ - opacity: 1.0 + opacity: 1.0, }); scene.addLayer(pointLayer); - }) -} + }); + } public render() { return ( diff --git a/stories/Source/Map.stories.tsx b/stories/Source/Map.stories.tsx new file mode 100644 index 0000000000..604e2ee1e9 --- /dev/null +++ b/stories/Source/Map.stories.tsx @@ -0,0 +1,10 @@ +import { storiesOf } from '@storybook/react'; +import * as React from 'react'; +import MultiPolygon from './components/multiPolygon'; +import MultiLine from './components/multiLine'; +// @ts-ignore +import notes from './Map.md'; +// @ts-ignore +storiesOf('数据', module) + .add('multiPolygon', () => , {}) + .add('MultiLine', () => , {}); diff --git a/stories/Source/components/multiLine.tsx b/stories/Source/components/multiLine.tsx new file mode 100644 index 0000000000..12144f4bde --- /dev/null +++ b/stories/Source/components/multiLine.tsx @@ -0,0 +1,74 @@ +import { LineLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; + +function convertRGB2Hex(rgb: number[]) { + return ( + '#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('') + ); +} + +export default class MultiLine extends React.Component { + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + pitch: 0, + style: 'dark', + center: [101.775374, 3], + zoom: 14.1, + }), + }); + + const layer = new LineLayer({}) + .source({ + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: {}, + geometry: { + type: 'MultiLineString', + coordinates: [ + [ + [100, 0], + [101, 1], + ], + [ + [102, 2], + [103, 3], + ], + ], + }, + }, + ], + }) + .shape('line') + .color('red') + .style({ + opacity: 1.0, + }); + scene.addLayer(layer); + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/Source/components/multiPolygon.tsx b/stories/Source/components/multiPolygon.tsx new file mode 100644 index 0000000000..bab7f1f9d9 --- /dev/null +++ b/stories/Source/components/multiPolygon.tsx @@ -0,0 +1,58 @@ +import { PolygonLayer, Scene } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; +import * as React from 'react'; + +function convertRGB2Hex(rgb: number[]) { + return ( + '#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('') + ); +} + +export default class MultiPolygon extends React.Component { + private gui: dat.GUI; + private $stats: Node; + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const response = await fetch( + 'https://gw.alipayobjects.com/os/basement_prod/f79485d8-d86f-4bb3-856d-537b586be06e.json', + ); + const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + pitch: 0, + style: 'dark', + center: [121.775374, 31.31067], + zoom: 14.1, + }), + }); + + const layer = new PolygonLayer({}) + .source(await response.json()) + .shape('fill') + .color('red') + .style({ + opacity: 1.0, + }); + scene.addLayer(layer); + } + + public render() { + return ( +
+ ); + } +}