mirror of https://gitee.com/antv-l7/antv-l7
@thinkinggis
GitHub
commit
9c31328d45
|
|
@ -3,6 +3,15 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.1](https://github.com/antvis/L7/compare/v2.0.36...v2.1.1) (2020-03-15)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- ios 12 点击事件问题 & regl 版本锁定 ([ad52e8e](https://github.com/antvis/L7/commit/ad52e8e8fde4a7b4b3e16d86a6035bd7c07fb80c))
|
||||
- mapbox 光照问题 ([20d2a6d](https://github.com/antvis/L7/commit/20d2a6d8b803ca3ad87cc1ef69a59d1e3d348cef))
|
||||
- mapbox 光照问题 ([88aa585](https://github.com/antvis/L7/commit/88aa585c2a8339f6eb7518a92e5544733ba356e3))
|
||||
- update demo style ([c1960b5](https://github.com/antvis/L7/commit/c1960b50ef3e3d3aed6eb0f1934515678c2dbde8))
|
||||
|
||||
## [2.0.34](https://github.com/antvis/L7/compare/v2.0.32...v2.0.34) (2020-03-02)
|
||||
|
||||
### Bug Fixes
|
||||
|
|
|
|||
|
|
@ -7,21 +7,21 @@ order: 10
|
|||
|
||||
###✨ Features
|
||||
|
||||
• 新增 l7-react 版本
|
||||
• 可自定义样式的聚合图 MakerLayer
|
||||
• 新增 quantile、quantize 度量
|
||||
• 地图导出功能
|
||||
- 新增 l7-react 版本
|
||||
- 可自定义样式的聚合图 MakerLayer
|
||||
- 新增 quantile、quantize 度量
|
||||
- 地图导出功能
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
• IE 11 支持
|
||||
• 更新拾取机制，拾取更高效
|
||||
• 优化依赖包减少包体积
|
||||
- IE 11 支持
|
||||
- 更新拾取机制，拾取更高效
|
||||
- 优化依赖包减少包体积
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
• setData 更新机制
|
||||
• color,size,shape 更新重绘问题
|
||||
- setData 更新机制
|
||||
- color,size,shape 更新重绘问题
|
||||
|
||||
## 2020.01.06 2.0 正式版
|
||||
|
||||
|
|
|
|||
|
|
@ -7,41 +7,21 @@ order: 10
|
|||
|
||||
###✨ Features
|
||||
|
||||
• 新增 l7-react 版本
|
||||
• 可自定义样式的聚合图 MakerLayer
|
||||
• 新增 quantile、quantize 度量
|
||||
• 地图导出功能
|
||||
- 新增 l7-react 版本
|
||||
- 可自定义样式的聚合图 MakerLayer
|
||||
- 新增 quantile、quantize 度量
|
||||
- 地图导出功能
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
• IE 11 支持
|
||||
• 更新拾取机制，拾取更高效
|
||||
• 优化依赖包减少包体积
|
||||
- IE 11 支持
|
||||
- 更新拾取机制，拾取更高效
|
||||
- 优化依赖包减少包体积
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
• setData 更新机制
|
||||
• color,size,shape 更新重绘问题
|
||||
|
||||
## 2020.03.12 2.1 正式版
|
||||
|
||||
###✨ Features
|
||||
|
||||
• 新增 l7-react 版本
|
||||
• 可自定义样式的聚合图 MakerLayer
|
||||
• 新增 quantile、quantize 度量
|
||||
• 地图导出功能
|
||||
|
||||
### 🍏 Improvements
|
||||
|
||||
• IE 11 支持
|
||||
• 更新拾取机制，拾取更高效
|
||||
• 优化依赖包减少包体积
|
||||
|
||||
### 🐞 Bug Fixes
|
||||
|
||||
• setData 更新机制
|
||||
• color,size,shape 更新重绘问题
|
||||
- setData 更新机制
|
||||
- color,size,shape 更新重绘问题
|
||||
|
||||
## 2020.01.06 2.0 正式版
|
||||
|
||||
|
|
|
|||
|
|
@ -94,23 +94,7 @@ popup.open();
|
|||
|
||||
#### close
|
||||
|
||||
显示 popup
|
||||
|
||||
```javascript
|
||||
popup.close();
|
||||
```
|
||||
|
||||
#### open
|
||||
|
||||
显示 popup
|
||||
|
||||
```javascript
|
||||
popup.open();
|
||||
```
|
||||
|
||||
#### close
|
||||
|
||||
显示 popup
|
||||
关闭 popup
|
||||
|
||||
```javascript
|
||||
popup.close();
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
---
|
||||
title: Layer
|
||||
title: Base Layer
|
||||
order: 0
|
||||
---
|
||||
|
||||
# Layer
|
||||
|
||||
## 简介
|
||||
|
||||
L7 Layer 接口设计遵循图形语法，在可视表达上
|
||||
L7 Layer 接口设计遵循图形语法，所有图层都继承于该基类。
|
||||
|
||||
语法示例
|
||||
|
||||
|
|
@ -40,11 +38,15 @@ scene.addLayer(layer);
|
|||
|
||||
### minZoom
|
||||
|
||||
图层显示最小缩放等级，（0-18） {number} default 0
|
||||
图层显示最小缩放等级，（0-18） {number} Mapbox （0-24） 高德 （3-18）
|
||||
|
||||
### maxZoom
|
||||
|
||||
图层显示最大缩放等级 （0-18） {number} default 18
|
||||
图层显示最大缩放等级 （0-18） {number} Mapbox （0-24） 高德 （3-18）
|
||||
|
||||
### autoFit
|
||||
|
||||
layer 初始化完成之后，是否自动缩放到图层范围 {bool } default false
|
||||
|
||||
### blend
|
||||
|
||||
|
|
@ -69,7 +71,7 @@ scene.addLayer(layer);
|
|||
- parser 数据解析，默认是解析层 geojson
|
||||
- transforms [transform，transform ] 数据处理转换 可设置多个
|
||||
|
||||
parser 和 transforms [见 source 文档](https://www.yuque.com/antv/l7/source)
|
||||
parser 和 transforms [见 source 文档](../source/source)
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
|
|
@ -102,20 +104,46 @@ layer.source(data, {
|
|||
|
||||
### scale
|
||||
|
||||
scale('field', scaleConfig)
|
||||
|
||||
(field: string, scaleConfig: object)
|
||||
|
||||
为指定的数据字段进行列定义，返回 layer 实例。
|
||||
设置数据字段映射方法
|
||||
|
||||
- `field` 字段名。
|
||||
|
||||
- `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
|
||||
|
||||
#### scale 类型
|
||||
|
||||
**连续型**
|
||||
|
||||
- linear 线性
|
||||
- log
|
||||
- pow 指数型
|
||||
|
||||
**连续分类型**
|
||||
|
||||
- quantile 等分位
|
||||
- quantize 等间距
|
||||
|
||||
**枚举型**
|
||||
|
||||
- cat 枚举
|
||||
|
||||
```javascript
|
||||
{
|
||||
type: 'linear'; // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize
|
||||
}
|
||||
layer.scale('name', {
|
||||
type: 'cat',
|
||||
});
|
||||
|
||||
// 设置多个scale
|
||||
|
||||
// 字段名为 key, value 为scale配置项
|
||||
|
||||
layer.scale({
|
||||
name: {
|
||||
type: 'cat',
|
||||
},
|
||||
value: {
|
||||
type: 'linear',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## 视觉编码方法
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
---
|
||||
title: Layer
|
||||
title: 图层基类
|
||||
order: 0
|
||||
---
|
||||
|
||||
# Layer
|
||||
|
||||
## 简介
|
||||
|
||||
L7 Layer 接口设计遵循图形语法，在可视表达上
|
||||
L7 Layer 接口设计遵循图形语法，所有图层都继承于该基类。
|
||||
|
||||
语法示例
|
||||
|
||||
|
|
@ -40,11 +38,15 @@ scene.addLayer(layer);
|
|||
|
||||
### minZoom
|
||||
|
||||
图层显示最小缩放等级，（0-18） {number} default 0
|
||||
图层显示最小缩放等级，（0-18） {number} Mapbox （0-24） 高德 （3-18）
|
||||
|
||||
### maxZoom
|
||||
|
||||
图层显示最大缩放等级 （0-18） {number} default 18
|
||||
图层显示最大缩放等级 （0-18） {number} Mapbox （0-24） 高德 （3-18）
|
||||
|
||||
### autoFit
|
||||
|
||||
layer 初始化完成之后，是否自动缩放到图层范围 {bool } default false
|
||||
|
||||
### blend
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 弧线图
|
||||
title: ArcLayer
|
||||
order: 1
|
||||
---
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 气泡图
|
||||
title: Buble Map
|
||||
order: 1
|
||||
---
|
||||
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
---
|
||||
title: 复合图表地图
|
||||
title: Chart Map
|
||||
order: 6
|
||||
---
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
||||
通过自定义Marker 实现自定义图表
|
||||
|
||||
[demo示例](../../../../examples/point/chart)
|
||||
|
|
|
|||
|
|
@ -3,3 +3,7 @@ title: 复合图表地图
|
|||
order: 6
|
||||
---
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
||||
通过自定义Marker 实现自定义图表
|
||||
|
||||
[demo示例](../../../../examples/point/chart)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 聚合图
|
||||
title: Cluster Map
|
||||
order: 5
|
||||
---
|
||||
## 使用
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
title: 3D Column
|
||||
order: 5
|
||||
---
|
||||
3D柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
||||
|
||||
## 使用
|
||||
|
||||
3D柱图通过 PointLayer对象实例化，将shape设置成不同的3Dshape
|
||||
### shape
|
||||
|
||||
3D Shape 支持
|
||||
|
||||
- cylinder
|
||||
- triangleColumn
|
||||
- hexagonColumn
|
||||
- squareColumn
|
||||
|
||||
### size
|
||||
|
||||
3D柱图size 需要设置三个维度 [w, l, z]
|
||||
- w 宽
|
||||
- l 长
|
||||
- z 高度
|
||||
|
||||
size设置成常量
|
||||
|
||||
```
|
||||
layer.size([2,2,3])
|
||||
```
|
||||
size 回调函数设置
|
||||
|
||||
```
|
||||
layer.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
const column = new PointLayer({})
|
||||
.source(data)
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn'
|
||||
])
|
||||
.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
```
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 亮度图
|
||||
title: Dot Density
|
||||
order: 3
|
||||
---
|
||||
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 自定义 Marker
|
||||
title: Custom Marker
|
||||
order: 7
|
||||
---
|
||||
可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@ title: PointLayer
|
|||
order: 0
|
||||
---
|
||||
|
||||
# PointLayer
|
||||
|
||||
## 简介
|
||||
|
||||
点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@ title: PointLayer
|
|||
order: 0
|
||||
---
|
||||
|
||||
# PointLayer
|
||||
|
||||
## 简介
|
||||
|
||||
点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 散点图
|
||||
title: Scatter Map
|
||||
order: 2
|
||||
---
|
||||
在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
|
||||
|
|
|
|||
|
|
@ -1,4 +1,45 @@
|
|||
---
|
||||
title: 符号图
|
||||
title: Symbol Map
|
||||
order: 4
|
||||
---
|
||||
在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
符号图 通过PointLayer对象实例化，将shape设置成图片符号
|
||||
|
||||
### shape
|
||||
|
||||
通过scene addImage 方法
|
||||
|
||||
addImage()
|
||||
参数：
|
||||
- id 图片的id,
|
||||
- url 图片的url
|
||||
|
||||
```javascript
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||
);
|
||||
|
||||
```
|
||||
⚠️ 符号图的ID不能与点图层已有shape名称相同，比如不能设置 circle
|
||||
|
||||
符号图需要把shape设置成图片的id，同样符号图shape也支持数据映射
|
||||
|
||||
```javascript
|
||||
const scatter =
|
||||
new PointLayer()
|
||||
.source(data)
|
||||
.shape('00')
|
||||
.size(5)
|
||||
.color('red')
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
```
|
||||
## 相关demo
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
title: Label
|
||||
order: 4
|
||||
---
|
||||
为图层添加文本标注
|
||||
|
||||
## 使用
|
||||
|
||||
地图标注需要添加一个新的图层的实现
|
||||
|
||||
### shape
|
||||
|
||||
- field 标注的字段名称
|
||||
- shapeType 'text'
|
||||
|
||||
```javascript
|
||||
layer.shape('name','text')
|
||||
|
||||
```
|
||||
|
||||
### color
|
||||
同layer
|
||||
|
||||
### size
|
||||
同layer
|
||||
|
||||
### style
|
||||
|
||||
- opacity `number`
|
||||
- textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||
- stroke: `string`; 描边颜色
|
||||
- strokeWidth `number` 描边宽度
|
||||
- strokeOpacity `number` 描边透明度
|
||||
- fontWeight `string` 字体粗细
|
||||
- fontFamily `string` 字号
|
||||
- textOffset `[number, number]` 文本偏移量
|
||||
- textAllowOverlap: `boolean` 是否允许文字遮盖
|
||||
|
||||
## 相关demo
|
||||
[文本标注](../../../../examples/point/text)
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
title: 文本标注
|
||||
order: 4
|
||||
---
|
||||
为图层添加文本标注
|
||||
|
||||
## 使用
|
||||
|
||||
地图标注需要添加一个新的图层的实现
|
||||
|
||||
### shape
|
||||
|
||||
- field 标注的字段名称
|
||||
- shapeType 'text'
|
||||
|
||||
```javascript
|
||||
layer.shape('name','text')
|
||||
|
||||
```
|
||||
|
||||
### color
|
||||
同layer
|
||||
|
||||
### size
|
||||
同layer
|
||||
|
||||
### style
|
||||
|
||||
- opacity `number`
|
||||
- textAnchor `string` 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
- spacing: `number` 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
- padding: `[number, number]` 文本相对锚点的偏移量 [x, y]
|
||||
- stroke: `string`; 描边颜色
|
||||
- strokeWidth `number` 描边宽度
|
||||
- strokeOpacity `number` 描边透明度
|
||||
- fontWeight `string` 字体粗细
|
||||
- fontFamily `string` 字号
|
||||
- textOffset `[number, number]` 文本偏移量
|
||||
- textAllowOverlap: `boolean` 是否允许文字遮盖
|
||||
|
||||
## 相关demo
|
||||
[文本标注](../../../../examples/point/text)
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 地图 Map
|
||||
title: Map
|
||||
order: 2
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Popup 组件
|
||||
title: Popup Component
|
||||
order: 4
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ order: 2
|
|||
|
||||
# 简介
|
||||
|
||||
## Scene
|
||||
|
||||
```javascript
|
||||
// Module 引用
|
||||
import { Scene } from '@antv/l7';
|
||||
|
|
@ -101,7 +99,7 @@ L7 Logo 的显示位置 默认左下角
|
|||
|
||||
### zoom
|
||||
|
||||
地图初始显示级别 {number} （0-22）
|
||||
地图初始显示级别 {number} Mapbox （0-24） 高德 （3-18）
|
||||
|
||||
### center
|
||||
|
||||
|
|
@ -134,11 +132,11 @@ L7 Logo 的显示位置 默认左下角
|
|||
|
||||
### minZoom
|
||||
|
||||
地图最小缩放等级 {number} default 0 (0-22)
|
||||
地图最小缩放等级 {number} default 0 Mapbox 0-24） 高德 （3-18）
|
||||
|
||||
### maxZoom
|
||||
|
||||
地图最大缩放等级 {number} default 22 (0-22)
|
||||
地图最大缩放等级 {number} default 22 Mapbox（0-24） 高德 （3-18）
|
||||
|
||||
### rotateEnable
|
||||
|
||||
|
|
@ -402,6 +400,11 @@ scene.on('zoomstart', () => {}); // 缩放开始时触发
|
|||
scene.on('zoomend', () => {}); // 缩放停止时触发
|
||||
```
|
||||
|
||||
其他地图事件可以查看相应底图的事件文档,地图事件也可以通过 Scene.map 进行设置
|
||||
|
||||
[Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/#map.event)
|
||||
[高德](https://lbs.amap.com/api/javascript-api/reference/map)
|
||||
|
||||
### 鼠标事件
|
||||
|
||||
```javascript
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 数据
|
||||
title: Source
|
||||
order: 2
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 本地运行demo
|
||||
title: Local demo
|
||||
order: 1
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: GaodeMap BaseMap
|
||||
title: GaodeMap
|
||||
order: 0
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ order: 2
|
|||
|
||||
L7 在地图样式层面增加了无底图样式```blank``` 无底图模式
|
||||
|
||||
😃不需要使用mapbox token 拿来就用，不要注册mapbox账户
|
||||
😃不需要使用mapbox token，也不需要注册mapbox账户
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ order: 2
|
|||
|
||||
L7 在地图样式层面增加了无底图样式```blank``` 无底图模式
|
||||
|
||||
不需要使用mapbox token 也不需要注册mapbox账户
|
||||
不需要使用mapbox token ,也不需要注册mapbox账户
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,139 @@
|
|||
---
|
||||
title: Offline
|
||||
title: Use Offline
|
||||
order: 0
|
||||
---
|
||||
|
||||
目前L7 支持高德和Mapbox两种底图，高德地图由于使用在线API不能做的离线部署，如果你有离线部署的需求可以采用MapBox做底图。L7 在接口层统一了不同底图直接的差异，一套可视化代码可以运行在L7 支持的任意底图上。本文主要介绍如何离线使用，国内加速使用MapBox，同时也提供了在线的字体服务，你也可也下载到本地使用。
|
||||
|
||||
### L7 如何引入Mapbox
|
||||
|
||||
```javascript
|
||||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
token:'xxxx'
|
||||
})
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 为什么离线化
|
||||
|
||||
- 离线部署
|
||||
- 国内加速
|
||||
- 不使用mapbox token
|
||||
|
||||
### 如何离线化使用MapBox
|
||||
你只要不使用MapBox的数据底图服务就可以离线使用，mapbox所有数据服务资源都是在style里面配置的。除了数据服务以外还有一些静态资源，这些主要是图片标注，文字标注的时候使用。
|
||||
|
||||
mapbox本身数据资源在国外如果在国内单独部署使用，加载速度体验还是很好的
|
||||
|
||||
我们先了解一下MapBox样式包含哪些配置项。
|
||||
|
||||
#### Mapbox样式参数
|
||||
|
||||
- version：JS SDK对应版本必须为8，
|
||||
- name：样式的命名，
|
||||
- sprite：雪碧图，将一个地图涉及到的所有零星图标图片都包含到一张大图中。
|
||||
- glyphs：.pbf格式的字体样式，例如微软雅黑等字体库。
|
||||
- sources：图层的资源文件，可以支持矢量切片、栅格、dem栅格、图片、geojson、视频等格式
|
||||
- layers：是对每个图层样式的描述，这里就是对地图样式渲染的关键，可以做定制化地图样式。
|
||||
|
||||
具体参数及其api可以参考mapbox官网
|
||||
|
||||
如果做到本地化只需要 sprite，glyphs 本地化就可以了，地图服务可以加载其他服务。
|
||||
|
||||
如果你不需要使用MapBox数据服务，可视化层完成用L7渲染那就更简单了
|
||||
|
||||
你只需要将MapBox的地图样式设置 `blank`
|
||||
|
||||
```javascript
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'blank',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
blank 样式以为无底图样式，这种样式下就不需要使用mapbox服务，也不需要使用mapbox的token了
|
||||
|
||||
<a name="cGfei"></a>
|
||||
#### 本地化雪碧图
|
||||
如果你需要使用mapbox字段的图片标注，你需要本地化雪碧图资源<br />只需要下载两个文件即可<br />sprite.json 主要记录每个图表在大图上位置<br />sprite.png 每个小图标组成的大图
|
||||
|
||||
在线雪碧图服务地址:<br />[https://lzxue.github.io/font-glyphs/sprite/sprite](https://lzxue.github.io/font-glyphs/sprite/sprite)
|
||||
|
||||
|
||||
<a name="KWyGs"></a>
|
||||
#### 本地化字体
|
||||
如果需要使用mapbox文章标注功能需要本地化，如果你的渲染能力都是用L7实现的，这个过程也是不需要的。
|
||||
|
||||
L7 提供了在线字体服务<br /> 目前支持4种字
|
||||
|
||||
- 阿里巴巴普惠体
|
||||
- noto
|
||||
- opensan
|
||||
- roboto
|
||||
|
||||
_如果你有新的字体需求可提PR，帮你自动生成在线可用的字体服务，你可以在线使用，也可以下载到本地使用。_
|
||||
|
||||
字体服务下载：[gh-pages分支](https://github.com/lzxue/font-glyphs/tree/gh-pages) 你可以clone下来直接使用。
|
||||
|
||||
**你也可以使用在线服务**<br />**<br />github服务<br />[https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf](https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf)<br />蚂蚁CDN：<br />[https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf](https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf)
|
||||
|
||||
<a name="oeqps"></a>
|
||||
#### 地图服务本地化
|
||||
1.加载[第三方底图](https://github.com/htoooth/Leaflet.ChineseTmsProviders)，栅格瓦片图层做底图，如天地图，高德，google的栅格瓦片都可以<br />2.下载[opensteetmap ](https://openmaptiles.com/downloads/planet/)矢量瓦片地图做底图<br />3.自己业务数据发布底图服务，或者矢量瓦片服务。
|
||||
|
||||
**这里还有个更完备的解决方案**<br /> [https://jingsam.github.io/foxgis-server-lite/#/](https://jingsam.github.io/foxgis-server-lite/#/)
|
||||
|
||||
####
|
||||
所有的服务资源已经准备好了，这样我们就可以独立使用mapbox服务，不需要再申请mapbox的token了
|
||||
|
||||
```javascript
|
||||
|
||||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: {
|
||||
"version": 8,
|
||||
"name": "blank",
|
||||
"sprite": "https://lzxue.github.io/font-glyphs/sprite/sprite",
|
||||
"glyphs": "https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf",
|
||||
"sources": {},
|
||||
"layers": [
|
||||
{
|
||||
id: 'background',
|
||||
type: 'background',
|
||||
paint: {
|
||||
'background-color': 'white',
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
token:'xxxx'
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
离线，无token使用mapbox [demo](https://codesandbox.io/embed/frosty-architecture-tv6uv?fontsize=14&hidenavigation=1&theme=dark)<br />
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ redirect_from:
|
|||
|
||||
## L7
|
||||
|
||||
Current version: 
|
||||
Current version: 
|
||||
|
||||
# 使用方法
|
||||
|
||||
|
|
|
|||
|
|
@ -8,28 +8,29 @@ const scene = new Scene({
|
|||
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(1.5)
|
||||
.shape('line')
|
||||
.color('color', v => {
|
||||
return `rgb(${v})`;
|
||||
})
|
||||
.animate({
|
||||
interval: 0.6,
|
||||
trailLength: 1.5,
|
||||
duration: 6
|
||||
});
|
||||
scene.addLayer(lineLayer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
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(1.5)
|
||||
.shape('line')
|
||||
.color('color', v => {
|
||||
return `rgb(${v})`;
|
||||
})
|
||||
.animate({
|
||||
interval: 0.6,
|
||||
trailLength: 1.5,
|
||||
duration: 6
|
||||
});
|
||||
scene.addLayer(lineLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,21 +10,22 @@ const scene = new Scene({
|
|||
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.5)
|
||||
.shape('line')
|
||||
.color('#25d8b7')
|
||||
.animate({
|
||||
interval: 1, // 间隔
|
||||
duration: 1, // 持续时间，延时
|
||||
trailLength: 2 // 流线长度
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
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.5)
|
||||
.shape('line')
|
||||
.color('#25d8b7')
|
||||
.animate({
|
||||
interval: 1, // 间隔
|
||||
duration: 1, // 持续时间，延时
|
||||
trailLength: 2 // 流线长度
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -60,3 +60,4 @@ scene.on('loaded', () => {
|
|||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -26,69 +26,71 @@ const scene = new Scene({
|
|||
zoom: 0.51329
|
||||
})
|
||||
});
|
||||
Promise.all([
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
|
||||
]).then(function onLoad([ world, dot, flyline ]) {
|
||||
const dotData = eval(dot);
|
||||
const flydata = eval(flyline).map(item => {
|
||||
const latlng1 = item.from.split(',').map(e => { return e * 1; });
|
||||
const latlng2 = item.to.split(',').map(e => { return e * 1; });
|
||||
return { coord: [ latlng1, latlng2 ] };
|
||||
scene.on('loaded', () => {
|
||||
Promise.all([
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
|
||||
]).then(function onLoad([ world, dot, flyline ]) {
|
||||
const dotData = eval(dot);
|
||||
const flydata = eval(flyline).map(item => {
|
||||
const latlng1 = item.from.split(',').map(e => { return e * 1; });
|
||||
const latlng2 = item.to.split(',').map(e => { return e * 1; });
|
||||
return { coord: [ latlng1, latlng2 ] };
|
||||
});
|
||||
// const worldFill = new PolygonLayer()
|
||||
// .source(world)
|
||||
// .color('#98E3FA')
|
||||
// .shape('fill')
|
||||
// .style({
|
||||
// opacity: 1
|
||||
// });
|
||||
|
||||
const worldLine = new LineLayer()
|
||||
.source(world)
|
||||
.color('#41fc9d')
|
||||
.size(0.5)
|
||||
.style({
|
||||
opacity: 0.4
|
||||
});
|
||||
const dotPoint = new PointLayer()
|
||||
.source(dotData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.color('#ffed11')
|
||||
.animate(true)
|
||||
.size(40)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
const flyLine = new LineLayer()
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#ff6b34')
|
||||
.shape('arc3d')
|
||||
.size(2)
|
||||
.active(true)
|
||||
.animate({
|
||||
interval: 2,
|
||||
trailLength: 2,
|
||||
duration: 1
|
||||
})
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
// scene.addLayer(worldFill);
|
||||
scene.addLayer(worldLine);
|
||||
scene.addLayer(dotPoint);
|
||||
scene.addLayer(flyLine);
|
||||
});
|
||||
// const worldFill = new PolygonLayer()
|
||||
// .source(world)
|
||||
// .color('#98E3FA')
|
||||
// .shape('fill')
|
||||
// .style({
|
||||
// opacity: 1
|
||||
// });
|
||||
|
||||
const worldLine = new LineLayer()
|
||||
.source(world)
|
||||
.color('#41fc9d')
|
||||
.size(0.5)
|
||||
.style({
|
||||
opacity: 0.4
|
||||
});
|
||||
const dotPoint = new PointLayer()
|
||||
.source(dotData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.color('#ffed11')
|
||||
.animate(true)
|
||||
.size(40)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
const flyLine = new LineLayer()
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#ff6b34')
|
||||
.shape('arc3d')
|
||||
.size(2)
|
||||
.active(true)
|
||||
.animate({
|
||||
interval: 2,
|
||||
trailLength: 2,
|
||||
duration: 1
|
||||
})
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
// scene.addLayer(worldFill);
|
||||
scene.addLayer(worldLine);
|
||||
scene.addLayer(dotPoint);
|
||||
scene.addLayer(flyLine);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -26,72 +26,74 @@ const scene = new Scene({
|
|||
zoom: 0.51329
|
||||
})
|
||||
});
|
||||
Promise.all([
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
|
||||
]).then(function onLoad([ world, dot, flyline ]) {
|
||||
const dotData = eval(dot);
|
||||
const flydata = eval(flyline).map(item => {
|
||||
const latlng1 = item.from.split(',').map(e => { return e * 1; });
|
||||
const latlng2 = item.to.split(',').map(e => { return e * 1; });
|
||||
return { coord: [ latlng1, latlng2 ] };
|
||||
});
|
||||
// const worldFill = new PolygonLayer()
|
||||
// .source(world)
|
||||
// .color('#98E3FA')
|
||||
// .shape('fill')
|
||||
// .style({
|
||||
// opacity: 1
|
||||
// });
|
||||
scene.on('loaded', () => {
|
||||
Promise.all([
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json').then(d => d.json()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
|
||||
]).then(function onLoad([ world, dot, flyline ]) {
|
||||
const dotData = eval(dot);
|
||||
const flydata = eval(flyline).map(item => {
|
||||
const latlng1 = item.from.split(',').map(e => { return e * 1; });
|
||||
const latlng2 = item.to.split(',').map(e => { return e * 1; });
|
||||
return { coord: [ latlng1, latlng2 ] };
|
||||
});
|
||||
// const worldFill = new PolygonLayer()
|
||||
// .source(world)
|
||||
// .color('#98E3FA')
|
||||
// .shape('fill')
|
||||
// .style({
|
||||
// opacity: 1
|
||||
// });
|
||||
|
||||
const worldLine = new LineLayer()
|
||||
.source(world)
|
||||
.color('#495e96')
|
||||
.size(0.6)
|
||||
.style({
|
||||
opacity: 0.2
|
||||
});
|
||||
const dotPoint = new PointLayer()
|
||||
.source(dotData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
const worldLine = new LineLayer()
|
||||
.source(world)
|
||||
.color('#495e96')
|
||||
.size(0.6)
|
||||
.style({
|
||||
opacity: 0.2
|
||||
});
|
||||
const dotPoint = new PointLayer()
|
||||
.source(dotData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.color('#abc7e9')
|
||||
.animate({
|
||||
speed: 0.8
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.color('#abc7e9')
|
||||
.animate({
|
||||
speed: 0.8
|
||||
}
|
||||
)
|
||||
.size(30)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
const flyLine = new LineLayer()
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#b97feb')
|
||||
.shape('arc3d')
|
||||
.size(2)
|
||||
.active(true)
|
||||
.animate({
|
||||
interval: 2,
|
||||
trailLength: 2,
|
||||
duration: 1
|
||||
})
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
// scene.addLayer(worldFill);
|
||||
scene.addLayer(worldLine);
|
||||
scene.addLayer(dotPoint);
|
||||
scene.addLayer(flyLine);
|
||||
)
|
||||
.size(30)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
const flyLine = new LineLayer()
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.color('#b97feb')
|
||||
.shape('arc3d')
|
||||
.size(2)
|
||||
.active(true)
|
||||
.animate({
|
||||
interval: 2,
|
||||
trailLength: 2,
|
||||
duration: 1
|
||||
})
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
// scene.addLayer(worldFill);
|
||||
scene.addLayer(worldLine);
|
||||
scene.addLayer(dotPoint);
|
||||
scene.addLayer(flyLine);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -10,26 +10,27 @@ const scene = new Scene({
|
|||
zoom: 2.9142882493605033
|
||||
})
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
blur: 0.99
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
blur: 0.99
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,37 +13,38 @@ const scene = new Scene({
|
|||
rotation: 19.313180925794313
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
coordinates: 'path',
|
||||
type: 'json'
|
||||
}
|
||||
})
|
||||
.size('level', level => {
|
||||
return [ 1.0, level * 1 ];
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
'level',
|
||||
[
|
||||
'#312B60',
|
||||
'#4A457E',
|
||||
'#615C99',
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
'#C997C7',
|
||||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
].slice(0, 8)
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
coordinates: 'path',
|
||||
type: 'json'
|
||||
}
|
||||
})
|
||||
.size('level', level => {
|
||||
return [ 1.0, level * 1 ];
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
'level',
|
||||
[
|
||||
'#312B60',
|
||||
'#4A457E',
|
||||
'#615C99',
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
'#C997C7',
|
||||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
].slice(0, 8)
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,37 +10,38 @@ const scene = new Scene({
|
|||
zoom: 4.4
|
||||
})
|
||||
});
|
||||
|
||||
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('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.active(true)
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
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('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.active(true)
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,50 +10,51 @@ const scene = new Scene({
|
|||
zoom: 7.068989519212174
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 2500,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', sum => {
|
||||
return sum * 200;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color('sum', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#C3F9CC',
|
||||
'#DEFAC0',
|
||||
'#ECFFB1'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 2500,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', sum => {
|
||||
return sum * 200;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color('sum', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#C3F9CC',
|
||||
'#DEFAC0',
|
||||
'#ECFFB1'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,23 +10,24 @@ const scene = new Scene({
|
|||
zoom: 11
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,30 +10,31 @@ const scene = new Scene({
|
|||
zoom: 15.63
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data)
|
||||
.size(2)
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data)
|
||||
.size(2)
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,52 +10,53 @@ const scene = new Scene({
|
|||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 20000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#0B0030',
|
||||
'#100243',
|
||||
'#100243',
|
||||
'#1B048B',
|
||||
'#051FB7',
|
||||
'#0350C1',
|
||||
'#0350C1',
|
||||
'#0072C4',
|
||||
'#0796D3',
|
||||
'#2BA9DF',
|
||||
'#30C7C4',
|
||||
'#6BD5A0',
|
||||
'#A7ECB2',
|
||||
'#D0F4CA'
|
||||
].reverse()
|
||||
);
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 20000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#0B0030',
|
||||
'#100243',
|
||||
'#100243',
|
||||
'#1B048B',
|
||||
'#051FB7',
|
||||
'#0350C1',
|
||||
'#0350C1',
|
||||
'#0072C4',
|
||||
'#0796D3',
|
||||
'#2BA9DF',
|
||||
'#30C7C4',
|
||||
'#6BD5A0',
|
||||
'#A7ECB2',
|
||||
'#D0F4CA'
|
||||
].reverse()
|
||||
);
|
||||
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,43 +10,44 @@ const scene = new Scene({
|
|||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#FF40F3',
|
||||
'#9415FF',
|
||||
'#421EB2'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#FF40F3',
|
||||
'#9415FF',
|
||||
'#421EB2'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,49 +10,50 @@ const scene = new Scene({
|
|||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 20000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('circle')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#8C1EB2',
|
||||
'#8C1EB2',
|
||||
'#DA05AA',
|
||||
'#F0051A',
|
||||
'#FF2A3C',
|
||||
'#FF4818',
|
||||
'#FF4818',
|
||||
'#FF8B18',
|
||||
'#F77B00',
|
||||
'#ED9909',
|
||||
'#ECC357',
|
||||
'#EDE59C'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 20000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('circle')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#8C1EB2',
|
||||
'#8C1EB2',
|
||||
'#DA05AA',
|
||||
'#F0051A',
|
||||
'#FF2A3C',
|
||||
'#FF4818',
|
||||
'#FF4818',
|
||||
'#FF8B18',
|
||||
'#F77B00',
|
||||
'#ED9909',
|
||||
'#ECC357',
|
||||
'#EDE59C'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,45 +10,46 @@ const scene = new Scene({
|
|||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF3417',
|
||||
'#FF7412',
|
||||
'#FFB02A',
|
||||
'#FFE754',
|
||||
'#46F3FF',
|
||||
'#02BEFF',
|
||||
'#1A7AFF',
|
||||
'#0A1FB2'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF3417',
|
||||
'#FF7412',
|
||||
'#FFB02A',
|
||||
'#FFE754',
|
||||
'#46F3FF',
|
||||
'#02BEFF',
|
||||
'#1A7AFF',
|
||||
'#0A1FB2'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,31 +10,32 @@ const scene = new Scene({
|
|||
zoom: 2.632456779444394
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.shape('heatmap')
|
||||
.size('mag', [ 0, 1.0 ]) // weight映射通道
|
||||
.style({
|
||||
intensity: 2,
|
||||
radius: 20,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#91EABC',
|
||||
'#2EA9A1',
|
||||
'#206C7C'
|
||||
].reverse(),
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.shape('heatmap')
|
||||
.size('mag', [ 0, 1.0 ]) // weight映射通道
|
||||
.style({
|
||||
intensity: 2,
|
||||
radius: 20,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#91EABC',
|
||||
'#2EA9A1',
|
||||
'#206C7C'
|
||||
].reverse(),
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,32 +11,33 @@ const scene = new Scene({
|
|||
zoom: 3.6116
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.size('capacity', [ 0, 1 ])
|
||||
.shape('heatmap3D')
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.size('capacity', [ 0, 1 ])
|
||||
.shape('heatmap3D')
|
||||
// weight映射通道
|
||||
.style({
|
||||
intensity: 10,
|
||||
radius: 5,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49'
|
||||
],
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
.style({
|
||||
intensity: 10,
|
||||
radius: 5,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49'
|
||||
],
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,31 +10,32 @@ const scene = new Scene({
|
|||
zoom: 2.632456779444394
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.shape('heatmap')
|
||||
.size('mag', [ 0, 1.0 ]) // weight映射通道
|
||||
.style({
|
||||
intensity: 2,
|
||||
radius: 20,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#F27DEB',
|
||||
'#8C1EB2',
|
||||
'#421EB2'
|
||||
].reverse(),
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.shape('heatmap')
|
||||
.size('mag', [ 0, 1.0 ]) // weight映射通道
|
||||
.style({
|
||||
intensity: 2,
|
||||
radius: 20,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#F27DEB',
|
||||
'#8C1EB2',
|
||||
'#421EB2'
|
||||
].reverse(),
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,47 +10,48 @@ const scene = new Scene({
|
|||
zoom: 3.9879693680088626
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 17000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', value => {
|
||||
return value * 20;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#FF40F3',
|
||||
'#9415FF',
|
||||
'#421EB2'
|
||||
].reverse()
|
||||
)
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 17000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', value => {
|
||||
return value * 20;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#FF40F3',
|
||||
'#9415FF',
|
||||
'#421EB2'
|
||||
].reverse()
|
||||
)
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,44 +11,45 @@ const scene = new Scene({
|
|||
zoom: 12.47985
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 100,
|
||||
field: 'h12',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', [ 0, 600 ])
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 100,
|
||||
field: 'h12',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', [ 0, 600 ])
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,50 +10,51 @@ const scene = new Scene({
|
|||
zoom: 7.068989519212174
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 2500,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', sum => {
|
||||
return sum * 200;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color('sum', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#C3F9CC',
|
||||
'#DEFAC0',
|
||||
'#ECFFB1'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 2500,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', sum => {
|
||||
return sum * 200;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color('sum', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#C3F9CC',
|
||||
'#DEFAC0',
|
||||
'#ECFFB1'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,45 +10,46 @@ const scene = new Scene({
|
|||
zoom: 3.79
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 90000,
|
||||
field: 'capacity',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('hexagon')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#0F62FF',
|
||||
'#0F62FF',
|
||||
'#30B2E9',
|
||||
'#30B2E9',
|
||||
'#40C4CE'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 90000,
|
||||
field: 'capacity',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('hexagon')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#0F62FF',
|
||||
'#0F62FF',
|
||||
'#30B2E9',
|
||||
'#30B2E9',
|
||||
'#40C4CE'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,24 +10,26 @@ const scene = new Scene({
|
|||
zoom: 2.9142882493605033
|
||||
})
|
||||
});
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('greatcircle')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('greatcircle')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,27 +11,29 @@ const scene = new Scene({
|
|||
zoom: 12.45977
|
||||
})
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'start station longitude',
|
||||
y: 'start station latitude',
|
||||
x1: 'end station longitude',
|
||||
y1: 'end station latitude'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc3d')
|
||||
.color('#0C47BF')
|
||||
.style({
|
||||
opacity: 1,
|
||||
blur: 0.9
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'start station longitude',
|
||||
y: 'start station latitude',
|
||||
x1: 'end station longitude',
|
||||
y1: 'end station latitude'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc3d')
|
||||
.color('#0C47BF')
|
||||
.style({
|
||||
opacity: 1,
|
||||
blur: 0.9
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,25 +11,26 @@ const scene = new Scene({
|
|||
rotation: 42.3999
|
||||
})
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc3d')
|
||||
.color('#FF7C6A')
|
||||
.style({
|
||||
opacity: 0.8
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2'
|
||||
}
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc3d')
|
||||
.color('#FF7C6A')
|
||||
.style({
|
||||
opacity: 0.8
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,33 +10,34 @@ const scene = new Scene({
|
|||
zoom: 14.66
|
||||
})
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size('ELEV', h => {
|
||||
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];
|
||||
})
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize'
|
||||
})
|
||||
.color(
|
||||
'ELEV',
|
||||
[
|
||||
'#E4682F',
|
||||
'#FF8752',
|
||||
'#FFA783',
|
||||
'#FFBEA8',
|
||||
'#FFDCD6',
|
||||
'#EEF3FF',
|
||||
'#C8D7F5',
|
||||
'#A5C1FC',
|
||||
'#7FA7F9',
|
||||
'#5F8AE5'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size('ELEV', h => {
|
||||
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];
|
||||
})
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize'
|
||||
})
|
||||
.color(
|
||||
'ELEV',
|
||||
[
|
||||
'#E4682F',
|
||||
'#FF8752',
|
||||
'#FFA783',
|
||||
'#FFBEA8',
|
||||
'#FFDCD6',
|
||||
'#EEF3FF',
|
||||
'#C8D7F5',
|
||||
'#A5C1FC',
|
||||
'#7FA7F9',
|
||||
'#5F8AE5'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,30 +10,31 @@ const scene = new Scene({
|
|||
zoom: 14.78
|
||||
})
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size('ELEV', h => {
|
||||
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];
|
||||
})
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize'
|
||||
})
|
||||
.color('ELEV', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size('ELEV', h => {
|
||||
return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];
|
||||
})
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize'
|
||||
})
|
||||
.color('ELEV', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,33 +10,34 @@ const scene = new Scene({
|
|||
zoom: 3.89
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.scale('value', {
|
||||
type: 'quantile'
|
||||
})
|
||||
.size('value', [ 0.5, 1, 1.5, 2 ])
|
||||
.shape('line')
|
||||
.color(
|
||||
'value',
|
||||
[
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.scale('value', {
|
||||
type: 'quantile'
|
||||
})
|
||||
.size('value', [ 0.5, 1, 1.5, 2 ])
|
||||
.shape('line')
|
||||
.color(
|
||||
'value',
|
||||
[
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,37 +13,38 @@ const scene = new Scene({
|
|||
style: 'dark'
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'path'
|
||||
}
|
||||
})
|
||||
.size('level', level => {
|
||||
return [ 0.8, level * 1 ];
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
'level',
|
||||
[
|
||||
'#312B60',
|
||||
'#4A457E',
|
||||
'#615C99',
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
'#C997C7',
|
||||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
].slice(0, 8)
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'path'
|
||||
}
|
||||
})
|
||||
.size('level', level => {
|
||||
return [ 0.8, level * 1 ];
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
'level',
|
||||
[
|
||||
'#312B60',
|
||||
'#4A457E',
|
||||
'#615C99',
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
'#C997C7',
|
||||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
].slice(0, 8)
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,49 +13,50 @@ const scene = new Scene({
|
|||
style: 'light'
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'path'
|
||||
}
|
||||
})
|
||||
.size('level', level => {
|
||||
return [ 0.8, level * 1 ];
|
||||
})
|
||||
.shape('line')
|
||||
.active(true)
|
||||
.color(
|
||||
'level',
|
||||
[
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
]
|
||||
.reverse()
|
||||
.slice(0, 8)
|
||||
);
|
||||
layer.on('mousemove', e => {
|
||||
const popup = new Popup({
|
||||
offsets: [ 0, 0 ],
|
||||
closeButton: false
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(`<span>车次: ${e.feature.number}</span>`);
|
||||
scene.addPopup(popup);
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'path'
|
||||
}
|
||||
})
|
||||
.size('level', level => {
|
||||
return [ 0.8, level * 1 ];
|
||||
})
|
||||
.shape('line')
|
||||
.active(true)
|
||||
.color(
|
||||
'level',
|
||||
[
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
]
|
||||
.reverse()
|
||||
.slice(0, 8)
|
||||
);
|
||||
layer.on('mousemove', e => {
|
||||
const popup = new Popup({
|
||||
offsets: [ 0, 0 ],
|
||||
closeButton: false
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(`<span>车次: ${e.feature.number}</span>`);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,16 +11,18 @@ const scene = new Scene({
|
|||
style: 'dark'
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(1.5)
|
||||
.shape('line')
|
||||
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(1.5)
|
||||
.shape('line')
|
||||
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,21 +11,22 @@ const scene = new Scene({
|
|||
style: 'dark'
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(1.5)
|
||||
.shape('line')
|
||||
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ])
|
||||
.style({
|
||||
lineType: 'dash',
|
||||
dashArray: [ 5, 5 ]
|
||||
})
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(1.5)
|
||||
.shape('line')
|
||||
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ])
|
||||
.style({
|
||||
lineType: 'dash',
|
||||
dashArray: [ 5, 5 ]
|
||||
})
|
||||
;
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,16 +11,17 @@ const scene = new Scene({
|
|||
style: 'light'
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(1.5)
|
||||
.shape('line')
|
||||
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(1.5)
|
||||
.shape('line')
|
||||
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,37 +11,39 @@ const scene = new Scene({
|
|||
minZoom: 10
|
||||
})
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', [
|
||||
'circle',
|
||||
'triangle',
|
||||
'square',
|
||||
'pentagon',
|
||||
'hexagon',
|
||||
'octogon',
|
||||
'hexagram',
|
||||
'rhombus',
|
||||
'vesica'
|
||||
])
|
||||
.size('unit_price', [ 10, 25 ])
|
||||
.active(true)
|
||||
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 2
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', [
|
||||
'circle',
|
||||
'triangle',
|
||||
'square',
|
||||
'pentagon',
|
||||
'hexagon',
|
||||
'octogon',
|
||||
'hexagram',
|
||||
'rhombus',
|
||||
'vesica'
|
||||
])
|
||||
.size('unit_price', [ 10, 25 ])
|
||||
.active(true)
|
||||
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 2
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,24 +12,24 @@ const scene = new Scene({
|
|||
maxZoom: 10
|
||||
})
|
||||
});
|
||||
|
||||
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)
|
||||
.shape('circle')
|
||||
.size('mag', [ 1, 25 ])
|
||||
.color('mag', mag => {
|
||||
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
|
||||
})
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
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)
|
||||
.shape('circle')
|
||||
.size('mag', [ 1, 25 ])
|
||||
.color('mag', mag => {
|
||||
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
|
||||
})
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,28 +10,29 @@ const scene = new Scene({
|
|||
zoom: 2.5
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'Longitude',
|
||||
y: 'Latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.active(true)
|
||||
.animate(true)
|
||||
.size(56)
|
||||
.color('#4cfd47')
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'Longitude',
|
||||
y: 'Latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.active(true)
|
||||
.animate(true)
|
||||
.size(56)
|
||||
.color('#4cfd47')
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,31 +11,33 @@ const scene = new Scene({
|
|||
maxZoom: 10
|
||||
})
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.features = data.features.filter(item => {
|
||||
return item.properties.capacity > 800;
|
||||
});
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data)
|
||||
.shape('circle')
|
||||
.size('capacity', [ 0, 16 ])
|
||||
.color('capacity', [
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.features = data.features.filter(item => {
|
||||
return item.properties.capacity > 800;
|
||||
});
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data)
|
||||
.shape('circle')
|
||||
.size('capacity', [ 0, 16 ])
|
||||
.color('capacity', [
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,9 +11,10 @@ const scene = new Scene({
|
|||
zoom: 4.19
|
||||
})
|
||||
});
|
||||
addChart();
|
||||
scene.render();
|
||||
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
scene.render();
|
||||
});
|
||||
function addChart() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
|
|
|
|||
|
|
@ -11,9 +11,10 @@ const scene = new Scene({
|
|||
zoom: 4.19
|
||||
})
|
||||
});
|
||||
addChart();
|
||||
scene.render();
|
||||
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
scene.render();
|
||||
});
|
||||
function addChart() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
|
|
|
|||
|
|
@ -44,7 +44,9 @@ const scene = new Scene({
|
|||
zoom: 3.802
|
||||
})
|
||||
});
|
||||
addChart();
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
});
|
||||
scene.render();
|
||||
function addChart() {
|
||||
Promise.all([
|
||||
|
|
|
|||
|
|
@ -10,25 +10,26 @@ const scene = new Scene({
|
|||
zoom: 3
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
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 ])
|
||||
.active(true)
|
||||
.color('yellow')
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 1
|
||||
});
|
||||
|
||||
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 ])
|
||||
.active(true)
|
||||
.color('yellow')
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,34 +11,35 @@ const scene = new Scene({
|
|||
rotation: 134.9507
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.active(true)
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn'
|
||||
])
|
||||
.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
.color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.active(true)
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn'
|
||||
])
|
||||
.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
.color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,34 +11,35 @@ const scene = new Scene({
|
|||
rotation: 35.97133
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn'
|
||||
])
|
||||
.active(true)
|
||||
.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', [
|
||||
'cylinder',
|
||||
'triangleColumn',
|
||||
'hexagonColumn',
|
||||
'squareColumn'
|
||||
])
|
||||
.active(true)
|
||||
.size('unit_price', h => {
|
||||
return [ 6, 6, h / 500 ];
|
||||
})
|
||||
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,37 +10,38 @@ const scene = new Scene({
|
|||
zoom: 4.4
|
||||
})
|
||||
});
|
||||
|
||||
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('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.active(true)
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
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('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.active(true)
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,35 +11,36 @@ const scene = new Scene({
|
|||
zoom: 4.48
|
||||
})
|
||||
});
|
||||
|
||||
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('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.active(true)
|
||||
.color('#006CFF')
|
||||
.style({
|
||||
opacity: 1.0
|
||||
scene.on('loaded', () => {
|
||||
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('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.active(true)
|
||||
.color('#006CFF')
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
pointLayer.on('mousemove', e => {
|
||||
const popup = new Popup({
|
||||
offsets: [ 0, 0 ],
|
||||
closeButton: false
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(`<span>${e.feature.s}: ${e.feature.t}℃</span>`);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
pointLayer.on('mousemove', e => {
|
||||
const popup = new Popup({
|
||||
offsets: [ 0, 0 ],
|
||||
closeButton: false
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(`<span>${e.feature.s}: ${e.feature.t}℃</span>`);
|
||||
scene.addPopup(popup);
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,23 +10,24 @@ const scene = new Scene({
|
|||
zoom: 11
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,30 +10,31 @@ const scene = new Scene({
|
|||
zoom: 15.63
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data)
|
||||
.size(2)
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data)
|
||||
.size(2)
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,33 +10,34 @@ const scene = new Scene({
|
|||
zoom: 14.83
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||
);
|
||||
scene.addImage(
|
||||
'01',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
|
||||
);
|
||||
scene.addImage(
|
||||
'02',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', [ '00', '01', '02' ])
|
||||
.size(20);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
|
||||
);
|
||||
scene.addImage(
|
||||
'01',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
|
||||
);
|
||||
scene.addImage(
|
||||
'02',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', [ '00', '01', '02' ])
|
||||
.size(20);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,19 +10,20 @@ const scene = new Scene({
|
|||
zoom: 6
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
scene.addImage(
|
||||
'marker',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data)
|
||||
.shape('marker')
|
||||
.size(12);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
scene.addImage(
|
||||
'marker',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data)
|
||||
.shape('marker')
|
||||
.size(12);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,64 +11,66 @@ const scene = new Scene({
|
|||
rotation: 4.183582
|
||||
})
|
||||
});
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'01',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'02',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'04',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'11',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'15',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'07',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'16',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'06',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'08',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'17',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'05',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data)
|
||||
.shape('w', function(w) {
|
||||
return w;
|
||||
})
|
||||
.size(15);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
scene.addImage(
|
||||
'00',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'01',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'02',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'04',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'11',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'15',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'07',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'16',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'06',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'08',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'17',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'05',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data)
|
||||
.shape('w', function(w) {
|
||||
return w;
|
||||
})
|
||||
.size(15);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@ const scene = new Scene({
|
|||
zoom: 4
|
||||
})
|
||||
});
|
||||
addMarkers();
|
||||
scene.render();
|
||||
|
||||
scene.on('loaded', () => {
|
||||
addMarkers();
|
||||
scene.render();
|
||||
});
|
||||
function addMarkers() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@ const scene = new Scene({
|
|||
zoom: 4
|
||||
})
|
||||
});
|
||||
addMarkers();
|
||||
scene.render();
|
||||
|
||||
scene.on('loaded', () => {
|
||||
addMarkers();
|
||||
scene.render();
|
||||
});
|
||||
function addMarkers() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@ const scene = new Scene({
|
|||
zoom: 4
|
||||
})
|
||||
});
|
||||
addMarkers();
|
||||
scene.render();
|
||||
|
||||
scene.on('loaded', () => {
|
||||
addMarkers();
|
||||
scene.render();
|
||||
});
|
||||
function addMarkers() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'
|
||||
|
|
|
|||
|
|
@ -10,39 +10,40 @@ const scene = new Scene({
|
|||
zoom: 6.45
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'Longitude',
|
||||
y: 'Latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.size(4)
|
||||
.active(true)
|
||||
.color('Magnitude', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'
|
||||
)
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'Longitude',
|
||||
y: 'Latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.size(4)
|
||||
.active(true)
|
||||
.color('Magnitude', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,30 +10,31 @@ const scene = new Scene({
|
|||
zoom: 3
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
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(12)
|
||||
.color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0
|
||||
});
|
||||
|
||||
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(12)
|
||||
.color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,25 +10,26 @@ const scene = new Scene({
|
|||
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({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
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({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,27 +10,28 @@ const scene = new Scene({
|
|||
zoom: 14.1
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.shape('extrude')
|
||||
.size('h20', [ 100, 120, 160, 200, 260, 500 ])
|
||||
.color('h20', [
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
'#C997C7',
|
||||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.shape('extrude')
|
||||
.size('h20', [ 100, 120, 160, 200, 260, 500 ])
|
||||
.color('h20', [
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
'#C997C7',
|
||||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,44 +10,45 @@ const scene = new Scene({
|
|||
zoom: 10.07
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.color(
|
||||
'unit_price',
|
||||
[
|
||||
'#1A4397',
|
||||
'#2555B7',
|
||||
'#3165D1',
|
||||
'#467BE8',
|
||||
'#6296FE',
|
||||
'#7EA6F9',
|
||||
'#98B7F7',
|
||||
'#BDD0F8',
|
||||
'#DDE6F7',
|
||||
'#F2F5FC'
|
||||
].reverse()
|
||||
)
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.size(0.8)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.color(
|
||||
'unit_price',
|
||||
[
|
||||
'#1A4397',
|
||||
'#2555B7',
|
||||
'#3165D1',
|
||||
'#467BE8',
|
||||
'#6296FE',
|
||||
'#7EA6F9',
|
||||
'#98B7F7',
|
||||
'#BDD0F8',
|
||||
'#DDE6F7',
|
||||
'#F2F5FC'
|
||||
].reverse()
|
||||
)
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.size(0.8)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,39 +10,40 @@ const scene = new Scene({
|
|||
zoom: 3.87
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const colors = [
|
||||
'#D7F9F0',
|
||||
'#A6E1E0',
|
||||
'#72BED6',
|
||||
'#5B8FF9',
|
||||
'#3474DB',
|
||||
'#005CBE',
|
||||
'#00419F',
|
||||
'#00287E'
|
||||
];
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.color('name', colors)
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.9
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const colors = [
|
||||
'#D7F9F0',
|
||||
'#A6E1E0',
|
||||
'#72BED6',
|
||||
'#5B8FF9',
|
||||
'#3474DB',
|
||||
'#005CBE',
|
||||
'#00419F',
|
||||
'#00287E'
|
||||
];
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.color('name', colors)
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.9
|
||||
});
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.color('#fff')
|
||||
.size(0.3)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,57 +10,59 @@ const scene = new Scene({
|
|||
zoom: 0.51329
|
||||
})
|
||||
});
|
||||
Promise.all([
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json'
|
||||
).then(d => d.json()),
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
|
||||
).then(d => d.json())
|
||||
]).then(function onLoad([ world, population ]) {
|
||||
const popobj = {};
|
||||
population.forEach(element => {
|
||||
popobj[element.Code] =
|
||||
scene.on('loaded', () => {
|
||||
Promise.all([
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json'
|
||||
).then(d => d.json()),
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
|
||||
).then(d => d.json())
|
||||
]).then(function onLoad([ world, population ]) {
|
||||
const popobj = {};
|
||||
population.forEach(element => {
|
||||
popobj[element.Code] =
|
||||
element['Population, female (% of total) (% of total)'];
|
||||
});
|
||||
// 数据绑定
|
||||
world.features = world.features.map(fe => {
|
||||
fe.properties.female = popobj[fe.id] * 1 || 0;
|
||||
return fe;
|
||||
});
|
||||
const colors = [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
];
|
||||
const layer = new PolygonLayer({})
|
||||
.source(world)
|
||||
.scale('female', {
|
||||
type: 'quantile'
|
||||
})
|
||||
.color('female', colors)
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.9
|
||||
});
|
||||
// 数据绑定
|
||||
world.features = world.features.map(fe => {
|
||||
fe.properties.female = popobj[fe.id] * 1 || 0;
|
||||
return fe;
|
||||
});
|
||||
const colors = [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
];
|
||||
const layer = new PolygonLayer({})
|
||||
.source(world)
|
||||
.scale('female', {
|
||||
type: 'quantile'
|
||||
})
|
||||
.color('female', colors)
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 0.9
|
||||
});
|
||||
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(world)
|
||||
.color('#fff')
|
||||
.size(0.8)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(world)
|
||||
.color('#fff')
|
||||
.size(0.8)
|
||||
.style({
|
||||
opacity: 1
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.addLayer(layer2);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,54 +10,55 @@ const scene = new Scene({
|
|||
zoom: 3
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.color(
|
||||
'density', d => {
|
||||
return d > 1000 ? color[7] :
|
||||
d > 500 ? color[6] :
|
||||
d > 200 ? color[5] :
|
||||
d > 100 ? color[4] :
|
||||
d > 50 ? color[3] :
|
||||
d > 20 ? color[2] :
|
||||
d > 10 ? color[1] :
|
||||
color[0];
|
||||
}
|
||||
)
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
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 ],
|
||||
closeButton: false
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
|
||||
const layer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.color(
|
||||
'density', d => {
|
||||
return d > 1000 ? color[7] :
|
||||
d > 500 ? color[6] :
|
||||
d > 200 ? color[5] :
|
||||
d > 100 ? color[4] :
|
||||
d > 50 ? color[3] :
|
||||
d > 20 ? color[2] :
|
||||
d > 10 ? color[1] :
|
||||
color[0];
|
||||
}
|
||||
)
|
||||
.shape('fill')
|
||||
.active(true)
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
const layer2 = new LineLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
|
||||
scene.addPopup(popup);
|
||||
.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 ],
|
||||
closeButton: false
|
||||
})
|
||||
.setLnglat(e.lngLat)
|
||||
.setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
|
||||
scene.addPopup(popup);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ const scene = new Scene({
|
|||
zoom: 3
|
||||
})
|
||||
});
|
||||
addLayer();
|
||||
scene.on('loaded', () => {
|
||||
addLayer();
|
||||
});
|
||||
async function getTiffData() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat'
|
||||
|
|
|
|||
|
|
@ -10,15 +10,16 @@ const scene = new Scene({
|
|||
zoom: 13
|
||||
})
|
||||
});
|
||||
|
||||
const layer = new ImageLayer({});
|
||||
layer.source(
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
|
||||
scene.on('loaded', () => {
|
||||
const layer = new ImageLayer({});
|
||||
layer.source(
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ const scene = new Scene({
|
|||
zoom: 3
|
||||
})
|
||||
});
|
||||
addLayer();
|
||||
scene.on('loaded', () => {
|
||||
addLayer();
|
||||
});
|
||||
async function getTiffData() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff'
|
||||
|
|
|
|||
|
|
@ -11,8 +11,9 @@ const scene = new Scene({
|
|||
zoom: 3
|
||||
})
|
||||
});
|
||||
addLayer();
|
||||
|
||||
scene.on('loaded', () => {
|
||||
addLayer();
|
||||
});
|
||||
// async function getAllYearData() {
|
||||
// const allData = [];
|
||||
// for (let i = 1; i < 13; i++) {
|
||||
|
|
|
|||
|
|
@ -10,15 +10,16 @@ const scene = new Scene({
|
|||
zoom: 7
|
||||
})
|
||||
});
|
||||
|
||||
const layer = new ImageLayer({});
|
||||
layer.source(
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ]
|
||||
scene.on('loaded', () => {
|
||||
const layer = new ImageLayer({});
|
||||
layer.source(
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ]
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@ function joinData(geodata: any, ncovData: any) {
|
|||
});
|
||||
return geodata;
|
||||
}
|
||||
|
||||
const World = React.memo(function Map() {
|
||||
const [data, setData] = React.useState();
|
||||
const [filldata, setfillData] = React.useState();
|
||||
|
|
|
|||
|
|
@ -9,43 +9,45 @@ const scene = new Scene({
|
|||
zoom: 15.056
|
||||
})
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.size('unit_price', [ 5, 25 ])
|
||||
.color('name', [ '#49B5AD', '#5B8FF9' ])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.size('unit_price', [ 5, 25 ])
|
||||
.color('name', [ '#49B5AD', '#5B8FF9' ])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
const overlayers = {
|
||||
气泡图: pointLayer
|
||||
};
|
||||
const layersControl = new Layers({
|
||||
overlayers
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
const overlayers = {
|
||||
气泡图: pointLayer
|
||||
};
|
||||
const layersControl = new Layers({
|
||||
overlayers
|
||||
scene.addControl(layersControl);
|
||||
});
|
||||
|
||||
scene.addControl(layersControl);
|
||||
const zoomControl = new Zoom({
|
||||
position: 'topright'
|
||||
});
|
||||
|
||||
const zoomControl = new Zoom({
|
||||
position: 'topright'
|
||||
const scaleControl = new Scale({
|
||||
position: 'bottomright'
|
||||
});
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
});
|
||||
const scaleControl = new Scale({
|
||||
position: 'bottomright'
|
||||
});
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
|
|
|||
|
|
@ -9,8 +9,9 @@ const scene = new Scene({
|
|||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
||||
const zoomControl = new Zoom();
|
||||
const scaleControl = new Scale();
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
scene.on('loaded', () => {
|
||||
const zoomControl = new Zoom();
|
||||
const scaleControl = new Scale();
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,39 +16,42 @@ window.onLoad = function() {
|
|||
mapInstance: map
|
||||
})
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', [
|
||||
'circle',
|
||||
'triangle',
|
||||
'square',
|
||||
'pentagon',
|
||||
'hexagon',
|
||||
'octogon',
|
||||
'hexagram',
|
||||
'rhombus',
|
||||
'vesica'
|
||||
])
|
||||
.size('unit_price', [ 10, 25 ])
|
||||
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 2
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', [
|
||||
'circle',
|
||||
'triangle',
|
||||
'square',
|
||||
'pentagon',
|
||||
'hexagon',
|
||||
'octogon',
|
||||
'hexagram',
|
||||
'rhombus',
|
||||
'vesica'
|
||||
])
|
||||
.size('unit_price', [ 10, 25 ])
|
||||
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 2
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const url = 'https://webapi.amap.com/maps?v=1.4.15&key=15cd8a57710d40c9b7c0e3cc120f1200&callback=onLoad';
|
||||
const jsapi = document.createElement('script');
|
||||
jsapi.charset = 'utf-8';
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue