mirror of https://gitee.com/antv-l7/antv-l7
docs: add text,cluster animate demos
This commit is contained in:
parent
7e267a84d1
commit
d13234359b
|
@ -0,0 +1,36 @@
|
||||||
|
---
|
||||||
|
title: ChangeLog
|
||||||
|
order: 10
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2020.01.06 2.0 正式版
|
||||||
|
|
||||||
|
###✨ Features
|
||||||
|
• 新增弧线图,路径图动画功能
|
||||||
|
• 新增气泡图水波动画功能
|
||||||
|
• 新增聚合地图
|
||||||
|
• 新增文本标注,支持避让
|
||||||
|
• 新增城市建筑图层
|
||||||
|
• 新增栅格地图,支持卫星遥感数据可视化
|
||||||
|
• 新增图层交互事件
|
||||||
|
|
||||||
|
### 🍏 Improvements
|
||||||
|
|
||||||
|
• Marker 支持事件和自定义数据
|
||||||
|
• 弧线支持虚线样式
|
||||||
|
• 面图层支持,文本标注,气泡图效果
|
||||||
|
• 重构了文档结构
|
||||||
|
• source 支持 map,join,filter 数据处理支持
|
||||||
|
• source 支持数据更新
|
||||||
|
• 支持 blend 效果配置
|
||||||
|
• 支持通过地图实例初始化地图
|
||||||
|
• 官网新增所有图表概览页面
|
||||||
|
|
||||||
|
### 🐞 Bug Fixes
|
||||||
|
|
||||||
|
• 修复容器 resize 不能正常响应
|
||||||
|
• 修复 babel 打包问题
|
||||||
|
• 修复地图组件加载报错问题
|
||||||
|
• 修复样式配置 strokeColor- stroke
|
||||||
|
|
||||||
|
## 2019.11.22 2.0beta
|
|
@ -0,0 +1,36 @@
|
||||||
|
---
|
||||||
|
title: 发布日志
|
||||||
|
order: 10
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2020.01.06 2.0 正式版
|
||||||
|
|
||||||
|
###✨ Features
|
||||||
|
• 新增弧线图,路径图动画功能
|
||||||
|
• 新增气泡图水波动画功能
|
||||||
|
• 新增聚合地图
|
||||||
|
• 新增文本标注,支持避让
|
||||||
|
• 新增城市建筑图层
|
||||||
|
• 新增栅格地图,支持卫星遥感数据可视化
|
||||||
|
• 新增图层交互事件
|
||||||
|
|
||||||
|
### 🍏 Improvements
|
||||||
|
|
||||||
|
• Marker 支持事件和自定义数据
|
||||||
|
• 弧线支持虚线样式
|
||||||
|
• 面图层支持,文本标注,气泡图效果
|
||||||
|
• 重构了文档结构
|
||||||
|
• source 支持 map,join,filter 数据处理支持
|
||||||
|
• source 支持数据更新
|
||||||
|
• 支持 blend 效果配置
|
||||||
|
• 支持通过地图实例初始化地图
|
||||||
|
• 官网新增所有图表概览页面
|
||||||
|
|
||||||
|
### 🐞 Bug Fixes
|
||||||
|
|
||||||
|
• 修复容器 resize 不能正常响应
|
||||||
|
• 修复 babel 打包问题
|
||||||
|
• 修复地图组件加载报错问题
|
||||||
|
• 修复样式配置 strokeColor- stroke
|
||||||
|
|
||||||
|
## 2019.11.22 2.0beta
|
|
@ -16,7 +16,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
||||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
2.0.beta 版本目前有些功能还未完善,1 月 6 号我们正式版,将支持 1.x 版的所有功能,而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档,
|
✨ 2020.01.06 2.0 版本正式发布
|
||||||
|
|
||||||
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
|
|
|
@ -7,9 +7,7 @@ redirect_from:
|
||||||
|
|
||||||
# L7 地理空间数据可视分析引擎
|
# L7 地理空间数据可视分析引擎
|
||||||
|
|
||||||
2.0.beta 版本目前有些功能还未完善,
|
✨ 2020.01.06 2.0 版本正式发布
|
||||||
|
|
||||||
⚠️ 1 月 6 号 正式版发版,将支持 1.x 版的所有功能,而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档,
|
|
||||||
|
|
||||||
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
title: 1.x stable
|
title: 1.x history
|
||||||
order: 1
|
order: 9
|
||||||
---
|
---
|
||||||
|
|
||||||
## L7 1.x 版本
|
## L7 1.x 版本
|
||||||
|
@ -17,8 +17,6 @@ order: 1
|
||||||
|
|
||||||
### npm 安装使用
|
### npm 安装使用
|
||||||
|
|
||||||
会默认安装 1.x 的最新版本,2.0 正式版本发布后才会默认 2.0 版本
|
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install @antv/l7
|
npm install @antv/l7
|
||||||
|
|
||||||
|
@ -29,7 +27,3 @@ npm install @antv/l7
|
||||||
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
||||||
|
|
||||||
L7 2.0 beta 版本已经发布,一些功能还没有完善,我们将在 1 月 6 号发布 2.0 正式版,会包含 1.x 版的所有功能.
|
|
||||||
|
|
||||||
L7 2.0 beta 版本已经发布,一些功能还没有完善,我们将在 1 月 6 号发布 2.0 正式版,会包含 1.x 版的所有功能.
|
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
title: 1.x 稳定版
|
title: 1.x 历史版本
|
||||||
order: 1
|
order: 9
|
||||||
---
|
---
|
||||||
|
|
||||||
## L7 1.x 版本
|
## L7 1.x 版本
|
||||||
|
@ -12,7 +12,7 @@ order: 1
|
||||||
#### CDN 在线使用连接为
|
#### CDN 在线使用连接为
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.4/build/L7-min.js"></script>
|
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.14/build/L7-min.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### npm 安装使用
|
### npm 安装使用
|
||||||
|
@ -29,5 +29,3 @@ npm install @antv/l7
|
||||||
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
- [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||||
|
|
||||||
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
- [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
|
||||||
|
|
||||||
L7 2.0 beta 版本已经发布,一些功能还没有完善,我们将在 1 月 6 号发布 2.0 正式版,会包含 1.x 版的所有功能.
|
|
|
@ -7,7 +7,7 @@ redirect_from:
|
||||||
|
|
||||||
# L7
|
# L7
|
||||||
|
|
||||||
Current version: ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7/beta)
|
Current version: ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7)
|
||||||
|
|
||||||
## 使用方法
|
## 使用方法
|
||||||
|
|
||||||
|
@ -156,7 +156,21 @@ export default class AMapExample extends React.Component {
|
||||||
|
|
||||||
更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories)
|
更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories)
|
||||||
|
|
||||||
### Vue 欢迎补充
|
## 不同项目使用模板
|
||||||
[1.x Vue 使用](https://codesandbox.io/s/l7-vue1xdemo-wknsz)
|
|
||||||
### Html
|
不同项目模板在CodeSandbox你可以预览,也可以下载到本地
|
||||||
[2.0版本 HTML 使用模板](https://codesandbox.io/s/l7htmltemplate-vp2lp)
|
|
||||||
|
### React
|
||||||
|
|
||||||
|
[地址](https://codesandbox.io/s/l720react-jfwyz)
|
||||||
|
|
||||||
|
### Vue
|
||||||
|
|
||||||
|
[地址](https://codesandbox.io/s/l720vue-uef1x)
|
||||||
|
|
||||||
|
### Angular
|
||||||
|
|
||||||
|
[地址](https://codesandbox.io/s/angulartest-chpff)
|
||||||
|
|
||||||
|
### HTML CDN
|
||||||
|
[地址](https://codesandbox.io/s/l7cdndemo-gfg9m)
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { Scene, LineLayer } from '@antv/l7';
|
||||||
|
import { Mapbox } from '@antv/l7-maps';
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new Mapbox({
|
||||||
|
center: [ -74.006, 40.7128 ],
|
||||||
|
zoom: 15,
|
||||||
|
style: 'dark'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch(
|
||||||
|
'https://gw.alipayobjects.com/os/basement_prod/5592c737-1c70-4d6b-82c1-e74e5a019b04.json'
|
||||||
|
)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
const lineLayer = new LineLayer()
|
||||||
|
.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'json',
|
||||||
|
coordinates: 'path'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.size(3)
|
||||||
|
.shape('line')
|
||||||
|
.color('color', v => {
|
||||||
|
return `rgb(${v[0]})`;
|
||||||
|
})
|
||||||
|
.animate({
|
||||||
|
interval: 0.5,
|
||||||
|
trailLength: 0.4,
|
||||||
|
duration: 4
|
||||||
|
});
|
||||||
|
scene.addLayer(lineLayer);
|
||||||
|
});
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { Scene, LineLayer } from '@antv/l7';
|
||||||
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new GaodeMap({
|
||||||
|
center: [ 120.19382669582967, 30.258134 ],
|
||||||
|
pitch: 0,
|
||||||
|
zoom: 16,
|
||||||
|
style: 'dark'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch(
|
||||||
|
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
|
||||||
|
)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
const layer = new LineLayer()
|
||||||
|
.source(data)
|
||||||
|
.size(1)
|
||||||
|
.shape('line')
|
||||||
|
.color('#ff893a')
|
||||||
|
.animate({
|
||||||
|
interval: 0.4,
|
||||||
|
duration: 1,
|
||||||
|
trailLength: 0.8
|
||||||
|
});
|
||||||
|
scene.addLayer(layer);
|
||||||
|
});
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { Scene, PointLayer } from '@antv/l7';
|
||||||
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new GaodeMap({
|
||||||
|
center: [ 120.19382669582967, 30.258134 ],
|
||||||
|
pitch: 0,
|
||||||
|
style: 'dark',
|
||||||
|
zoom: 3
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
const pointLayer = new PointLayer({})
|
||||||
|
.source(data, {
|
||||||
|
cluster: true
|
||||||
|
})
|
||||||
|
.shape('circle')
|
||||||
|
.scale('point_count', {
|
||||||
|
type: 'quantile'
|
||||||
|
})
|
||||||
|
.size('point_count', [ 5, 10, 15, 20, 25 ])
|
||||||
|
.animate(false)
|
||||||
|
.color('yellow')
|
||||||
|
.style({
|
||||||
|
opacity: 0.5,
|
||||||
|
strokeWidth: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
scene.addLayer(pointLayer);
|
||||||
|
});
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"title": {
|
||||||
|
"zh": "中文分类",
|
||||||
|
"en": "Category"
|
||||||
|
},
|
||||||
|
"demos": [
|
||||||
|
{
|
||||||
|
"filename": "cluster.js",
|
||||||
|
"title": "聚合图",
|
||||||
|
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Cluster Map
|
||||||
|
order: 1
|
||||||
|
---
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: "聚合图"
|
||||||
|
order: 1
|
||||||
|
---
|
|
@ -1,4 +1,4 @@
|
||||||
---
|
---
|
||||||
title: "亮度图"
|
title: 亮度图
|
||||||
order: 1
|
order: 1
|
||||||
---
|
---
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"title": {
|
||||||
|
"zh": "中文分类",
|
||||||
|
"en": "Category"
|
||||||
|
},
|
||||||
|
"demos": [
|
||||||
|
{
|
||||||
|
"filename": "point_text.js",
|
||||||
|
"title": "点数据标注",
|
||||||
|
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "polygon_text.js",
|
||||||
|
"title": "面数据标注",
|
||||||
|
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { Scene, PointLayer } from '@antv/l7';
|
||||||
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new GaodeMap({
|
||||||
|
center: [ 120.19382669582967, 30.258134 ],
|
||||||
|
pitch: 0,
|
||||||
|
style: 'light',
|
||||||
|
zoom: 3
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
const pointLayer = new PointLayer({})
|
||||||
|
.source(data.list, {
|
||||||
|
parser: {
|
||||||
|
type: 'json',
|
||||||
|
x: 'j',
|
||||||
|
y: 'w'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.shape('m', 'text')
|
||||||
|
.size(18)
|
||||||
|
.color('w', [ '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac' ])
|
||||||
|
.style({
|
||||||
|
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||||
|
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||||
|
spacing: 2, // 字符间距
|
||||||
|
padding: [ 1, 1 ], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近
|
||||||
|
stroke: 'red', // 描边颜色
|
||||||
|
strokeWidth: 1, // 描边宽度
|
||||||
|
strokeOpacity: 1.0
|
||||||
|
});
|
||||||
|
|
||||||
|
scene.addLayer(pointLayer);
|
||||||
|
});
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { Scene, PolygonLayer } from '@antv/l7';
|
||||||
|
import { Mapbox } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new Mapbox({
|
||||||
|
pitch: 0,
|
||||||
|
style: 'light',
|
||||||
|
center: [ -96, 37.8 ],
|
||||||
|
zoom: 3
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch(
|
||||||
|
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
|
||||||
|
)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
const layer = new PolygonLayer({})
|
||||||
|
.source(data)
|
||||||
|
.color('blue')
|
||||||
|
.shape('name', 'text')
|
||||||
|
.size(18)
|
||||||
|
.style({
|
||||||
|
opacity: 0.8
|
||||||
|
});
|
||||||
|
scene.addLayer(layer);
|
||||||
|
});
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: label
|
||||||
|
order: 1
|
||||||
|
---
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: 文本标注
|
||||||
|
order: 1
|
||||||
|
---
|
|
@ -42,7 +42,7 @@ fetch(
|
||||||
})
|
})
|
||||||
.source(data)
|
.source(data)
|
||||||
.color('#fff')
|
.color('#fff')
|
||||||
.size(0.3)
|
.size(0.8)
|
||||||
.style({
|
.style({
|
||||||
opacity: 1
|
opacity: 1
|
||||||
});
|
});
|
||||||
|
|
|
@ -9,6 +9,11 @@
|
||||||
"title": "全国地图行政区划",
|
"title": "全国地图行政区划",
|
||||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ"
|
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"filename": "usa.js",
|
||||||
|
"title": "地图交互",
|
||||||
|
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HfZ7SKrS9fcAAAAAAAAAAABkARQnAQ"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"filename": "fill.js",
|
"filename": "fill.js",
|
||||||
"title": "连续填充图",
|
"title": "连续填充图",
|
||||||
|
|
|
@ -56,11 +56,10 @@ Promise.all([
|
||||||
})
|
})
|
||||||
.source(world)
|
.source(world)
|
||||||
.color('#fff')
|
.color('#fff')
|
||||||
.size(0.3)
|
.size(0.8)
|
||||||
.style({
|
.style({
|
||||||
opacity: 1
|
opacity: 1
|
||||||
});
|
});
|
||||||
|
|
||||||
scene.addLayer(layer);
|
scene.addLayer(layer);
|
||||||
scene.addLayer(layer2);
|
scene.addLayer(layer2);
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,61 @@
|
||||||
|
import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7';
|
||||||
|
import { Mapbox } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new Mapbox({
|
||||||
|
pitch: 0,
|
||||||
|
style: 'light',
|
||||||
|
center: [ -96, 37.8 ],
|
||||||
|
zoom: 3
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch(
|
||||||
|
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
|
||||||
|
)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
const layer = new PolygonLayer({})
|
||||||
|
.source(data)
|
||||||
|
.color(
|
||||||
|
'density', d => {
|
||||||
|
return d > 1000 ? '#800026' :
|
||||||
|
d > 500 ? '#BD0026' :
|
||||||
|
d > 200 ? '#E31A1C' :
|
||||||
|
d > 100 ? '#FC4E2A' :
|
||||||
|
d > 50 ? '#FD8D3C' :
|
||||||
|
d > 20 ? '#FEB24C' :
|
||||||
|
d > 10 ? '#FED976' :
|
||||||
|
'#FFEDA0';
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.shape('fill')
|
||||||
|
.active(true)
|
||||||
|
.style({
|
||||||
|
opacity: 0.8
|
||||||
|
});
|
||||||
|
const layer2 = new LineLayer({
|
||||||
|
zIndex: 2
|
||||||
|
})
|
||||||
|
.source(data)
|
||||||
|
.color('#fff')
|
||||||
|
.active(true)
|
||||||
|
.size(1)
|
||||||
|
.style({
|
||||||
|
lineType: 'dash',
|
||||||
|
dashArray: [ 2, 2 ],
|
||||||
|
opacity: 1
|
||||||
|
});
|
||||||
|
scene.addLayer(layer);
|
||||||
|
scene.addLayer(layer2);
|
||||||
|
|
||||||
|
layer.on('mousemove', e => {
|
||||||
|
const popup = new Popup({
|
||||||
|
offsets: [ 0, 0 ]
|
||||||
|
})
|
||||||
|
.setLnglat(e.lngLat)
|
||||||
|
.setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
|
||||||
|
scene.addPopup(popup);
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue