mirror of https://gitee.com/antv-l7/antv-l7
docs: 修复文档中描述不确切的地方&修复dblclick兼容问题
This commit is contained in:
thinkinggis
parent
6579611559
commit
0e16d54209
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ scene.addMarker(marker);
|
|||
|
||||
#### 默认 Marker
|
||||
|
||||
\*\*<br />`const marker = new L7.Marker({color:'blue'})`
|
||||
`const marker = new L7.Marker({color:'blue'})`
|
||||
|
||||
#### 自定义 Marker
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Marker
|
|||
order: 3
|
||||
---
|
||||
|
||||
Marker 地图标注 目前只支持 2D dom 标注
|
||||
Marker 地图标注 目前只支持 2D Dom 标注
|
||||
|
||||
## 构造函数
|
||||
|
||||
|
|
@ -13,7 +13,8 @@ Marker
|
|||
|
||||
#### option
|
||||
|
||||
- color `string`  设置默认 marker 的颜色
|
||||
- color `string`
|
||||
 设置默认 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 的偏移量
|
||||
|
|
|
|||
|
|
@ -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 自定义性比较弱，实现成本比较高，优势可以绘制大量的数据，性能比较好。
|
||||
|
||||
## 使用
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,24 @@ 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]);
|
||||
|
|
@ -49,14 +66,10 @@ popup.addTo(scene);
|
|||
设置 popup html 内容
|
||||
|
||||
```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 ';
|
||||
var html = `<p>省份
|
||||
${feature.s} </p><p>地区
|
||||
${feature.m}</p><p>数值
|
||||
${feature.t}</p>`;
|
||||
popup.setHtml(html);
|
||||
```
|
||||
|
||||
|
|
@ -66,6 +79,7 @@ popup.setHtml(html);
|
|||
区别于 setHtml 对象只能传字符串
|
||||
|
||||
**tips**
|
||||
|
||||
如果需要将 react 组件渲染到 popup 可以用此方法。
|
||||
|
||||
#### setText
|
||||
|
|
|
|||
|
|
@ -26,7 +26,24 @@ 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]);
|
||||
|
|
@ -49,14 +66,10 @@ popup.addTo(scene);
|
|||
设置 popup html 内容
|
||||
|
||||
```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 ';
|
||||
var html = `<p>省份
|
||||
${feature.s} </p><p>地区
|
||||
${feature.m}</p><p>数值
|
||||
${feature.t}</p>`;
|
||||
popup.setHtml(html);
|
||||
```
|
||||
|
||||
|
|
@ -66,6 +79,7 @@ popup.setHtml(html);
|
|||
区别于 setHtml 对象只能传字符串
|
||||
|
||||
**tips**
|
||||
|
||||
如果需要将 react 组件渲染到 popup 可以用此方法。
|
||||
|
||||
#### setText
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ layer.size('weight', [0,1])
|
|||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
:warning: color, position 的长度要相同
|
||||
⚠️ color, position 的长度要相同
|
||||
|
||||
## 完整代码
|
||||
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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 事件类型
|
||||
|
|
|
|||
|
|
@ -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 事件类型
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ order: 1
|
|||
## 使用
|
||||
|
||||
### 数据
|
||||
绘制弧线只需提供起始点坐标即可
|
||||
绘制弧线只需提供起止点坐标即可
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
|
|
@ -23,7 +23,7 @@ order: 1
|
|||
|
||||
### shape
|
||||
|
||||
弧线支持两种弧线算法
|
||||
弧线支持三种弧线算法
|
||||
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ order: 1
|
|||
## 使用
|
||||
|
||||
### 数据
|
||||
绘制弧线只需提供起始点坐标即可
|
||||
绘制弧线只需提供起止点坐标即可
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
|
|
@ -23,7 +23,7 @@ order: 1
|
|||
|
||||
### shape
|
||||
|
||||
弧线支持两种弧线算法
|
||||
弧线支持三种弧线算法
|
||||
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ order: 2
|
|||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
|
||||
⚠️ 弧线只需要设置起始点坐标即可
|
||||
⚠️ 弧线只需要设置起止点坐标即可
|
||||
|
||||
```
|
||||
new LineLayer()
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ order: 0
|
|||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
|
||||
⚠️ 弧线只需要设置起始点坐标即可
|
||||
⚠️ 弧线只需要设置起止点坐标即可
|
||||
|
||||
```
|
||||
new LineLayer()
|
||||
|
|
|
|||
|
|
@ -31,11 +31,10 @@ order: 5
|
|||
|
||||
**getClustersLeaves(id: string)**
|
||||
|
||||
根据id获取聚合节点的数据
|
||||
根据id获取聚合节点的数据，每个聚合节点会有一个唯一ID
|
||||
|
||||
- id 聚合数据id
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
|
|
|||
|
|
@ -7,15 +7,14 @@ order: 3
|
|||
## 使用
|
||||
|
||||
### shape
|
||||
|
||||
- dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
|
||||
|
||||
### color
|
||||
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
|
||||
- 有权重
|
||||
为数据有权重可以设置一组同一色相不同亮度的色带。
|
||||
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
|
||||
|
||||
|
||||
```javascript
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@ order: 3
|
|||
### color
|
||||
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
|
||||
- 有权重
|
||||
为数据有权重可以设置一组同一色相不同亮度的色带。
|
||||
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
|
||||
|
||||
|
||||
```javascript
|
||||
|
|
|
|||
|
|
@ -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 表示高度
|
||||
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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 的长度要相同
|
||||
|
|
|
|||
|
|
@ -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 的长度要相同
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ order: 2
|
|||
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。=
|
||||
L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。
|
||||
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种。
|
||||
L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。
|
||||
|
||||
## Map
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ order: 2
|
|||
|
||||
# 简介
|
||||
|
||||
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。=
|
||||
L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。
|
||||
L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种。
|
||||
L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管理地图的操作方法。
|
||||
|
||||
## Map
|
||||
|
||||
|
|
|
|||
|
|
@ -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,10 @@ scene.panTo(LngLat);
|
|||
scene.panBy(x, y);
|
||||
```
|
||||
|
||||
参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br /> `y` {number} 垂直方向移动像素 向下为正方向
|
||||
参数：
|
||||
|
||||
- `x` {number} 水平方向移动像素 向右为正方向
|
||||
- `y` {number} 垂直方向移动像素 向下为正方向
|
||||
|
||||
### setPitch
|
||||
|
||||
|
|
@ -270,11 +276,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 +309,15 @@ scene.removeLayer(layer);
|
|||
|
||||
#### 参数
|
||||
|
||||
`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
- `eventName` {string} 事件名
|
||||
- `handler` {function } 事件回调函数
|
||||
|
||||
### off
|
||||
|
||||
移除事件监听<br />`eventName` {string} 事件名<br />`hander` {function } 事件回调函数
|
||||
移除事件监听
|
||||
|
||||
- `eventName` {string} 事件名
|
||||
- `handler` {function } 事件回调函数
|
||||
|
||||
### 地图事件
|
||||
|
||||
|
|
|
|||
|
|
@ -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) => {}); //停止拖拽地图时触发。如地图有拖拽缓动效果，则在拽停止，缓动开始前触发
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ L7 支持 CSV 以逗号分隔的 CSV 数据加载。
|
|||
CSV 是文本数据结构，很难表达复杂的地理数据结构，因此 CSV 仅支持两种数据结构
|
||||
|
||||
- 点数据 需要指定经度，纬度坐标
|
||||
- 线段，弧线数据 需要指定 起始点的 经度，纬度坐标
|
||||
- 线段，弧线数据 需要指定 起止点的 经度，纬度坐标
|
||||
|
||||
## parser
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ L7 支持 CSV 以逗号分隔的 CSV 数据加载。
|
|||
CSV 是文本数据结构，很难表达复杂的地理数据结构，因此 CSV 仅支持两种数据结构
|
||||
|
||||
- 点数据 需要指定经度，纬度坐标
|
||||
- 线段，弧线数据 需要指定 起始点的 经度，纬度坐标
|
||||
- 线段，弧线数据 需要指定 起止点的 经度，纬度坐标
|
||||
|
||||
## parser
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
|
|
|
|||
|
|
@ -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 个统计维度
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
|
|
|
|||
|
|
@ -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/)
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ order: 2
|
|||
|
||||
目前L7支持的数据格式有GeoJson,CSV,JSon Image
|
||||
|
||||
GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
|
||||
- GeoJSON 支持点、线、面等所有的标准空间数据格式。
|
||||
- CSV 支持点、线段、弧线等数据类型。
|
||||
- JSON 支持简单的点、线，面数据类型，不支持多点，多线的，多面数据格式。
|
||||
|
||||
|
||||
## GeoJSON
|
||||
|
|
|
|||
|
|
@ -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 打开，你可以下载代码。
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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%">
|
||||
|
||||
你发现你进入了一个线代码编辑器比较流行，这个里面你可以修改代码，并且能够随时看到效果
|
||||
你发现你进入了一个在线的代码编辑器，在这里面你可以修改代码，并且能够随时看到效果
|
||||
|
||||
你可能想说我就想本地跑起来，不想在线修改。
|
||||
|
||||
|
|
|
|||
|
|
@ -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官网
|
||||
|
||||
如果做到本地化只需要 sprite，glyphs 本地化就可以了，地图服务可以加载其他服务。
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ Current version: 
|
|||
|
||||
Include the L7 JS JavaScript <head> of your HTML file.
|
||||
|
||||
:warning: 如果需要引用第三方地图API，请确保在先引入第三方API，然后引入L7
|
||||
⚠️ 如果需要引用第三方地图API，请确保在先引入第三方API，然后引入L7
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue