diff --git a/docs/api/component/control.en.md b/docs/api/component/control.en.md index 2c0e468fe6..8e3ca4401d 100644 --- a/docs/api/component/control.en.md +++ b/docs/api/component/control.en.md @@ -1,96 +1,74 @@ --- title: Control -order: 1 +order: 3 --- -# control - 地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺 -## 构造函数 +L7 目前支持 Control -```javascript -const baseControl = new L7.Control.Base(option); -``` +- Zoom 放大缩小 +- Scale 比例尺 +- Layers 图层列表 + +## 构造函数 #### option -position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft` +position: `string` 控件位置支持是个方位 -#### scene 内置地图组件 +- bottomright +- topright +- bottomleft, +- topleft` -zoom 地图放大缩小   默认添加
Scale 地图比例尺     默认添加
attribution 地图数据属性    默认添加
layer 图层列表 +### 组件介绍 -**scene 配置项设置控件添加状态** - -```javascript -scene = new L7.scene({ - zoomControl: true, - scaleControl: true, - attributionControl: true, -}); ``` +import { Scale, Layers, Zoom } from '@antv/l7'; -#### +``` #### Zoom -放大缩小组件 默认 左上角 +放大缩小组件 默认左上角 ```javascript -new L7.Control.Zoom({ +const zoomControl = new Zoom({ position: 'topleft', -}).addTo(scene); +}); + +scene.addControl(zoomControl); ``` #### Scale -比例尺组件默认左下角 +比例尺组件 默认左下角 ```javascript -new L7.Control.Scale({ +const scaleControl = new Scale({ position: 'bottomleft', -}).addTo(scene); +}); + +scene.addControl(scaleControl); ``` -#### attribution +#### Layers -默认右下角 +图层列表目前支持可视化的图层控制 ```javascript -new L7.Control.Attribution({ - position: 'bottomleft', -}).addTo(scene); -``` - -#### layer - -图层列表目前只支持可视化 overlayers 图层控制 - -```javascript -var overlayers = { - 围栏填充: layer, - 围栏边界: layer2, +const overlayers = { + 点图层: layer, }; -new L7.Control.Layers({ - overlayers: overlayers, -}).addTo(scene); +const layersControl = new Layers({ + overlayers, +}); +scene.addControl(layersControl); ``` ## 方法 -#### onAdd - -组件添加到地图 Scene 时调用，自定义组件时需要实现此方法 - -#### addTo - -添加到地图 scene - -```javascript -control.addTo(scene); -``` - #### setPosition 设置组件位置 @@ -106,34 +84,3 @@ control.setPosition('bottomright'); ```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); -``` - -## - -## FAQ diff --git a/docs/api/component/control.zh.md b/docs/api/component/control.zh.md index 8e3ca4401d..886038fe27 100644 --- a/docs/api/component/control.zh.md +++ b/docs/api/component/control.zh.md @@ -3,7 +3,7 @@ title: Control order: 3 --- -地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺 +地图组件用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例、比例尺 L7 目前支持 Control @@ -57,6 +57,22 @@ scene.addControl(scaleControl); 图层列表目前支持可视化的图层控制 +配置项 + +option 控件配置项 +overlayers 将一组图层添加到图层列表， +overlayers Object +key: 列表显示的图层名字可以自定义 +layer: 图层对象 +overlayers 示例 + +```javascript + { + "图层一"：layer1, + "图层二"：layer2, + } +``` + ```javascript const overlayers = { 点图层: layer, diff --git a/docs/api/component/marker.en.md b/docs/api/component/marker.en.md index 071271cd03..e9c1eb5398 100644 --- a/docs/api/component/marker.en.md +++ b/docs/api/component/marker.en.md @@ -62,7 +62,7 @@ scene.addMarker(marker); #### 默认 Marker -\*\*
`const marker = new L7.Marker({color:'blue'})` +`const marker = new L7.Marker({color:'blue'})` #### 自定义 Marker diff --git a/docs/api/component/marker.zh.md b/docs/api/component/marker.zh.md index 32903cc18e..c9e7830b65 100644 --- a/docs/api/component/marker.zh.md +++ b/docs/api/component/marker.zh.md @@ -3,7 +3,7 @@ title: Marker order: 3 --- -Marker 地图标注 目前只支持 2D dom 标注 +Marker 地图标注 目前只支持 2D Dom 标注 ## 构造函数 @@ -13,7 +13,8 @@ Marker #### option -- color        `string`   ![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ)  设置默认 marker 的颜色 +- color        `string`  + ![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ)  设置默认 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 的偏移量 diff --git a/docs/api/component/markerLayer.zh.md b/docs/api/component/markerLayer.zh.md index 3d480476d2..40462ce806 100644 --- a/docs/api/component/markerLayer.zh.md +++ b/docs/api/component/markerLayer.zh.md @@ -3,17 +3,18 @@ title: Marker 图层 order: 3 --- -MarkerLayer 不同于 PointLayer 图层 +MarkerLayer 是 Marker 的升级版，Marker 是独立的地图标注，MarkerLayer 则是统一管理大量的 Marker 数据。 **技术差异** -- MarkerLayer 地图元素采用 Dom 元素绘制 +- Marker Dom 绘制一个地图元素 +- MarkerLayer 统一管理多个 DomMarker - PointLayer 通过 WebGL 绘制元素。 **功能差异** -- MarkerLayer 元素的自定义性比较强，任何 HTML+ CSS 的组合都可可以绘制在地图上。 -- PointLayer 自定义性比较弱，实现成本比较高，优势可以绘制大量的数据，性能比交互。 +- MarkerLayer 元素的自定义性比较强，任何 HTML+ CSS 的组合都可以绘制在地图上。 +- PointLayer 自定义性比较弱，实现成本比较高，优势可以绘制大量的数据，性能比较好。 ## 使用 diff --git a/docs/api/component/popup.en.md b/docs/api/component/popup.en.md index 6138548e64..9c3648b236 100644 --- a/docs/api/component/popup.en.md +++ b/docs/api/component/popup.en.md @@ -26,7 +26,24 @@ const popup = new L7.Popup(option); #### setLnglat -设置 popup 的经纬度位置
**参数**：lnglat 经纬度数组 [112,32] +设置 popup 的经纬度位置 + +**参数**：lnglat + +支持数组 + +```javascript +[112, 32]; +``` + +经纬度对象 + +```javascript +{ + lng: 112, + lat: 30 +} +``` ```javascript popup.setLnglat([112, 32]); @@ -49,14 +66,10 @@ popup.addTo(scene); 设置 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 = `

省份 + ${feature.s}

地区 + ${feature.m}

数值 + ${feature.t}

`; popup.setHtml(html); ``` @@ -66,6 +79,7 @@ popup.setHtml(html); 区别于 setHtml 对象只能传字符串 **tips** + 如果需要将 react 组件渲染到 popup 可以用此方法。 #### setText diff --git a/docs/api/component/popup.zh.md b/docs/api/component/popup.zh.md index 6138548e64..9c3648b236 100644 --- a/docs/api/component/popup.zh.md +++ b/docs/api/component/popup.zh.md @@ -26,7 +26,24 @@ const popup = new L7.Popup(option); #### setLnglat -设置 popup 的经纬度位置
**参数**：lnglat 经纬度数组 [112,32] +设置 popup 的经纬度位置 + +**参数**：lnglat + +支持数组 + +```javascript +[112, 32]; +``` + +经纬度对象 + +```javascript +{ + lng: 112, + lat: 30 +} +``` ```javascript popup.setLnglat([112, 32]); @@ -49,14 +66,10 @@ popup.addTo(scene); 设置 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 = `

省份 + ${feature.s}

地区 + ${feature.m}

数值 + ${feature.t}

`; popup.setHtml(html); ``` @@ -66,6 +79,7 @@ popup.setHtml(html); 区别于 setHtml 对象只能传字符串 **tips** + 如果需要将 react 组件渲染到 popup 可以用此方法。 #### setText diff --git a/docs/api/layer/heatmap_layer/grid.en.md b/docs/api/layer/heatmap_layer/grid.en.md index 02131702f4..a4cb3c1e29 100644 --- a/docs/api/layer/heatmap_layer/grid.en.md +++ b/docs/api/layer/heatmap_layer/grid.en.md @@ -23,7 +23,7 @@ import { HeatMapLayer } from '@antv/l7'; - type  数据聚合类型 grid - size  网格半径 单位 米 - field  聚合字段 -- method 聚合方法  count,max,min,sum,mean5 个统计维度 +- method 聚合方法  count,max,min,sum,mean 5个统计维度 ```javascript @@ -57,7 +57,7 @@ layer.source(data, { ```javascript -layer.shape(circle); +layer.shape('circle'); ``` @@ -69,7 +69,7 @@ layer.shape(circle); - squareColumn, ```javascript -layer.shape(cylinder); +layer.shape('cylinder'); ``` @@ -150,7 +150,7 @@ const layer = new HeatmapLayer({}) '#6BD5A0', '#A7ECB2', '#D0F4CA' - ].reverse() + ] ); scene.addLayer(layer); diff --git a/docs/api/layer/heatmap_layer/grid.zh.md b/docs/api/layer/heatmap_layer/grid.zh.md index 8d03977946..071b8e8543 100644 --- a/docs/api/layer/heatmap_layer/grid.zh.md +++ b/docs/api/layer/heatmap_layer/grid.zh.md @@ -21,7 +21,7 @@ import { HeatMapLayer } from '@antv/l7'; - type  数据聚合类型 grid - size  网格半径 单位 米 - field  聚合字段 -- method 聚合方法  count,max,min,sum,mean5 个统计维度 +- method 聚合方法  count,max,min,sum,mean 5个统计维度 ```javascript @@ -54,7 +54,7 @@ layer.source(data, { - heaxgon ```javascript -layer.shape(circle); +layer.shape('circle'); ``` @@ -66,7 +66,7 @@ layer.shape(circle); - squareColumn, ```javascript -layer.shape(cylinder); +layer.shape('cylinder'); ``` @@ -146,7 +146,7 @@ const layer = new HeatmapLayer({}) '#6BD5A0', '#A7ECB2', '#D0F4CA' - ].reverse() + ] ); scene.addLayer(layer); diff --git a/docs/api/layer/heatmap_layer/hexagon.en.md b/docs/api/layer/heatmap_layer/hexagon.en.md index 6e2db7dda0..3cffff9630 100644 --- a/docs/api/layer/heatmap_layer/hexagon.en.md +++ b/docs/api/layer/heatmap_layer/hexagon.en.md @@ -18,7 +18,7 @@ import { HeatMapLayer } from '@antv/l7'; - type  数据聚合类型 hexagon - size  网格半径 单位 米 - field  聚合字段 -- method 聚合方法  count,max,min,sum,mean5 个统计维度 +- method 聚合方法  count,max,min,sum,mean 5个统计维度 ```javascript @@ -51,7 +51,7 @@ layer.source(data, { - heaxgon ```javascript -layer.shape(circle); +layer.shape('circle'); ``` @@ -63,7 +63,7 @@ layer.shape(circle); - squareColumn, ```javascript -layer.shape(cylinder); +layer.shape('cylinder'); ``` diff --git a/docs/api/layer/heatmap_layer/hexagon.zh.md b/docs/api/layer/heatmap_layer/hexagon.zh.md index 6a8bd760a0..9f5b10079d 100644 --- a/docs/api/layer/heatmap_layer/hexagon.zh.md +++ b/docs/api/layer/heatmap_layer/hexagon.zh.md @@ -23,7 +23,7 @@ import { HeatMapLayer } from '@antv/l7'; - type  数据聚合类型 hexagon - size  网格半径 单位 米 - field  聚合字段 -- method 聚合方法  count,max,min,sum,mean5 个统计维度 +- method 聚合方法 count,max,min,sum,mean 5个统计维度 ```javascript @@ -56,7 +56,7 @@ layer.source(data, { - heaxgon ```javascript -layer.shape(circle); +layer.shape('circle'); ``` @@ -68,7 +68,7 @@ layer.shape(circle); - squareColumn, ```javascript -layer.shape(cylinder); +layer.shape('cylinder'); ``` diff --git a/docs/api/layer/heatmap_layer/normal.en.md b/docs/api/layer/heatmap_layer/normal.en.md index f973c79c88..acc3787da0 100644 --- a/docs/api/layer/heatmap_layer/normal.en.md +++ b/docs/api/layer/heatmap_layer/normal.en.md @@ -39,7 +39,7 @@ layer.size('weight', [0,1]) - colors  颜色数组 - positions 数据区间 - :warning: color, position 的长度要相同 + ⚠️ color, position 的长度要相同 ## 完整代码 diff --git a/docs/api/layer/heatmap_layer/normal.zh.md b/docs/api/layer/heatmap_layer/normal.zh.md index f973c79c88..0ef7fda62d 100644 --- a/docs/api/layer/heatmap_layer/normal.zh.md +++ b/docs/api/layer/heatmap_layer/normal.zh.md @@ -39,15 +39,13 @@ layer.size('weight', [0,1]) - colors  颜色数组 - positions 数据区间 - :warning: color, position 的长度要相同 + ⚠️ color, position 的长度要相同 ## 完整代码 ```javascript -heatmapLayer({ - zIndex: 2, -}) +heatmapLayer() .source(data) .size('mag', [0, 1]) // weight映射通道 .style({ diff --git a/docs/api/layer/layer.en.md b/docs/api/layer/layer.en.md index af71db112b..7eeb5e3743 100644 --- a/docs/api/layer/layer.en.md +++ b/docs/api/layer/layer.en.md @@ -120,7 +120,7 @@ cscle('field', scaleConfig) ## 视觉编码方法 -可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通过，你可以指定数据字段，为不同要素设置不同的图形属性。 +可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通道，你可以指定数据字段，为不同要素设置不同的图形属性。 ### size @@ -324,7 +324,7 @@ layer.show(); layer.hide(); ``` -### isVisable +### isVisible 图层是否可见 @@ -420,7 +420,7 @@ layer.setSelect(id); - x: number 鼠标  在地图位置 x 坐标 - y: number 鼠标  在地图位置 y 坐标 - type: string 鼠标事件类型 -- lngLat: ILngLat {lng:number, lat: number }; 鼠标所在位置经纬度 +- lngLat: 经度度对象 {lng:number, lat: number }; 鼠标所在位置经纬度 - feature: any; 数据选中的地理要素信息 - featureId: number | null; 数据选中的地理要素的 ID @@ -495,27 +495,31 @@ layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件 ### inited -option +参数 option -- target ILayer 当前 layer +- target 当前 layer - type 事件类型 图层初始化完成后触发 +```javascript +layer.on('inited', (option) => {}); +``` + ### add 图层添加到 scene -option +参数 option -- target ILayer 当前 layer +- target 当前 layer - type 事件类型 ### remove 图层移除时触发 -option +参数 option -- target ILayer 当前 layer +- target 当前 layer - type 事件类型 diff --git a/docs/api/layer/layer.zh.md b/docs/api/layer/layer.zh.md index af71db112b..7eeb5e3743 100644 --- a/docs/api/layer/layer.zh.md +++ b/docs/api/layer/layer.zh.md @@ -120,7 +120,7 @@ cscle('field', scaleConfig) ## 视觉编码方法 -可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通过，你可以指定数据字段，为不同要素设置不同的图形属性。 +可视化编码是将数据转换为可视形式的过程，L7 目前支持形状，大小，颜色 3 种视觉通道，你可以指定数据字段，为不同要素设置不同的图形属性。 ### size @@ -324,7 +324,7 @@ layer.show(); layer.hide(); ``` -### isVisable +### isVisible 图层是否可见 @@ -420,7 +420,7 @@ layer.setSelect(id); - x: number 鼠标  在地图位置 x 坐标 - y: number 鼠标  在地图位置 y 坐标 - type: string 鼠标事件类型 -- lngLat: ILngLat {lng:number, lat: number }; 鼠标所在位置经纬度 +- lngLat: 经度度对象 {lng:number, lat: number }; 鼠标所在位置经纬度 - feature: any; 数据选中的地理要素信息 - featureId: number | null; 数据选中的地理要素的 ID @@ -495,27 +495,31 @@ layer.on('unpick', (ev) => {}); // 图层外的操作的所有事件 ### inited -option +参数 option -- target ILayer 当前 layer +- target 当前 layer - type 事件类型 图层初始化完成后触发 +```javascript +layer.on('inited', (option) => {}); +``` + ### add 图层添加到 scene -option +参数 option -- target ILayer 当前 layer +- target 当前 layer - type 事件类型 ### remove 图层移除时触发 -option +参数 option -- target ILayer 当前 layer +- target 当前 layer - type 事件类型 diff --git a/docs/api/layer/line_layer/arc.en.md b/docs/api/layer/line_layer/arc.en.md index 7e1ab3ff8f..8d1edfbb9a 100644 --- a/docs/api/layer/line_layer/arc.en.md +++ b/docs/api/layer/line_layer/arc.en.md @@ -7,7 +7,7 @@ order: 1 ## 使用 ### 数据 -绘制弧线只需提供起始点坐标即可 +绘制弧线只需提供起止点坐标即可 ```javascript source(data, { @@ -23,7 +23,7 @@ order: 1 ### shape -弧线支持两种弧线算法 +弧线支持三种弧线算法 - arc 绘制弧线 通过贝塞尔曲线算法技术弧线 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 diff --git a/docs/api/layer/line_layer/arc.zh.md b/docs/api/layer/line_layer/arc.zh.md index 8d03d67f91..b09c0eb98d 100644 --- a/docs/api/layer/line_layer/arc.zh.md +++ b/docs/api/layer/line_layer/arc.zh.md @@ -7,7 +7,7 @@ order: 1 ## 使用 ### 数据 -绘制弧线只需提供起始点坐标即可 +绘制弧线只需提供起止点坐标即可 ```javascript source(data, { @@ -23,7 +23,7 @@ order: 1 ### shape -弧线支持两种弧线算法 +弧线支持三种弧线算法 - arc 绘制弧线 通过贝塞尔曲线算法技术弧线 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 diff --git a/docs/api/layer/line_layer/linelayer.en.md b/docs/api/layer/line_layer/linelayer.en.md index 47e7a1e33c..f64801ad1e 100644 --- a/docs/api/layer/line_layer/linelayer.en.md +++ b/docs/api/layer/line_layer/linelayer.en.md @@ -14,7 +14,7 @@ order: 2 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 - arc3d 3d 弧线地图 3D 视角 -⚠️ 弧线只需要设置起始点坐标即可 +⚠️ 弧线只需要设置起止点坐标即可 ``` new LineLayer() diff --git a/docs/api/layer/line_layer/linelayer.zh.md b/docs/api/layer/line_layer/linelayer.zh.md index 9f1374c15a..3407a044fe 100644 --- a/docs/api/layer/line_layer/linelayer.zh.md +++ b/docs/api/layer/line_layer/linelayer.zh.md @@ -14,7 +14,7 @@ order: 0 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 - arc3d 3d 弧线地图 3D 视角 -⚠️ 弧线只需要设置起始点坐标即可 +⚠️ 弧线只需要设置起止点坐标即可 ``` new LineLayer() diff --git a/docs/api/layer/point_layer/cluster.zh.md b/docs/api/layer/point_layer/cluster.zh.md index 77d22310c5..e856434599 100644 --- a/docs/api/layer/point_layer/cluster.zh.md +++ b/docs/api/layer/point_layer/cluster.zh.md @@ -31,11 +31,10 @@ order: 5 **getClustersLeaves(id: string)** - 根据id获取聚合节点的数据 + 根据id获取聚合节点的数据，每个聚合节点会有一个唯一ID - id 聚合数据id - ```javascript diff --git a/docs/api/layer/point_layer/dot.en.md b/docs/api/layer/point_layer/dot.en.md index cb67c57374..02e9e6cc40 100644 --- a/docs/api/layer/point_layer/dot.en.md +++ b/docs/api/layer/point_layer/dot.en.md @@ -7,15 +7,14 @@ order: 3 ## 使用 ### shape - - dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape ### color - 无权重 - 如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮 + 如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮 - 有权重 - 为数据有权重可以设置一组同一色相不同亮度的色带。 + 如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。 ```javascript diff --git a/docs/api/layer/point_layer/dot.zh.md b/docs/api/layer/point_layer/dot.zh.md index 7e63a90809..02e9e6cc40 100644 --- a/docs/api/layer/point_layer/dot.zh.md +++ b/docs/api/layer/point_layer/dot.zh.md @@ -12,9 +12,9 @@ order: 3 ### color - 无权重 - 如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮 + 如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮 - 有权重 - 为数据有权重可以设置一组同一色相不同亮度的色带。 + 如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。 ```javascript diff --git a/docs/api/layer/polygon_layer/polygonlayer.zh.md b/docs/api/layer/polygon_layer/polygonlayer.zh.md index a05fc36e79..a3c42dfa59 100644 --- a/docs/api/layer/polygon_layer/polygonlayer.zh.md +++ b/docs/api/layer/polygon_layer/polygonlayer.zh.md @@ -22,7 +22,7 @@ import { PolygonLayer } from '@antv/l7'; PolyonLayer.shape('fill'); PolyonLayer.shape('line').size(1); // size 表示线宽度 -PolyonLayer.shape('extrude'); // size 表示高度 +PolyonLayer.shape('extrude').size(10); // size 表示高度 ``` diff --git a/docs/api/layer/raster_layer.en.md b/docs/api/layer/raster_layer.en.md index 20ffd6836a..43c3fcc487 100644 --- a/docs/api/layer/raster_layer.en.md +++ b/docs/api/layer/raster_layer.en.md @@ -37,8 +37,8 @@ import { RasterLayer } from '@antv/l7'; - domain: [ 0, 8000 ] 数据映射区间 - noDataValue Number noDataValue 不会显示 - rampColors: { - colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(), + colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ], positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] } // 色带 - :warning: color, position 的长度要相同 + ⚠️ color, position 的长度要相同 diff --git a/docs/api/layer/raster_layer.zh.md b/docs/api/layer/raster_layer.zh.md index 34ab218b8e..90eabc8d38 100644 --- a/docs/api/layer/raster_layer.zh.md +++ b/docs/api/layer/raster_layer.zh.md @@ -37,8 +37,8 @@ import { RasterLayer } from '@antv/l7'; - domain: [ 0, 8000 ] 数据映射区间 - noDataValue Number noDataValue 不会显示 - rampColors: { - colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(), + colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ], positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] } // 色带 - :warning: color, position 的长度要相同 + ⚠️ color, position 的长度要相同 diff --git a/docs/api/map.en.md b/docs/api/map.en.md index f749276df8..3adce0ca4b 100644 --- a/docs/api/map.en.md +++ b/docs/api/map.en.md @@ -5,8 +5,8 @@ order: 2 # 简介 -L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。= -L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。 +L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种。 +L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。 ## Map diff --git a/docs/api/map.zh.md b/docs/api/map.zh.md index f749276df8..3adce0ca4b 100644 --- a/docs/api/map.zh.md +++ b/docs/api/map.zh.md @@ -5,8 +5,8 @@ order: 2 # 简介 -L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。= -L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。 +L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种。 +L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。 ## Map diff --git a/docs/api/scene.en.md b/docs/api/scene.en.md index ad50dc22bd..b4f55bd491 100644 --- a/docs/api/scene.en.md +++ b/docs/api/scene.en.md @@ -214,7 +214,10 @@ scene.setCenter([lng, lat]); scene.setZoomAndCenter(zoom, center); ``` -参数：zoom {number}
center {LngLat} +参数： + +- zoom {number} +- center {LngLat} ### setRotation @@ -260,7 +263,10 @@ scene.panTo(LngLat); scene.panBy(x, y); ``` -参数：
`x` {number} 水平方向移动像素 向右为正方向
      `y` {number} 垂直方向移动像素 向下为正方向 +参数： + +- `x` {number} 水平方向移动像素 向右为正方向 +- `y` {number} 垂直方向移动像素 向下为正方向 ### setPitch @@ -270,11 +276,16 @@ scene.panBy(x, y); scene.setPitch(pitch); ``` -参数 :
   `pitch` {number} +参数 : + +`pitch` {number} ### fitBounds -地图缩放到某个范围内
参数 :
  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat] +地图缩放到某个范围内 +参数 : + +- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat] ```javascript scene.fitBounds([112, 32, 114, 35]); @@ -298,11 +309,15 @@ scene.removeLayer(layer); #### 参数 -`eventName` {string} 事件名
`hander` {function } 事件回调函数 +- `eventName` {string} 事件名 +- `handler` {function } 事件回调函数 ### off -移除事件监听
`eventName` {string} 事件名
`hander` {function } 事件回调函数 +移除事件监听 + +- `eventName` {string} 事件名 +- `handler` {function } 事件回调函数 ### 地图事件 diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md index 3b315f4ef8..4e8a03871a 100644 --- a/docs/api/scene.zh.md +++ b/docs/api/scene.zh.md @@ -316,11 +316,14 @@ scene.removeLayer(layer); #### 参数 -`eventName` {string} 事件名
`hander` {function } 事件回调函数 +`eventName` {string} 事件名 +`handler` {function } 事件回调函数 ### off -移除事件监听
`eventName` {string} 事件名
`hander` {function } 事件回调函数 +移除事件监听 +`eventName` {string} 事件名 +`handler` {function } 事件回调函数 ### 场景事件 @@ -363,7 +366,7 @@ scene.on('mouseover', (ev) => {}); // 鼠标移入地图容器内时触发 scene.on('mouseout', (ev) => {}); // 鼠标移出地图容器时触发 scene.on('mouseup', (ev) => {}); // 鼠标在地图上单击抬起时触发 scene.on('mousedown', (ev) => {}); // 鼠标在地图上单击按下时触发 -scene.on('rightclick', (ev) => {}); // 鼠标右键单击事件 +scene.on('contextmenu', (ev) => {}); // 鼠标右键单击事件 scene.on('dragstart', (ev) => {}); //开始拖拽地图时触发 scene.on('dragging', (ev) => {}); // 拖拽地图过程中触发 scene.on('dragend', (ev) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发 diff --git a/docs/api/source/csv.en.md b/docs/api/source/csv.en.md index 9bb339734b..688116ef2d 100644 --- a/docs/api/source/csv.en.md +++ b/docs/api/source/csv.en.md @@ -8,7 +8,7 @@ L7 支持 CSV 以逗号分隔的 CSV 数据加载。 CSV 是文本数据结构，很难表达复杂的地理数据结构，因此 CSV 仅支持两种数据结构 - 点数据 需要指定经度，纬度坐标 -- 线段，弧线数据 需要指定 起始点的 经度，纬度坐标 +- 线段，弧线数据 需要指定 起止点的 经度，纬度坐标 ## parser diff --git a/docs/api/source/csv.zh.md b/docs/api/source/csv.zh.md index 9bb339734b..688116ef2d 100644 --- a/docs/api/source/csv.zh.md +++ b/docs/api/source/csv.zh.md @@ -8,7 +8,7 @@ L7 支持 CSV 以逗号分隔的 CSV 数据加载。 CSV 是文本数据结构，很难表达复杂的地理数据结构，因此 CSV 仅支持两种数据结构 - 点数据 需要指定经度，纬度坐标 -- 线段，弧线数据 需要指定 起始点的 经度，纬度坐标 +- 线段，弧线数据 需要指定 起止点的 经度，纬度坐标 ## parser diff --git a/docs/api/source/json.en.md b/docs/api/source/json.en.md index e1ed3045f6..a1bb7f5a3e 100644 --- a/docs/api/source/json.en.md +++ b/docs/api/source/json.en.md @@ -27,7 +27,7 @@ json 数据解析使用对应 JSON parser 如果数据是点数据，只需要设置 x,y 字段即可 -如果是线段，弧线数据，需要知道起始点坐标既，x,y,x1,y1 +如果是线段，弧线数据，需要知道起止点坐标既，x,y,x1,y1 ```javascript layer.source(data, { @@ -122,7 +122,7 @@ layer.source(data, { - x1 `string` 经度 - x2 `string` 纬度 -简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标 +简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起止点坐标 ```javascript const data = [ diff --git a/docs/api/source/json.zh.md b/docs/api/source/json.zh.md index 868a670235..c1528f632f 100644 --- a/docs/api/source/json.zh.md +++ b/docs/api/source/json.zh.md @@ -27,7 +27,7 @@ json 数据解析使用对应 JSON parser 如果数据是点数据，只需要设置 x,y 字段即可 -如果是线段，弧线数据，需要知道起始点坐标既，x,y,x1,y1 +如果是线段，弧线数据，需要知道起止点坐标既，x,y,x1,y1 ```javascript layer.source(data, { @@ -124,7 +124,7 @@ layer.source(data, { - x1 `string` 经度 - x2 `string` 纬度 -简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标 +简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起止点坐标 ```javascript const data = [ diff --git a/docs/api/source/source.en.md b/docs/api/source/source.en.md index 8ee985718b..539b9ff61f 100644 --- a/docs/api/source/source.en.md +++ b/docs/api/source/source.en.md @@ -131,4 +131,4 @@ layer.source(data, { - type: 'hexagon', - size: 网格半径 - field: 数据统计字段 -- method:聚合方法   count,max,min,sum,mean 5 个统计维度 +- method: 聚合方法   count,max,min,sum,mean 5 个统计维度 diff --git a/docs/api/source/source.zh.md b/docs/api/source/source.zh.md index 306d1242b6..bb4df7f2ce 100644 --- a/docs/api/source/source.zh.md +++ b/docs/api/source/source.zh.md @@ -111,7 +111,7 @@ tranforms 处理的是的标准化之后的数据 - type: 'grid', - size: 网格半径 - field: 数据统计字段 -- method:聚合方法   count,max,min,sum,mean5 个统计维度 +- method: 聚合方法  count,max,min,sum,mean 5 个统计维度 ```javascript layer.source(data, { diff --git a/docs/tutorial/data.en.md b/docs/tutorial/data.en.md index 45470c92aa..c58e7b5b96 100644 --- a/docs/tutorial/data.en.md +++ b/docs/tutorial/data.en.md @@ -1,5 +1,5 @@ --- -title: Data +title: 数据 order: 2 --- @@ -7,7 +7,9 @@ order: 2 目前L7支持的数据格式有GeoJson,CSV,JSon Image -GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。 +- GeoJSON 支持点、线、面等所有的标准空间数据格式。 +- CSV 支持点、线段、弧线等数据类型。 +- JSON 支持简单的点、线，面数据类型，不支持多点，多线的，多面数据格式。 ## GeoJSON @@ -55,7 +57,7 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支 } ``` -#### 全国行政区划GeoJON 支持省市县维度  +## 地理统计分析工具 [turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库 ## 在线工具 @@ -63,3 +65,12 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支 [http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据 [https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据 + +## 数据资源 + +#### 全国行政区划GeoJON 支持省市县维度  +[geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4) + +#### HighCharts 全球行政区划数据集 + +[https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/) diff --git a/docs/tutorial/data.zh.md b/docs/tutorial/data.zh.md index 7860943c6e..c58e7b5b96 100644 --- a/docs/tutorial/data.zh.md +++ b/docs/tutorial/data.zh.md @@ -7,7 +7,9 @@ order: 2 目前L7支持的数据格式有GeoJson,CSV,JSon Image -GeoJSON 支持点、线、面，等所有的空间数据格式。
CSV 支持，点，线段，弧线的支持。
JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。 +- GeoJSON 支持点、线、面等所有的标准空间数据格式。 +- CSV 支持点、线段、弧线等数据类型。 +- JSON 支持简单的点、线，面数据类型，不支持多点，多线的，多面数据格式。 ## GeoJSON diff --git a/docs/tutorial/demo.en.md b/docs/tutorial/demo.en.md index 485f913c47..1cf2ad3c79 100644 --- a/docs/tutorial/demo.en.md +++ b/docs/tutorial/demo.en.md @@ -1,8 +1,9 @@ --- -title: How to start the demo locally +title: 本地运行demo order: 1 --- + ### 一、打开L7demo页面 @@ -11,7 +12,7 @@ order: 1 L7 地理可视化 -你可能没有注意，代码区的上方有一排工具按钮，注意了你可能不知道干什么用的。 +你可能没有注意到，代码区的上方有一排工具按钮，。 ### 二、打开 codesandbox。 @@ -22,7 +23,7 @@ order: 1 L7 地理可视化 -你发现你进入了一个线代码编辑器比较流行，这个里面你可以修改代码，并且能够随时看到效果 +你发现你进入了一个在线的代码编辑器，在这里面你可以修改代码，并且能够随时看到效果 你可能想说我就想本地跑起来，不想在线修改。 @@ -57,6 +58,9 @@ yarn start L7 地理可视化 + 现在你可以尽情的本地修改代码，添加自己的图层了。 L7 所有demo都可以在codesandbox 打开，你可以下载代码。 + + diff --git a/docs/tutorial/demo.zh.md b/docs/tutorial/demo.zh.md index fb0a654c42..1cf2ad3c79 100644 --- a/docs/tutorial/demo.zh.md +++ b/docs/tutorial/demo.zh.md @@ -12,7 +12,7 @@ order: 1 L7 地理可视化 -你可能没有注意，代码区的上方有一排工具按钮，注意了你可能不知道干什么用的。 +你可能没有注意到，代码区的上方有一排工具按钮，。 ### 二、打开 codesandbox。 @@ -23,7 +23,7 @@ order: 1 L7 地理可视化 -你发现你进入了一个线代码编辑器比较流行，这个里面你可以修改代码，并且能够随时看到效果 +你发现你进入了一个在线的代码编辑器，在这里面你可以修改代码，并且能够随时看到效果 你可能想说我就想本地跑起来，不想在线修改。 diff --git a/docs/tutorial/map/offline.zh.md b/docs/tutorial/map/offline.zh.md index 170beaf6e4..5aad03e8d8 100644 --- a/docs/tutorial/map/offline.zh.md +++ b/docs/tutorial/map/offline.zh.md @@ -32,7 +32,9 @@ const scene = new Scene({ - 不使用mapbox token ### 如何离线化使用MapBox -你只要不使用MapBox的数据底图服务就可以离线使用，mapbox所有数据服务资源都是在style里面配置的。除了数据服务以外还有一些静态资源，这些主要是图片标注，文字标注的时候使用。
mapbox本身资源在国外如果在国内单独部署一套单独使用，加载速度体验还是很好的 +你只要不使用MapBox的数据底图服务就可以离线使用，mapbox所有数据服务资源都是在style里面配置的。除了数据服务以外还有一些静态资源，这些主要是图片标注，文字标注的时候使用。 + +mapbox本身数据资源在国外如果在国内单独部署使用，加载速度体验还是很好的 我们先了解一下MapBox样式包含哪些配置项。 @@ -43,7 +45,9 @@ const scene = new Scene({ - sprite：雪碧图，将一个地图涉及到的所有零星图标图片都包含到一张大图中。 - glyphs：.pbf格式的字体样式，例如微软雅黑等字体库。 - sources：图层的资源文件，可以支持矢量切片、栅格、dem栅格、图片、geojson、视频等格式 -- layers：是对每个图层样式的描述，这里就是对地图样式渲染的关键，可以做定制化地图样式。
具体参数及其api可以参考mapbox官网 +- layers：是对每个图层样式的描述，这里就是对地图样式渲染的关键，可以做定制化地图样式。 + +具体参数及其api可以参考mapbox官网 如果做到本地化只需要 sprite，glyphs 本地化就可以了，地图服务可以加载其他服务。 diff --git a/docs/tutorial/quickstart.zh.md b/docs/tutorial/quickstart.zh.md index 2165c49760..1ea132b213 100644 --- a/docs/tutorial/quickstart.zh.md +++ b/docs/tutorial/quickstart.zh.md @@ -15,7 +15,7 @@ Current version: ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7) Include the L7 JS JavaScript of your HTML file. -:warning: 如果需要引用第三方地图API，请确保在先引入第三方API，然后引入L7 +⚠️ 如果需要引用第三方地图API，请确保在先引入第三方API，然后引入L7 ```html diff --git a/packages/component/src/control/layer.ts b/packages/component/src/control/layer.ts index 0f6a53c7d6..f3762a1ea1 100644 --- a/packages/component/src/control/layer.ts +++ b/packages/component/src/control/layer.ts @@ -114,8 +114,6 @@ export default class Layers extends Control { if (!collapsed) { this.expand(); } - this.expand(); - this.baseLayersList = DOM.create('div', className + '-base', form); this.separator = DOM.create('div', className + '-separator', form); this.overlaysList = DOM.create('div', className + '-overlays', form); diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts index f96ac5a262..ebdc82fb75 100644 --- a/packages/core/src/services/interaction/InteractionService.ts +++ b/packages/core/src/services/interaction/InteractionService.ts @@ -20,6 +20,12 @@ export default class InteractionService extends EventEmitter private hammertime: HammerManager; + private lastClickTime: number = 0; + + private lastClickXY: number[] = [-1, -1]; + + private clickTimer: number; + public init() { // 注册事件在地图底图上 this.addEventListenerOnMap(); @@ -59,7 +65,7 @@ export default class InteractionService extends EventEmitter $containter.addEventListener('click', this.onHover); $containter.addEventListener('mousedown', this.onHover); $containter.addEventListener('mouseup', this.onHover); - $containter.addEventListener('dblclick', this.onHover); + // $containter.addEventListener('dblclick', this.onHover); $containter.addEventListener('contextmenu', this.onHover); this.hammertime = hammertime; @@ -75,7 +81,7 @@ export default class InteractionService extends EventEmitter $containter.removeEventListener('click', this.onHover); $containter.removeEventListener('mousedown', this.onHover); $containter.removeEventListener('mouseup', this.onHover); - $containter.removeEventListener('dblclick', this.onHover); + // $containter.removeEventListener('dblclick', this.onHover); $containter.removeEventListener('contextmenu', this.onHover); } } @@ -88,6 +94,32 @@ export default class InteractionService extends EventEmitter y -= top; } const lngLat = this.mapService.containerToLngLat([x, y]); + + if (type === 'click') { + const nowTime = new Date().getTime(); + if ( + nowTime - this.lastClickTime < 500 && + Math.abs(this.lastClickXY[0] - x) < 10 && + Math.abs(this.lastClickXY[1] - y) < 10 + ) { + this.lastClickTime = 0; + this.lastClickXY = [-1, -1]; + if (this.clickTimer) { + clearTimeout(this.clickTimer); + } + type = 'dblclick'; + this.emit(InteractionEvent.Hover, { x, y, lngLat, type }); + } else { + this.lastClickTime = nowTime; + this.lastClickXY = [x, y]; + this.clickTimer = setTimeout(() => { + type = 'click'; + this.emit(InteractionEvent.Hover, { x, y, lngLat, type }); + }, 500); + } + return; + } + this.emit(InteractionEvent.Hover, { x, y, lngLat, type }); }; } diff --git a/packages/source/src/source.ts b/packages/source/src/source.ts index 39d12da00e..5fd20c3f3d 100644 --- a/packages/source/src/source.ts +++ b/packages/source/src/source.ts @@ -138,8 +138,8 @@ export default class Source extends EventEmitter { const { type = 'geojson' } = this.parser; if (type === 'geojson' && !this.cluster) { // TODO： 聚合图层返回聚合和后的数据 - return id < this.rawData.features.length - ? this.rawData.features[id] + return id < this.originData.features.length + ? this.originData.features[id] : 'null'; } else { return id < this.data.dataArray.length ? this.data.dataArray[id] : 'null';