Merge pull request #180 from antvis/fix_event

Fix event
This commit is contained in:
@thinkinggis 2020-01-31 00:50:08 +08:00 committed by GitHub
commit 3e23649da6
54 changed files with 304 additions and 238 deletions

View File

@ -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 地图放大缩小   默认添加<br />Scale 地图比例尺     默认添加<br />attribution 地图数据属性    默认添加<br />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 +=
'<i style="background:' +
colors[i] +
'"></i> ' +
grades[i] +
(grades[i + 1] ? '' + grades[i + 1] + '<br>' : '+');
}
return el;
};
legend.addTo(scene);
```
##
## FAQ

View File

@ -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,

View File

@ -62,7 +62,7 @@ scene.addMarker(marker);
#### 默认 Marker
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
`const marker = new L7.Marker({color:'blue'})`
#### 自定义 Marker

View File

@ -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 的偏移量

View File

@ -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 自定义性比较弱,实现成本比较高,优势可以绘制大量的数据,性能比较好
## 使用

View File

@ -26,7 +26,22 @@ const popup = new L7.Popup(option);
#### setLnglat
设置 popup 的经纬度位置<br />**参数**lnglat 经纬度数组 [112,32]
设置 popup 的经纬度位置
**参数**lnglat
支持数组
```javascript
[112,32]
```
经纬度对象
```javascript
{
lng: 112,
lat: 30
}
```
```javascript
popup.setLnglat([112, 32]);
@ -50,14 +65,11 @@ popup.addTo(scene);
```javascript
var html =
'<p>\u7701\u4EFD\uFF1A' +
feature.s +
'</p>\n <p>\u5730\u533A\uFF1A' +
feature.m +
'</p>\n <p>\u6E29\u5EA6\uFF1A' +
feature.t +
'</p>\n ';
popup.setHtml(html);
`<p>省份
${feature.s} </p><p>地区
${feature.m}</p><p>数值
${feature.t}</p>`;
popup.setHtml(html);
```
#### setDOMContent
@ -66,6 +78,7 @@ popup.setHtml(html);
区别于 setHtml 对象只能传字符串
**tips**
如果需要将 react 组件渲染到 popup 可以用此方法。
#### setText

View File

@ -26,7 +26,22 @@ const popup = new L7.Popup(option);
#### setLnglat
设置 popup 的经纬度位置<br />**参数**lnglat 经纬度数组 [112,32]
设置 popup 的经纬度位置
**参数**lnglat
支持数组
```javascript
[112,32]
```
经纬度对象
```javascript
{
lng: 112,
lat: 30
}
```
```javascript
popup.setLnglat([112, 32]);
@ -50,14 +65,11 @@ popup.addTo(scene);
```javascript
var html =
'<p>\u7701\u4EFD\uFF1A' +
feature.s +
'</p>\n <p>\u5730\u533A\uFF1A' +
feature.m +
'</p>\n <p>\u6E29\u5EA6\uFF1A' +
feature.t +
'</p>\n ';
popup.setHtml(html);
`<p>省份
${feature.s} </p><p>地区
${feature.m}</p><p>数值
${feature.t}</p>`;
popup.setHtml(html);
```
#### setDOMContent
@ -66,6 +78,7 @@ popup.setHtml(html);
区别于 setHtml 对象只能传字符串
**tips**
如果需要将 react 组件渲染到 popup 可以用此方法。
#### setText

View File

@ -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);

View File

@ -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);

View File

@ -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');
```

View File

@ -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');
```

View File

@ -39,7 +39,7 @@ layer.size('weight', [0,1])
- colors  颜色数组
- positions 数据区间
:warning: color, position 的长度要相同
⚠️ color, position 的长度要相同
## 完整代码

View File

@ -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({

View File

@ -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,33 @@ 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 事件类型

View File

@ -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,33 @@ 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 事件类型

View File

@ -7,7 +7,7 @@ order: 1
## 使用
### 数据
绘制弧线只需提供起点坐标即可
绘制弧线只需提供起点坐标即可
```javascript
source(data, {
@ -23,7 +23,7 @@ order: 1
### shape
弧线支持种弧线算法
弧线支持种弧线算法
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线

View File

@ -7,7 +7,7 @@ order: 1
## 使用
### 数据
绘制弧线只需提供起点坐标即可
绘制弧线只需提供起点坐标即可
```javascript
source(data, {
@ -23,7 +23,7 @@ order: 1
### shape
弧线支持种弧线算法
弧线支持种弧线算法
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线

View File

@ -14,7 +14,7 @@ order: 2
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线
- arc3d 3d 弧线地图 3D 视角
⚠️ 弧线只需要设置起点坐标即可
⚠️ 弧线只需要设置起点坐标即可
```
new LineLayer()

View File

@ -14,7 +14,7 @@ order: 0
- greatcircle 大圆航线,地图两个点的最近距离不是两个点连线,而是大圆航线
- arc3d 3d 弧线地图 3D 视角
⚠️ 弧线只需要设置起点坐标即可
⚠️ 弧线只需要设置起点坐标即可
```
new LineLayer()

View File

@ -31,11 +31,10 @@ order: 5
**getClustersLeaves(id: string)**
根据id获取聚合节点的数据
根据id获取聚合节点的数据每个聚合节点会有一个唯一ID
- id 聚合数据id
```javascript

View File

@ -7,15 +7,14 @@ order: 3
## 使用
### shape
- dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
### color
- 无权重
如果数据没有权重可以将颜色设置为常量,渲染时会自动进行颜色叠加,点越多颜色
如果数据没有权重可以将颜色设置为常量,渲染时会自动进行颜色叠加,点越多颜色
- 有权重
为数据有权重可以设置一组同一色相不同亮度的色带
如果数据有权重可以设置一组同一色相,不同亮度的色带,值越大亮度会越亮
```javascript

View File

@ -12,9 +12,9 @@ order: 3
### color
- 无权重
如果数据没有权重可以将颜色设置为常量,渲染时会自动进行颜色叠加,点越多颜色
如果数据没有权重可以将颜色设置为常量,渲染时会自动进行颜色叠加,点越多颜色
- 有权重
为数据有权重可以设置一组同一色相不同亮度的色带
如果数据有权重可以设置一组同一色相,不同亮度的色带,值越大亮度会越亮
```javascript

View File

@ -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 表示高度
```

View File

@ -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 的长度要相同

View File

@ -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 的长度要相同

View File

@ -5,8 +5,8 @@ order: 2
# 简介
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持 高德地图和 MapBox 两种。=
L7 在内部解决了不同底图地图直接的差异,同时 L7 层面统一管理地图的操作方法。
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种。
L7 在内部解决了不同地图底图之间差异,同时 L7 层面统一管理地图的操作方法。
## Map

View File

@ -5,8 +5,8 @@ order: 2
# 简介
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持 高德地图和 MapBox 两种。=
L7 在内部解决了不同底图地图直接的差异,同时 L7 层面统一管理地图的操作方法。
L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种。
L7 在内部解决了不同地图底图之间差异,同时 L7 层面统一管理地图的操作方法。
## Map

View File

@ -214,7 +214,10 @@ scene.setCenter([lng, lat]);
scene.setZoomAndCenter(zoom, center);
```
参数zoom {number}<br />center {LngLat}
参数:
- zoom {number}
- center {LngLat}
### setRotation
@ -260,7 +263,9 @@ scene.panTo(LngLat);
scene.panBy(x, y);
```
参数:<br />`x` {number} 水平方向移动像素 向右为正方向<br />      `y` {number} 垂直方向移动像素 向下为正方向
参数:
- `x` {number} 水平方向移动像素 向右为正方向
- `y` {number} 垂直方向移动像素 向下为正方向
### setPitch
@ -270,11 +275,16 @@ scene.panBy(x, y);
scene.setPitch(pitch);
```
参数 :<br />   `pitch` {number}
参数 :
 `pitch` {number}
### fitBounds
地图缩放到某个范围内<br />参数 :<br />  `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
地图缩放到某个范围内
参数 :
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
```javascript
scene.fitBounds([112, 32, 114, 35]);
@ -298,11 +308,14 @@ scene.removeLayer(layer);
#### 参数
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
- `eventName` {string} 事件名
- `handler` {function } 事件回调函数
### off
移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
移除事件监听
- `eventName` {string} 事件名
- `handler` {function } 事件回调函数
### 地图事件

View File

@ -316,11 +316,14 @@ scene.removeLayer(layer);
#### 参数
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
`eventName` {string} 事件名
`handler` {function } 事件回调函数
### off
移除事件监听<br />`eventName` {string} 事件名<br />`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) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果,则在拽停止,缓动开始前触发

View File

@ -8,7 +8,7 @@ L7 支持 CSV 以逗号分隔的 CSV 数据加载。
CSV 是文本数据结构,很难表达复杂的地理数据结构,因此 CSV 仅支持两种数据结构
- 点数据 需要指定经度,纬度坐标
- 线段,弧线数据 需要指定 起点的 经度,纬度坐标
- 线段,弧线数据 需要指定 起点的 经度,纬度坐标
## parser

View File

@ -8,7 +8,7 @@ L7 支持 CSV 以逗号分隔的 CSV 数据加载。
CSV 是文本数据结构,很难表达复杂的地理数据结构,因此 CSV 仅支持两种数据结构
- 点数据 需要指定经度,纬度坐标
- 线段,弧线数据 需要指定 起点的 经度,纬度坐标
- 线段,弧线数据 需要指定 起点的 经度,纬度坐标
## parser

View File

@ -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 = [

View File

@ -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 = [

View File

@ -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 个统计维度

View File

@ -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, {

View File

@ -1,5 +1,5 @@
---
title: Data
title: 数据
order: 2
---
@ -7,7 +7,9 @@ order: 2
目前L7支持的数据格式有GeoJson,CSV,JSon Image
GeoJSON 支持点、线、面,等所有的空间数据格式。<br />CSV 支持,点,线段,弧线的支持。<br />JSON 支持简单的点、线,面,不支持多点,多线的,多面数据格式。
- GeoJSON 支持点、线、面等所有的标准空间数据格式。
- CSV 支持点、线段、弧线等数据类型。
- JSON 支持简单的点、线,面数据类型,不支持多点,多线的,多面数据格式。
## GeoJSON
@ -55,7 +57,7 @@ GeoJSON 支持点、线、面,等所有的空间数据格式。<br />CSV 支
}
```
#### 全国行政区划GeoJON 支持省市县维度 
## 地理统计分析工具
[turfjs](http://turfjs.org/):  地理数据计算处理统计分析的Javascript 库
## 在线工具
@ -63,3 +65,12 @@ GeoJSON 支持点、线、面,等所有的空间数据格式。<br />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/)

View File

@ -7,7 +7,9 @@ order: 2
目前L7支持的数据格式有GeoJson,CSV,JSon Image
GeoJSON 支持点、线、面,等所有的空间数据格式。<br />CSV 支持,点,线段,弧线的支持。<br />JSON 支持简单的点、线,面,不支持多点,多线的,多面数据格式。
- GeoJSON 支持点、线、面等所有的标准空间数据格式。
- CSV 支持点、线段、弧线等数据类型。
- JSON 支持简单的点、线,面数据类型,不支持多点,多线的,多面数据格式。
## GeoJSON

View File

@ -1,8 +1,9 @@
---
title: How to start the demo locally
title: 本地运行demo
order: 1
---
### 一、打开L7demo页面
@ -11,7 +12,7 @@ order: 1
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bKT5TrlYlGEAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
你可能没有注意,代码区的上方有一排工具按钮,注意了你可能不知道干什么用的
你可能没有注意,代码区的上方有一排工具按钮,。
### 二、打开 codesandbox。
@ -22,7 +23,7 @@ order: 1
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*coZsTLbX2FQAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
你发现你进入了一个线代码编辑器比较流行,这里面你可以修改代码,并且能够随时看到效果
你发现你进入了一个线代码编辑器,这里面你可以修改代码,并且能够随时看到效果
你可能想说我就想本地跑起来,不想在线修改。
@ -57,6 +58,9 @@ yarn start
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oQQ2RbOzx0oAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
现在你可以尽情的本地修改代码,添加自己的图层了。
L7 所有demo都可以在codesandbox 打开,你可以下载代码。

View File

@ -12,7 +12,7 @@ order: 1
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bKT5TrlYlGEAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
你可能没有注意,代码区的上方有一排工具按钮,注意了你可能不知道干什么用的
你可能没有注意,代码区的上方有一排工具按钮,。
### 二、打开 codesandbox。
@ -23,7 +23,7 @@ order: 1
<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*coZsTLbX2FQAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
你发现你进入了一个线代码编辑器比较流行,这里面你可以修改代码,并且能够随时看到效果
你发现你进入了一个线代码编辑器,这里面你可以修改代码,并且能够随时看到效果
你可能想说我就想本地跑起来,不想在线修改。

View File

@ -32,7 +32,9 @@ const scene = new Scene({
- 不使用mapbox token
### 如何离线化使用MapBox
你只要不使用MapBox的数据底图服务就可以离线使用mapbox所有数据服务资源都是在style里面配置的。除了数据服务以外还有一些静态资源这些主要是图片标注文字标注的时候使用。<br />mapbox本身资源在国外如果在国内单独部署一套单独使用加载速度体验还是很好的
你只要不使用MapBox的数据底图服务就可以离线使用mapbox所有数据服务资源都是在style里面配置的。除了数据服务以外还有一些静态资源这些主要是图片标注文字标注的时候使用。
mapbox本身数据资源在国外如果在国内单独部署使用加载速度体验还是很好的
我们先了解一下MapBox样式包含哪些配置项。
@ -43,7 +45,9 @@ const scene = new Scene({
- sprite雪碧图将一个地图涉及到的所有零星图标图片都包含到一张大图中。
- glyphs.pbf格式的字体样式例如微软雅黑等字体库。
- sources图层的资源文件可以支持矢量切片、栅格、dem栅格、图片、geojson、视频等格式
- layers是对每个图层样式的描述这里就是对地图样式渲染的关键可以做定制化地图样式。<br />具体参数及其api可以参考mapbox官网
- layers是对每个图层样式的描述这里就是对地图样式渲染的关键可以做定制化地图样式。
具体参数及其api可以参考mapbox官网
如果做到本地化只需要 spriteglyphs 本地化就可以了,地图服务可以加载其他服务。

View File

@ -15,7 +15,7 @@ Current version: ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7)
Include the L7 JS JavaScript <head> of your HTML file.
:warning: 如果需要引用第三方地图API请确保在先引入第三方API然后引入L7
⚠️ 如果需要引用第三方地图API请确保在先引入第三方API然后引入L7
```html
<head>

View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.0.10",
"version": "2.0.11",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.0.10",
"version": "2.0.11",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,8 +24,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.0.10",
"@antv/l7-utils": "^2.0.10",
"@antv/l7-core": "^2.0.11",
"@antv/l7-utils": "^2.0.11",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

View File

@ -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);

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.0.10",
"version": "2.0.11",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -22,7 +22,7 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-utils": "^2.0.10",
"@antv/l7-utils": "^2.0.11",
"@babel/runtime": "^7.7.7",
"@mapbox/tiny-sdf": "^1.1.1",
"ajv": "^6.10.2",

View File

@ -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 });
};
}

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.0.10",
"version": "2.0.11",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,11 +24,11 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "^2.0.10",
"@antv/l7-core": "^2.0.10",
"@antv/l7-layers": "^2.0.10",
"@antv/l7-maps": "^2.0.10",
"@antv/l7-scene": "^2.0.10",
"@antv/l7-component": "^2.0.11",
"@antv/l7-core": "^2.0.11",
"@antv/l7-layers": "^2.0.11",
"@antv/l7-maps": "^2.0.11",
"@antv/l7-scene": "^2.0.11",
"@babel/runtime": "^7.7.7"
},
"gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.0.10",
"version": "2.0.11",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -22,9 +22,9 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.0.10",
"@antv/l7-source": "^2.0.10",
"@antv/l7-utils": "^2.0.10",
"@antv/l7-core": "^2.0.11",
"@antv/l7-source": "^2.0.11",
"@antv/l7-utils": "^2.0.11",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.1.0",
"@turf/meta": "^6.0.2",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.0.10",
"version": "2.0.11",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,8 +23,8 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.0.10",
"@antv/l7-utils": "^2.0.10",
"@antv/l7-core": "^2.0.11",
"@antv/l7-utils": "^2.0.11",
"@babel/runtime": "^7.7.7",
"gl-matrix": "^3.1.0",
"inversify": "^5.0.1",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.0.10",
"version": "2.0.11",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,7 +25,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.0.10",
"@antv/l7-core": "^2.0.11",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"lodash": "^4.17.15",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.0.10",
"version": "2.0.11",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -22,11 +22,11 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.0.10",
"@antv/l7-core": "^2.0.10",
"@antv/l7-maps": "^2.0.10",
"@antv/l7-renderer": "^2.0.10",
"@antv/l7-utils": "^2.0.10",
"@antv/l7-component": "^2.0.11",
"@antv/l7-core": "^2.0.11",
"@antv/l7-maps": "^2.0.11",
"@antv/l7-renderer": "^2.0.11",
"@antv/l7-utils": "^2.0.11",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.0.10",
"version": "2.0.11",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,8 +24,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.0.10",
"@antv/l7-utils": "^2.0.10",
"@antv/l7-core": "^2.0.11",
"@antv/l7-utils": "^2.0.11",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

View File

@ -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';

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.0.10",
"version": "2.0.11",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",