mirror of https://gitee.com/antv-l7/antv-l7
@thinkinggis
GitHub
commit
5df89b292b
42
.eslintrc
42
.eslintrc
|
|
@ -1,5 +1,45 @@
|
|||
{
|
||||
"extends": [
|
||||
"eslint-config-egg"
|
||||
],
|
||||
"globals": {
|
||||
"AMap": true
|
||||
"AMap": true,
|
||||
"L7": true,
|
||||
},
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"html"
|
||||
],
|
||||
"rules": {
|
||||
"no-console": [
|
||||
"error",
|
||||
{
|
||||
"allow": [
|
||||
"warn",
|
||||
"error"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-bitwise": [
|
||||
0
|
||||
],
|
||||
"experimentalDecorators": [
|
||||
0
|
||||
],
|
||||
"comma-dangle": [
|
||||
"error",
|
||||
"never"
|
||||
],
|
||||
"jsdoc/require-param": 0,
|
||||
"linebreak-style": [
|
||||
0
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ node_js:
|
|||
branches:
|
||||
only:
|
||||
- next
|
||||
install:
|
||||
- yarn install
|
||||
script:
|
||||
- yarn test
|
||||
- yarn coveralls
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
# L7
|
||||
|
||||
|
||||
[](https://www.npmjs.com/@antv/l7)
|
||||
[](http://npmjs.com/@antv/l7)
|
||||
|
||||
|
||||
L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
|
||||
|
|
@ -11,7 +8,7 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
|
|||
### Installation
|
||||
|
||||
```
|
||||
npm install @l7/l7
|
||||
npm install @antv/l7
|
||||
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,125 @@
|
|||
## L7 地理空间数据可视分析引擎
|
||||
|
||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
|
||||
|
||||
<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
|
||||
<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
|
||||
<source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
|
||||
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
</video>
|
||||
|
||||
|
||||
### Installation
|
||||
|
||||
```
|
||||
npm install @antv/l7
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 核心特性
|
||||
|
||||
### 🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
||||
### 🌏 2D，3D 一体化的海量数据高性能渲染
|
||||
|
||||
百万级空间数据实时，动态渲染。
|
||||
|
||||
### 🌏简单灵活的数据接入
|
||||
|
||||
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
|
||||
### 🌏 多地图底图支持，支持离线内网部署
|
||||
|
||||
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
|
||||
|
||||
## 支持丰富的图表类型
|
||||
|
||||
### 点图层
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义Marker
|
||||
|
||||
### 线图层
|
||||
|
||||
- 路径地图
|
||||
- 弧线，支持2D弧线、3D弧线以及大圆航线
|
||||
- 等值线
|
||||
|
||||
### 面图层
|
||||
|
||||
- 填充图
|
||||
- 3D填充图
|
||||
|
||||
### 热力图
|
||||
|
||||
- 经典热力图
|
||||
- 蜂窝热力图
|
||||
- 网格热力图
|
||||
|
||||
### 栅格地图
|
||||
- 图片
|
||||
- Raster
|
||||
|
||||
## L7 2.0 Roadmap
|
||||
|
||||
|
||||
|
||||
## Development
|
||||
|
||||
使用 Yarn Workspace 完成依赖安装以及各包之间的 link 工作：
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
开发模式：
|
||||
```bash
|
||||
yarn watch
|
||||
```
|
||||
|
||||
运行 Demo
|
||||
```bash
|
||||
yarn storybook
|
||||
```
|
||||
|
||||
代替 `git commit` 提交：
|
||||
```bash
|
||||
yarn commit
|
||||
```
|
||||
|
||||
## view doc example
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
visit http://localhost:8000/
|
||||
|
||||
## Add Package
|
||||
|
||||
add new package：
|
||||
```bash
|
||||
lerna create my-pack -y
|
||||
```
|
||||
|
||||
将 ui-lib 作为 my-pack 的依赖：
|
||||
```bash
|
||||
yarn workspace my-pack add ui-lib/1.0.0
|
||||
```
|
||||
|
||||
将 lodash 添加为所有 package 的依赖(不包含root）
|
||||
```bash
|
||||
yarn workspaces run add lodash
|
||||
```
|
||||
|
||||
将 typescript 设置为 root 的开发依赖
|
||||
```bash
|
||||
yarn add -W -D typescript jest
|
||||
```
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
// @see https://babeljs.io/docs/en/next/config-files#project-wide-configuration
|
||||
module.exports = (api) => {
|
||||
module.exports = api => {
|
||||
api.cache(() => process.env.NODE_ENV);
|
||||
|
||||
const isSite = api.env('site');
|
||||
|
|
@ -10,16 +10,16 @@ module.exports = (api) => {
|
|||
|
||||
if (isSite) { //
|
||||
return {
|
||||
"presets": [
|
||||
"babel-preset-gatsby"
|
||||
presets: [
|
||||
'babel-preset-gatsby'
|
||||
],
|
||||
"plugins": [
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
'@babel/plugin-proposal-nullish-coalescing-operator',
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
'@babel/plugin-proposal-nullish-coalescing-operator',
|
||||
[
|
||||
'@babel/plugin-proposal-decorators',
|
||||
{
|
||||
legacy: true,
|
||||
legacy: true
|
||||
}
|
||||
],
|
||||
[
|
||||
|
|
@ -29,10 +29,10 @@ module.exports = (api) => {
|
|||
extensions: [
|
||||
// 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
|
||||
// '.json',
|
||||
'.glsl',
|
||||
'.glsl'
|
||||
]
|
||||
}
|
||||
],
|
||||
]
|
||||
]
|
||||
};
|
||||
}
|
||||
|
|
@ -43,20 +43,20 @@ module.exports = (api) => {
|
|||
{
|
||||
targets: {
|
||||
browsers: 'Last 2 Chrome versions, Firefox ESR',
|
||||
node: 'current',
|
||||
node: 'current'
|
||||
},
|
||||
// set `modules: false` when building CDN bundle, let rollup do commonjs works
|
||||
// @see https://github.com/rollup/rollup-plugin-babel#modules
|
||||
modules: (isCDNBundle || isESModule) ? false : 'auto',
|
||||
},
|
||||
modules: (isCDNBundle || isESModule) ? false : 'auto'
|
||||
}
|
||||
],
|
||||
[
|
||||
'@babel/preset-react',
|
||||
{
|
||||
development: isCommonJS,
|
||||
},
|
||||
development: isCommonJS
|
||||
}
|
||||
],
|
||||
'@babel/preset-typescript',
|
||||
'@babel/preset-typescript'
|
||||
],
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
|
|
@ -64,14 +64,14 @@ module.exports = (api) => {
|
|||
[
|
||||
'@babel/plugin-proposal-decorators',
|
||||
{
|
||||
legacy: true,
|
||||
legacy: true
|
||||
}
|
||||
],
|
||||
[
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
{
|
||||
// @see https://github.com/storybookjs/storybook/issues/6069#issuecomment-472544973
|
||||
loose: true,
|
||||
loose: true
|
||||
}
|
||||
],
|
||||
'@babel/plugin-syntax-dynamic-import',
|
||||
|
|
@ -87,7 +87,7 @@ module.exports = (api) => {
|
|||
extensions: [
|
||||
// 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
|
||||
// '.json',
|
||||
'.glsl',
|
||||
'.glsl'
|
||||
]
|
||||
}
|
||||
],
|
||||
|
|
@ -95,13 +95,13 @@ module.exports = (api) => {
|
|||
// @see https://github.com/babel/babel/issues/8741#issuecomment-509041135
|
||||
'const-enum',
|
||||
{
|
||||
transform: 'constObject',
|
||||
transform: 'constObject'
|
||||
}
|
||||
],
|
||||
// 按需引用 @see https://github.com/lodash/babel-plugin-lodash
|
||||
'lodash',
|
||||
// 内联 WebGL 常量 @see https://www.npmjs.com/package/babel-plugin-inline-webgl-constants
|
||||
isCDNBundle ? 'inline-webgl-constants' : {},
|
||||
isCDNBundle ? 'inline-webgl-constants' : {}
|
||||
],
|
||||
ignore: [
|
||||
'node_modules',
|
||||
|
|
@ -113,8 +113,8 @@ module.exports = (api) => {
|
|||
'__tests__',
|
||||
'__stories__',
|
||||
'**/*/__snapshots__',
|
||||
'**/*/__tests__',
|
||||
]: [],
|
||||
],
|
||||
'**/*/__tests__'
|
||||
] : []
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,3 +2,6 @@
|
|||
export * from '@l7/scene';
|
||||
// @ts-ignore
|
||||
export * from '@l7/layers';
|
||||
|
||||
// @ts-ignore
|
||||
export * from '@l7/component';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
extends: [
|
||||
"@commitlint/config-conventional"
|
||||
'@commitlint/config-conventional'
|
||||
]
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,5 +2,74 @@
|
|||
title: Introduction
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /en/docs/api/
|
||||
- /en/docs/api
|
||||
---
|
||||
#### An open source large-scale geospatial data visualization analysis development framework powered by WebGL
|
||||
|
||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
|
||||
|
||||
<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
|
||||
<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
|
||||
<source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
|
||||
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
</video>
|
||||
|
||||
## 核心特性
|
||||
|
||||
|
||||
🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
||||
🌏 2D，3D 一体化的海量数据高性能渲染
|
||||
|
||||
百万级空间数据实时，动态渲染。
|
||||
|
||||
🌏 简单灵活的数据接入
|
||||
|
||||
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
|
||||
🌏 多地图底图支持，支持离线内网部署
|
||||
|
||||
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
|
||||
|
||||
## 支持丰富的图表类型
|
||||
|
||||
### 点图层
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义Marker
|
||||
|
||||
### 线图层
|
||||
|
||||
- 路径地图
|
||||
- 弧线，支持2D弧线、3D弧线以及大圆航线
|
||||
- 等值线
|
||||
|
||||
### 面图层
|
||||
|
||||
- 填充图
|
||||
- 3D填充图
|
||||
|
||||
### 热力图
|
||||
|
||||
- 经典热力图
|
||||
- 蜂窝热力图
|
||||
- 网格热力图
|
||||
|
||||
### 栅格地图
|
||||
- 图片
|
||||
- Raster
|
||||
|
||||
## L7 2.0 Roadmap
|
||||
|
||||
|
||||
|
||||
|
||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||
|
|
@ -2,5 +2,75 @@
|
|||
title: 简介
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/docs/api/
|
||||
- /zh/docs/api
|
||||
---
|
||||
|
||||
# L7 地理空间数据可视分析引擎
|
||||
|
||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
|
||||
|
||||
<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
|
||||
<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
|
||||
<source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
|
||||
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
|
||||
<p>Your user agent does not support the HTML5 Video element.</p>
|
||||
</video>
|
||||
|
||||
## 核心特性
|
||||
|
||||
|
||||
🌏 数据驱动可视化展示
|
||||
|
||||
数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
|
||||
|
||||
🌏 2D，3D 一体化的海量数据高性能渲染
|
||||
|
||||
百万级空间数据实时，动态渲染。
|
||||
|
||||
🌏 简单灵活的数据接入
|
||||
|
||||
支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
|
||||
|
||||
🌏 多地图底图支持，支持离线内网部署
|
||||
|
||||
高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
|
||||
|
||||
## 支持丰富的图表类型
|
||||
|
||||
### 点图层
|
||||
|
||||
- 气泡图
|
||||
- 散点图
|
||||
- 符号地图
|
||||
- 3D柱状地图
|
||||
- 聚合地图
|
||||
- 复合图表地图
|
||||
- 自定义Marker
|
||||
|
||||
### 线图层
|
||||
|
||||
- 路径地图
|
||||
- 弧线，支持2D弧线、3D弧线以及大圆航线
|
||||
- 等值线
|
||||
|
||||
### 面图层
|
||||
|
||||
- 填充图
|
||||
- 3D填充图
|
||||
|
||||
### 热力图
|
||||
|
||||
- 经典热力图
|
||||
- 蜂窝热力图
|
||||
- 网格热力图
|
||||
|
||||
### 栅格地图
|
||||
- 图片
|
||||
- Raster
|
||||
|
||||
## L7 2.0 Roadmap
|
||||
|
||||
|
||||
|
||||
|
||||
更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
|
||||
|
|
@ -1,10 +1,26 @@
|
|||
---
|
||||
title: Scene
|
||||
title: 场景 Scene
|
||||
order: 1
|
||||
---
|
||||
|
||||
## 简介
|
||||
`Scene `基础的地图类,提供地图创建，图层创建，管理等功能
|
||||
# 简介
|
||||
|
||||
## Scene
|
||||
|
||||
L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理
|
||||
|
||||
|
||||
## Map
|
||||
|
||||
L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过Scene 统一创建，创建管理
|
||||
只需要通过Scene传入地图配置项即可。
|
||||
|
||||
目前L7 支持两种地图底图
|
||||
|
||||
- 高德地图 国内业务场景 合规中国地图
|
||||
- MapBox 国际业务，或者内网离线部署场景
|
||||
|
||||
|
||||
|
||||
示例代码
|
||||
|
||||
|
|
@ -21,49 +37,12 @@ const scene =new L7.Scene({
|
|||
|
||||
### 构造函数
|
||||
|
||||
**Scene**<br />支持两种实例化方式
|
||||
|
||||
- 独立实例化 内部根据id自动穿件地图实例
|
||||
- 传入地图实例
|
||||
**Scene**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 独立实例化 Scene
|
||||
|
||||
```javascript
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'dark',
|
||||
center: [ 120.19382669582967, 30.258134 ],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
maxZoom:20,
|
||||
minZoom:0,
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### 根据map 实例创建Sence
|
||||
|
||||
_L7 基于高德地图3D模式开发的，因此传入Map实例 __viewModes需要设置成3d_<br />_
|
||||
```javascript
|
||||
var mapinstance = new AMap.Map('map',{
|
||||
center: [ 120.19382669582967, 30.258134 ],
|
||||
viewMode: '3D',
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
maxZoom:20,
|
||||
minZoom:0,
|
||||
});
|
||||
|
||||
const scene = new L7.Scene({
|
||||
mapStyle: 'dark',
|
||||
map:mapinstance
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## map
|
||||
L7 在scene 下保留了高德地图实例，可以通过scene.map 调用高德地图的map方法。<br />map 实例方法见[高德地图文档](https://lbs.amap.com/api/javascript-api/reference/map)
|
||||
|
|
@ -72,24 +51,10 @@ L7 在scene 下保留了高德地图实例，可以通过scene.map 调用高德
|
|||
scene.map
|
||||
```
|
||||
|
||||
|
||||
## 构造类
|
||||
|
||||
### PointLayer
|
||||
新建点图层
|
||||
|
||||
### PolylineLayer
|
||||
新建线图层
|
||||
|
||||
### PolygonLayer
|
||||
新建面图层
|
||||
|
||||
### ImageLayer
|
||||
新建图片图层
|
||||
|
||||
|
||||
## 配置项
|
||||
|
||||
### 地图配置项
|
||||
|
||||
### id
|
||||
需传入 dom 容器或者容器 id {domObject || string} [必选]
|
||||
|
||||
|
|
@ -104,6 +69,12 @@ scene.map
|
|||
地图初始俯仰角度 {number} default 0
|
||||
|
||||
### mapSyle
|
||||
|
||||
简化地图样式设置，L7 内置了三种主题默认样式
|
||||
- dark
|
||||
- light
|
||||
- normal
|
||||
|
||||
地图样式 {style} 目前仅支持高德地图。 default 'dark'<br />L7 内置三种种默认地图样式 dark | light|blank 空地图
|
||||
|
||||
设置地图的显示样式，目前支持两种地图样式：<br />第一种：自定义地图样式，如`"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"`<br />可前往[地图自定义平台](https://lbs.amap.com/dev/mapstyle/index)定制自己的个性地图样式；<br />第二种：官方样式模版,如`"amap://styles/grey"`。<br />其他模版样式及自定义地图的使用说明见[开发指南](https://lbs.amap.com/api/javascript-api/guide/create-map/mapstye/)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Map Control
|
||||
title: Control
|
||||
order: 1
|
||||
---
|
||||
# control
|
||||
|
|
@ -15,6 +15,7 @@ const baseControl = new L7.Control.Base(option);
|
|||
|
||||
|
||||
#### option
|
||||
|
||||
position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 地图组件
|
||||
title: Control
|
||||
order: 3
|
||||
---
|
||||
# control
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Map Marker
|
||||
title: Marker
|
||||
order: 3
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 地图标注
|
||||
title: Marker
|
||||
order: 3
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: 地图信息框
|
||||
title: popup
|
||||
order: 0
|
||||
---
|
||||
# popup
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: Map Layer
|
||||
order: 2
|
||||
---
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: 图层
|
||||
order: 2
|
||||
---
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
---
|
||||
title: HeatmapLayer
|
||||
order: 5
|
||||
---
|
||||
|
||||
# heatmapLayer
|
||||
|
||||
|
||||
### 简介
|
||||
|
||||
热力图图层，包含三种类型的，
|
||||
- 方格热力图
|
||||
|
||||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||
|
||||
- 六边形热力图
|
||||
|
||||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||
|
||||
- 经典热力图
|
||||
|
||||
|
||||
|
||||
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法
|
||||
|
||||
### source
|
||||
|
||||
热力图只支持点数据作为数据源
|
||||
|
||||
布局方法 通过source的 tansforms属性配置
|
||||
|
||||
- type 数据聚合类型 grid、hexagon
|
||||
- size 网格半径 单位 米
|
||||
- field 聚合字段
|
||||
- method 聚合方法 count,max,min,sum,mean5个统计维度
|
||||
|
||||
```javascript
|
||||
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
不同类型热力图shape支持
|
||||
|
||||
| | 2D | 3d |
|
||||
| --- | --- | --- |
|
||||
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
|
||||
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
|
||||
| 普通热力图 | heatmap | heatmap |
|
||||
|
||||
|
||||
热力图布局下只shape方法只支持常量的可视化。
|
||||
|
||||
```javascript
|
||||
HeatmapLayer.shape('square');
|
||||
HeatmapLayer.shape('hexagon');
|
||||
// 默认类型可以不设置
|
||||
```
|
||||
|
||||
### size
|
||||
当前版本 shape 为grid，hexagon不需要设置 size 映射
|
||||
|
||||
default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
|
||||
|
||||
**size(field,values) **
|
||||
|
||||
- field: 热力图权重字段
|
||||
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||
|
||||
```javascript
|
||||
HeatmapLayer.size ('field', [0, 1])
|
||||
```
|
||||
|
||||
|
||||
### color
|
||||
default heatMap 类型不需设置 color映射
|
||||
|
||||
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
|
||||
|
||||
|
||||
|
||||
### style
|
||||
|
||||
grid hexagon 可以通过style 设置透明度
|
||||
|
||||
default热力图需要通过style配置参数热力图参数
|
||||
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
- rampColors 色带参数
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
```javascript
|
||||
HeatmapLayer.style({
|
||||
intensity: 3,
|
||||
radius: 20,
|
||||
rampColors: {
|
||||
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
### 完整代码示例
|
||||
|
||||
#### 普通热力图
|
||||
|
||||
```javascript
|
||||
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
|
||||
|
||||
HeatmapLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.size('mag', [ 0, 1 ]) // weight映射通道
|
||||
.style({
|
||||
intensity: 3,
|
||||
radius: 20,
|
||||
rampColors: {
|
||||
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 网格热力图
|
||||
|
||||
```javascript
|
||||
var layer = scene.HeatmapLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('grid')
|
||||
.style({
|
||||
coverage: 0.8
|
||||
})
|
||||
.color('count',
|
||||
["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||||
|
||||
```
|
||||
|
||||
|
||||
#### 六边形热力图
|
||||
|
||||
```javascript
|
||||
var layer = scene.HeatmapLayer({
|
||||
zIndex: 2
|
||||
}).
|
||||
souce(data,{
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:lng,
|
||||
y:lat,
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type:'hexgon',
|
||||
size:1500,
|
||||
field:'count',
|
||||
operation: 'sum',
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('hexgon')
|
||||
.size(1000)
|
||||
.color('sum')
|
||||
.style({
|
||||
coverage:0.8
|
||||
})
|
||||
render()
|
||||
```
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
---
|
||||
title: HeatmapLayer
|
||||
order: 5
|
||||
---
|
||||
# heatmapLayer
|
||||
|
||||
|
||||
### 简介
|
||||
|
||||
热力图图层，包含三种类型的，
|
||||
- 方格热力图
|
||||
|
||||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||
|
||||
- 六边形热力图
|
||||
|
||||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||
|
||||
- 经典热力图
|
||||
|
||||
|
||||
|
||||
⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法
|
||||
|
||||
### source
|
||||
|
||||
热力图只支持点数据作为数据源
|
||||
|
||||
布局方法 通过source的 tansforms属性配置
|
||||
|
||||
- type 数据聚合类型 grid、hexagon
|
||||
- size 网格半径 单位 米
|
||||
- field 聚合字段
|
||||
- method 聚合方法 count,max,min,sum,mean5个统计维度
|
||||
|
||||
```javascript
|
||||
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
不同类型热力图shape支持
|
||||
|
||||
| | 2D | 3d |
|
||||
| --- | --- | --- |
|
||||
| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
|
||||
| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
|
||||
| 普通热力图 | heatmap | heatmap |
|
||||
|
||||
|
||||
热力图布局下只shape方法只支持常量的可视化。
|
||||
|
||||
```javascript
|
||||
HeatmapLayer.shape('square');
|
||||
HeatmapLayer.shape('hexagon');
|
||||
// 默认类型可以不设置
|
||||
```
|
||||
|
||||
### size
|
||||
当前版本 shape 为grid，hexagon不需要设置 size 映射
|
||||
|
||||
default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
|
||||
|
||||
**size(field,values) **
|
||||
|
||||
- field: 热力图权重字段
|
||||
- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
|
||||
|
||||
```javascript
|
||||
HeatmapLayer.size ('field', [0, 1])
|
||||
```
|
||||
|
||||
|
||||
### color
|
||||
default heatMap 类型不需设置 color映射
|
||||
|
||||
color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
|
||||
|
||||
|
||||
|
||||
### style
|
||||
|
||||
grid hexagon 可以通过style 设置透明度
|
||||
|
||||
default热力图需要通过style配置参数热力图参数
|
||||
|
||||
- intensity 全局热力权重 推荐权重范围 1-5
|
||||
- radius 热力半径，单位像素
|
||||
- rampColors 色带参数
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
```javascript
|
||||
HeatmapLayer.style({
|
||||
intensity: 3,
|
||||
radius: 20,
|
||||
rampColors: {
|
||||
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
### 完整代码示例
|
||||
|
||||
#### 普通热力图
|
||||
|
||||
```javascript
|
||||
// 测试数据 url https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json
|
||||
|
||||
HeatmapLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data)
|
||||
.size('mag', [ 0, 1 ]) // weight映射通道
|
||||
.style({
|
||||
intensity: 3,
|
||||
radius: 20,
|
||||
rampColors: {
|
||||
colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 网格热力图
|
||||
|
||||
```javascript
|
||||
var layer = scene.HeatmapLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.shape('grid')
|
||||
.style({
|
||||
coverage: 0.8
|
||||
})
|
||||
.color('count',
|
||||
["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||||
|
||||
```
|
||||
|
||||
|
||||
#### 六边形热力图
|
||||
|
||||
```javascript
|
||||
var layer = scene.HeatmapLayer({
|
||||
zIndex: 2
|
||||
}).
|
||||
souce(data,{
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:lng,
|
||||
y:lat,
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type:'hexgon',
|
||||
size:1500,
|
||||
field:'count',
|
||||
operation: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('hexgon')
|
||||
.size(1000)
|
||||
.color('sum')
|
||||
.style({
|
||||
coverage:0.8
|
||||
})
|
||||
render()
|
||||
```
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
title: ImageLayer
|
||||
order: 5
|
||||
---
|
||||
# ImageLayer
|
||||
|
||||
## 简介
|
||||
将图片添加到地图上，需要指定图片的经纬度范围
|
||||
|
||||
### 代码示例
|
||||
|
||||
```javascript
|
||||
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 ]
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
title: ImageLayer
|
||||
order: 5
|
||||
---
|
||||
# ImageLayer
|
||||
|
||||
## 简介
|
||||
将图片添加到地图上，需要指定图片的经纬度范围
|
||||
|
||||
### 代码示例
|
||||
|
||||
```javascript
|
||||
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 ]
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
---
|
||||
title: Map Layer
|
||||
order: 0
|
||||
---
|
||||
# Layer
|
||||
|
||||
|
||||
## 简介
|
||||
L7 Layer 接口设计遵循图形语法，在可视表达上
|
||||
|
||||
语法示例
|
||||
|
||||
```javascript
|
||||
new Layer(option)
|
||||
.source()
|
||||
.color()
|
||||
.size()
|
||||
.shape()
|
||||
.style()
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 构造函数
|
||||
|
||||
|
||||
## 配置项
|
||||
|
||||
### visable
|
||||
图层是否可见 {bool } default true
|
||||
|
||||
### zIndex
|
||||
图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int} default 0
|
||||
### minZoom
|
||||
图层显示最小缩放等级，（0-18） {number} default 0
|
||||
|
||||
### maxZoom
|
||||
图层显示最大缩放等级 （0-18） {number} default 18
|
||||
|
||||
|
||||
## 鼠标事件
|
||||
|
||||
beta版当前不支持，正式版会支持
|
||||
|
||||
```javascript
|
||||
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
|
||||
layer.on('dblclick', (ev)=>{}); // 鼠标左键双击图层事件
|
||||
layer.on('mousemove', (ev)=>{}); // 鼠标在图层上移动时触发
|
||||
layer.on('mouseover', (ev)=>{}); // 鼠标移入图层要素内时触发
|
||||
layer.on('mouseout', (ev)=>{}); // 鼠标移出图层要素时触发
|
||||
layer.on('mouseup', (ev)=>{}); // 鼠标在图层上单击抬起时触发
|
||||
layer.on('mousedown', (ev)=>{}); // 鼠标在图层上单击按下时触发
|
||||
layer.on('mouseleave', (ev)=>{}); // 鼠标离开图层要素
|
||||
layer.on('rightclick', (ev)=>{}); // 鼠标右键图层要素
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
### source
|
||||
数据源为layer设置数据 source(data,config)
|
||||
|
||||
- data {geojson|json|csv}
|
||||
|
||||
|
||||
源数据
|
||||
|
||||
- config 可选 数据源配置项
|
||||
- parser 数据解析，默认是解析层geojson
|
||||
- transforms [transform，transform ] 数据处理转换 可设置多个
|
||||
|
||||
parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source)
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'map',
|
||||
callback:function(item){
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat*1;
|
||||
item.lng = item.lng*1;
|
||||
item.v = item.v *1;
|
||||
item.coordinates = [x*1,y*1];
|
||||
return item;
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 6000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
###
|
||||
|
||||
### scale
|
||||
|
||||
|
||||
cscle('field', scaleConfig)
|
||||
|
||||
(field: string, scaleConfig: object)
|
||||
|
||||
为指定的数据字段进行列定义，返回 layer 实例。
|
||||
|
||||
|
||||
|
||||
- `field` 字段名。
|
||||
|
||||
- `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
|
||||
|
||||
```javascript
|
||||
{
|
||||
type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### size
|
||||
|
||||
将数据值映射到图形的大小上的方法。
|
||||
|
||||
**注意：**
|
||||
|
||||
不同图层的 size 的含义有所差别：
|
||||
|
||||
- point 图形的 size 影响点的半径大小和高度；
|
||||
|
||||
- line, arc, path 中的 size 影响线的粗细,和高度；
|
||||
|
||||
- polygon size 影响的是高度
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
pointLayer.size(10); // 常量
|
||||
pointLayer.size('type'); // 使用字段映射到大小
|
||||
pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值
|
||||
pointLayer.size('type', (type) => { // 回调函数
|
||||
if(type === 'a') {
|
||||
return 10;
|
||||
}
|
||||
return 5;
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### size(value）
|
||||
|
||||
传入数字常量，如 `pointLayer.size(20)`
|
||||
|
||||
#### size(field)
|
||||
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
|
||||
|
||||
#### size(field, callback)
|
||||
使用回调函数控制图形大小。
|
||||
|
||||
- `callback`: function 回调函数。
|
||||
|
||||
```javascript
|
||||
pointLayer.size('age', (value) => {
|
||||
if(value === 1) {
|
||||
return 5;
|
||||
}
|
||||
return 10;
|
||||
});
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
将数据值映射到图形的颜色上的方法。
|
||||
|
||||
```javascript
|
||||
layer.color('red'); // 常量颜色
|
||||
layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
|
||||
layer.color('type', [ 'red', 'blue' ]) // 指定颜色
|
||||
layer.color('type', (type) => { // 通过回调函数
|
||||
if (type === 'a') {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
layer.color('type*value', (type, value) => { //多个参数，通过回调函数
|
||||
if (type === 'a' && value > 100) {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### color(value)
|
||||
|
||||
|
||||
参数：`value` ：string
|
||||
只支持接收一个参数，value 可以是：
|
||||
|
||||
- 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
|
||||
|
||||
- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
|
||||
|
||||
|
||||
示例
|
||||
```javascript
|
||||
layer.color('name') // 映射数据字段
|
||||
layer.color('white') // 指定颜色
|
||||
```
|
||||
|
||||
|
||||
#### color(field, colors)
|
||||
|
||||
参数：
|
||||
|
||||
- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
|
||||
|
||||
- `colors`: string | array | function
|
||||
|
||||
|
||||
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
|
||||
|
||||
```javascript
|
||||
layer.color('name'); // 使用默认的颜色
|
||||
layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色
|
||||
```
|
||||
|
||||
- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
layer.color('gender', (value) => {
|
||||
if(value === 1) {
|
||||
return 'red'
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
layer.color('gender*age', (gender, age) => {
|
||||
if(age === 20 && gender ==' 男' ) {
|
||||
return 'red'
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
将数据值映射到图形的形状上的方法。
|
||||
|
||||
**shape(shape)**
|
||||
|
||||
参数`shape` string
|
||||
|
||||
只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
|
||||
|
||||
| layer类型 | shape类型 | 备注 |
|
||||
| --- | --- | --- |
|
||||
| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | |
|
||||
| line | line,arc, arc3d, greatcircle | |
|
||||
| polygon | fill,line, extrude | |
|
||||
|
||||
|
||||
**shape(field, shapes)**
|
||||
|
||||
**shape(field, callback)**
|
||||
|
||||
|
||||
### style
|
||||
|
||||
用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
|
||||
|
||||
- fill
|
||||
|
||||
- opacity 设置透明度
|
||||
|
||||
- stroke 线填充颜色
|
||||
|
||||
- strokeWidth 线的宽度
|
||||
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
fill:'red',
|
||||
opacity:0.8,
|
||||
stroke:'white'
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
### show
|
||||
图层显示
|
||||
|
||||
```javascript
|
||||
layer.show();
|
||||
```
|
||||
|
||||
|
||||
### hide
|
||||
|
||||
图层隐藏
|
||||
|
||||
```javascript
|
||||
layer.hide();
|
||||
```
|
||||
|
||||
|
||||
### fitBounds
|
||||
|
||||
缩放到图层范围
|
||||
|
||||
```javascript
|
||||
layer.fitBounds()
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
---
|
||||
title: Layer
|
||||
order: 0
|
||||
---
|
||||
# Layer
|
||||
|
||||
|
||||
## 简介
|
||||
L7 Layer 接口设计遵循图形语法，在可视表达上
|
||||
|
||||
语法示例
|
||||
|
||||
```javascript
|
||||
new Layer(option)
|
||||
.source()
|
||||
.color()
|
||||
.size()
|
||||
.shape()
|
||||
.style()
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 构造函数
|
||||
|
||||
|
||||
## 配置项
|
||||
|
||||
### visable
|
||||
图层是否可见 {bool } default true
|
||||
|
||||
### zIndex
|
||||
图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级 {int} default 0
|
||||
### minZoom
|
||||
图层显示最小缩放等级，（0-18） {number} default 0
|
||||
|
||||
### maxZoom
|
||||
图层显示最大缩放等级 （0-18） {number} default 18
|
||||
|
||||
|
||||
## 鼠标事件
|
||||
|
||||
beta版当前不支持，正式版会支持
|
||||
|
||||
```javascript
|
||||
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
|
||||
layer.on('dblclick', (ev)=>{}); // 鼠标左键双击图层事件
|
||||
layer.on('mousemove', (ev)=>{}); // 鼠标在图层上移动时触发
|
||||
layer.on('mouseover', (ev)=>{}); // 鼠标移入图层要素内时触发
|
||||
layer.on('mouseout', (ev)=>{}); // 鼠标移出图层要素时触发
|
||||
layer.on('mouseup', (ev)=>{}); // 鼠标在图层上单击抬起时触发
|
||||
layer.on('mousedown', (ev)=>{}); // 鼠标在图层上单击按下时触发
|
||||
layer.on('mouseleave', (ev)=>{}); // 鼠标离开图层要素
|
||||
layer.on('rightclick', (ev)=>{}); // 鼠标右键图层要素
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
### source
|
||||
数据源为layer设置数据 source(data,config)
|
||||
|
||||
- data {geojson|json|csv}
|
||||
|
||||
|
||||
源数据
|
||||
|
||||
- config 可选 数据源配置项
|
||||
- parser 数据解析，默认是解析层geojson
|
||||
- transforms [transform，transform ] 数据处理转换 可设置多个
|
||||
|
||||
parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source)
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms:[
|
||||
{
|
||||
type: 'map',
|
||||
callback:function(item){
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat*1;
|
||||
item.lng = item.lng*1;
|
||||
item.v = item.v *1;
|
||||
item.coordinates = [x*1,y*1];
|
||||
return item;
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 6000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
###
|
||||
|
||||
### scale
|
||||
|
||||
|
||||
cscle('field', scaleConfig)
|
||||
|
||||
(field: string, scaleConfig: object)
|
||||
|
||||
为指定的数据字段进行列定义，返回 layer 实例。
|
||||
|
||||
|
||||
|
||||
- `field` 字段名。
|
||||
|
||||
- `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
|
||||
|
||||
```javascript
|
||||
{
|
||||
type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow, quantile,quantize
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### size
|
||||
|
||||
将数据值映射到图形的大小上的方法。
|
||||
|
||||
**注意：**
|
||||
|
||||
不同图层的 size 的含义有所差别：
|
||||
|
||||
- point 图形的 size 影响点的半径大小和高度；
|
||||
|
||||
- line, arc, path 中的 size 影响线的粗细,和高度；
|
||||
|
||||
- polygon size 影响的是高度
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
pointLayer.size(10); // 常量
|
||||
pointLayer.size('type'); // 使用字段映射到大小
|
||||
pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值
|
||||
pointLayer.size('type', (type) => { // 回调函数
|
||||
if(type === 'a') {
|
||||
return 10;
|
||||
}
|
||||
return 5;
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### size(value）
|
||||
|
||||
传入数字常量，如 `pointLayer.size(20)`
|
||||
|
||||
#### size(field)
|
||||
根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
|
||||
|
||||
#### size(field, callback)
|
||||
使用回调函数控制图形大小。
|
||||
|
||||
- `callback`: function 回调函数。
|
||||
|
||||
```javascript
|
||||
pointLayer.size('age', (value) => {
|
||||
if(value === 1) {
|
||||
return 5;
|
||||
}
|
||||
return 10;
|
||||
});
|
||||
```
|
||||
|
||||
### color
|
||||
|
||||
将数据值映射到图形的颜色上的方法。
|
||||
|
||||
```javascript
|
||||
layer.color('red'); // 常量颜色
|
||||
layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
|
||||
layer.color('type', [ 'red', 'blue' ]) // 指定颜色
|
||||
layer.color('type', (type) => { // 通过回调函数
|
||||
if (type === 'a') {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
layer.color('type*value', (type, value) => { //多个参数，通过回调函数
|
||||
if (type === 'a' && value > 100) {
|
||||
return 'red';
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### color(value)
|
||||
|
||||
|
||||
参数：`value` ：string
|
||||
只支持接收一个参数，value 可以是：
|
||||
|
||||
- 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
|
||||
|
||||
- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
|
||||
|
||||
|
||||
示例
|
||||
```javascript
|
||||
layer.color('name') // 映射数据字段
|
||||
layer.color('white') // 指定颜色
|
||||
```
|
||||
|
||||
|
||||
#### color(field, colors)
|
||||
|
||||
参数：
|
||||
|
||||
- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
|
||||
|
||||
- `colors`: string | array | function
|
||||
|
||||
|
||||
colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
|
||||
|
||||
```javascript
|
||||
layer.color('name'); // 使用默认的颜色
|
||||
layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色
|
||||
```
|
||||
|
||||
- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
layer.color('gender', (value) => {
|
||||
if(value === 1) {
|
||||
return 'red'
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
layer.color('gender*age', (gender, age) => {
|
||||
if(age === 20 && gender ==' 男' ) {
|
||||
return 'red'
|
||||
}
|
||||
return 'blue';
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
将数据值映射到图形的形状上的方法。
|
||||
|
||||
**shape(shape)**
|
||||
|
||||
参数`shape` string
|
||||
|
||||
只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
|
||||
|
||||
| layer类型 | shape类型 | 备注 |
|
||||
| --- | --- | --- |
|
||||
| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square | |
|
||||
| line | line,arc, arc3d, greatcircle | |
|
||||
| polygon | fill,line, extrude | |
|
||||
|
||||
|
||||
**shape(field, shapes)**
|
||||
|
||||
**shape(field, callback)**
|
||||
|
||||
|
||||
### style
|
||||
|
||||
用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
|
||||
|
||||
- fill
|
||||
|
||||
- opacity 设置透明度
|
||||
|
||||
- stroke 线填充颜色
|
||||
|
||||
- strokeWidth 线的宽度
|
||||
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
fill:'red',
|
||||
opacity:0.8,
|
||||
stroke:'white'
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
### show
|
||||
图层显示
|
||||
|
||||
```javascript
|
||||
layer.show();
|
||||
```
|
||||
|
||||
|
||||
### hide
|
||||
|
||||
图层隐藏
|
||||
|
||||
```javascript
|
||||
layer.hide();
|
||||
```
|
||||
|
||||
|
||||
### fitBounds
|
||||
|
||||
缩放到图层范围
|
||||
|
||||
```javascript
|
||||
layer.fitBounds()
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
title: LineLayer
|
||||
order: 2
|
||||
---
|
||||
## 线图层
|
||||
|
||||
### shape
|
||||
|
||||
线图层支持4种 shape
|
||||
|
||||
- line 绘制路径图，
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d弧线地图 3D视角
|
||||
|
||||
⚠️ 弧线只需要设置起始点坐标即可
|
||||
|
||||
```
|
||||
new LineLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
|
||||
```
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[
|
||||
106.5234375,
|
||||
57.51582286553883
|
||||
],
|
||||
[
|
||||
136.40625,
|
||||
61.77312286453146
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### size
|
||||
|
||||
线图层 可以设置高度
|
||||
|
||||
- size 类型为number 则表示 line的宽度
|
||||
- size 类型为 [number , number] 分别表示宽度和高度
|
||||
|
||||
```javascript
|
||||
|
||||
lineLayer.size(1); // 线的宽度为 1
|
||||
lineLayer.size([1,2]); // 宽度为1，高度2
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
title: LineLayer
|
||||
order: 2
|
||||
---
|
||||
## 线图层
|
||||
|
||||
### shape
|
||||
|
||||
线图层支持4种 shape
|
||||
|
||||
- line 绘制路径图，
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d弧线地图 3D视角
|
||||
|
||||
⚠️ 弧线只需要设置起始点坐标即可
|
||||
|
||||
```
|
||||
new LineLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
|
||||
```
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": {},
|
||||
"geometry": {
|
||||
"type": "LineString",
|
||||
"coordinates": [
|
||||
[
|
||||
106.5234375,
|
||||
57.51582286553883
|
||||
],
|
||||
[
|
||||
136.40625,
|
||||
61.77312286453146
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### size
|
||||
|
||||
线图层 可以设置高度
|
||||
|
||||
- size 类型为number 则表示 line的宽度
|
||||
- size 类型为 [number , number] 分别表示宽度和高度
|
||||
|
||||
```javascript
|
||||
|
||||
lineLayer.size(1); // 线的宽度为 1
|
||||
lineLayer.size([1,2]); // 宽度为1，高度2
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
title: PointLayer
|
||||
order: 1
|
||||
---
|
||||
# PointLayer
|
||||
|
||||
|
||||
## 简介
|
||||
点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。
|
||||
|
||||
shape 支持
|
||||
|
||||
**3D类型 柱图**
|
||||
|
||||
```
|
||||
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
|
||||
|
||||
```
|
||||
|
||||
**2D 符号图**
|
||||
|
||||
```
|
||||
'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica',
|
||||
|
||||
```
|
||||
|
||||
**图片标注**
|
||||
|
||||
通过 ```Scene.addImage()``` 可以添加图片资源，
|
||||
|
||||
|
||||
### 代码示例
|
||||
|
||||
|
||||
#### 基本图形显示示例
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from "@antv/l7"
|
||||
|
||||
const layer = PointLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data.list, {
|
||||
type: 'array',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t',(level)=> {
|
||||
return [4,4,(level+40)];
|
||||
})
|
||||
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||||
|
||||
```
|
||||
|
||||
|
||||
#### 符号图
|
||||
|
||||
使用图片添加地图标注
|
||||
|
||||
```javascript
|
||||
|
||||
scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
|
||||
|
||||
|
||||
const layer = new PointLayer({
|
||||
zIndex: 4
|
||||
})
|
||||
.source(city)
|
||||
.size(20.0)
|
||||
.shape('local')
|
||||
.color('#0D408C')
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
title: PointLayer
|
||||
order: 1
|
||||
---
|
||||
|
||||
# PointLayer
|
||||
|
||||
|
||||
## 简介
|
||||
点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。
|
||||
|
||||
shape 支持
|
||||
|
||||
**3D类型 柱图**
|
||||
|
||||
```
|
||||
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
|
||||
|
||||
```
|
||||
|
||||
**2D 符号图**
|
||||
|
||||
```
|
||||
'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica',
|
||||
|
||||
```
|
||||
|
||||
**图片标注**
|
||||
|
||||
通过 ```Scene.addImage()``` 可以添加图片资源，
|
||||
|
||||
|
||||
### 代码示例
|
||||
|
||||
|
||||
#### 基本图形显示示例
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from "@antv/l7"
|
||||
|
||||
const layer = PointLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data.list, {
|
||||
type: 'array',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t',(level)=> {
|
||||
return [4,4,(level+40)];
|
||||
})
|
||||
.color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
|
||||
|
||||
```
|
||||
|
||||
|
||||
#### 符号图
|
||||
|
||||
使用图片添加地图标注
|
||||
|
||||
```javascript
|
||||
|
||||
scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
|
||||
|
||||
|
||||
const layer = new PointLayer({
|
||||
zIndex: 4
|
||||
})
|
||||
.source(city)
|
||||
.size(20.0)
|
||||
.shape('local')
|
||||
.color('#0D408C')
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
title: PolygonLayer
|
||||
order: 3
|
||||
---
|
||||
# 填充图
|
||||
|
||||
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
||||
|
||||
### shape
|
||||
|
||||
填充图支持3种shape
|
||||
|
||||
- fill 绘制填充面 不支持数据映射
|
||||
- line 绘制填充图描边 不支持数据映射
|
||||
- extrude 对填充图3D拉伸 不支持数据映射
|
||||
|
||||
``` javascript
|
||||
PolyonLayer.shape('fill');
|
||||
PolyonLayer.shape('line').size(1); // size 表示线宽度
|
||||
PolyonLayer.shape('extrude'); // size 表示高度
|
||||
|
||||
```
|
||||
|
||||
其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
title: PolygonLayer
|
||||
order: 3
|
||||
---
|
||||
# 填充图
|
||||
|
||||
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
||||
|
||||
### shape
|
||||
|
||||
填充图支持3种shape
|
||||
|
||||
- fill 绘制填充面 不支持数据映射
|
||||
- line 绘制填充图描边 不支持数据映射
|
||||
- extrude 对填充图3D拉伸 不支持数据映射
|
||||
|
||||
``` javascript
|
||||
PolyonLayer.shape('fill');
|
||||
PolyonLayer.shape('line').size(1); // size 表示线宽度
|
||||
PolyonLayer.shape('extrude'); // size 表示高度
|
||||
|
||||
```
|
||||
|
||||
其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
---
|
||||
title: quickStart
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /en/docs/tutorial
|
||||
---
|
||||
# 使用方法
|
||||
|
||||
L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
|
||||
|
||||
## 通过 CDN 使用
|
||||
|
||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://api.l7/v2.0.0-beta/l7.js'></script>
|
||||
<link href='https://api.l7/v2.0.0-beta/l7.css' rel='stylesheet' />
|
||||
</head>
|
||||
```
|
||||
|
||||
如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
||||
<!-- 上一步引入的 L7 JS 和 CSS -->
|
||||
</head>
|
||||
```
|
||||
⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
|
||||
|
||||
然后在 `<body>` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`：
|
||||
⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下：
|
||||
* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/)
|
||||
* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens)
|
||||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn` 安装 `@l7/scene` 和 `@l7/layers`：
|
||||
```bash
|
||||
npm install --save @l7/scene @l7/layers
|
||||
// or
|
||||
yarn add @l7/scene @l7/layers
|
||||
```
|
||||
|
||||
然后就可以使用其中包含的场景和各类图层：
|
||||
```typescript
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers';
|
||||
|
||||
(async function() {
|
||||
// 获取数据
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
// 创建场景
|
||||
const scene = new Scene({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
});
|
||||
|
||||
// 创建图层
|
||||
const layer = new PolygonLayer({});
|
||||
layer
|
||||
.source(data)
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
// 添加图层到场景中
|
||||
scene.addLayer(layer);
|
||||
|
||||
// 渲染场景
|
||||
scene.render();
|
||||
})();
|
||||
```
|
||||
|
||||
最后在 `<head>` 中引入 L7 CDN 版本的 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<link href='https://api.l7/v2.0.0-beta/l7.css' rel='stylesheet' />
|
||||
</head>
|
||||
```
|
||||
|
||||
L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
|
||||
* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
|
||||
* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
|
||||
|
||||
|
||||
## [WIP] React
|
||||
|
||||
React 组件待开发，目前可以暂时以 Submodule 方式使用：
|
||||
```tsx
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class AMap extends React.Component {
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
);
|
||||
const scene = new Scene({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
});
|
||||
const layer = new PolygonLayer({});
|
||||
|
||||
layer
|
||||
.source(await response.json())
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.render();
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
|
||||
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
---
|
||||
title: 快速上手
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/docs/tutorial
|
||||
---
|
||||
# 使用方法
|
||||
|
||||
L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
|
||||
|
||||
## 通过 CDN 使用
|
||||
|
||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://api.l7/v2.0.0-beta/l7.js'></script>
|
||||
<link href='https://api.l7/v2.0.0-beta/l7.css' rel='stylesheet' />
|
||||
</head>
|
||||
```
|
||||
|
||||
如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
||||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
||||
<!-- 上一步引入的 L7 JS 和 CSS -->
|
||||
</head>
|
||||
```
|
||||
⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
|
||||
|
||||
然后在 `<body>` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`：
|
||||
⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下：
|
||||
* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/)
|
||||
* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens)
|
||||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn` 安装 `@l7/scene` 和 `@l7/layers`：
|
||||
```bash
|
||||
npm install --save @l7/scene @l7/layers
|
||||
// or
|
||||
yarn add @l7/scene @l7/layers
|
||||
```
|
||||
|
||||
然后就可以使用其中包含的场景和各类图层：
|
||||
```typescript
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers';
|
||||
|
||||
(async function() {
|
||||
// 获取数据
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
// 创建场景
|
||||
const scene = new Scene({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
});
|
||||
|
||||
// 创建图层
|
||||
const layer = new PolygonLayer({});
|
||||
layer
|
||||
.source(data)
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
// 添加图层到场景中
|
||||
scene.addLayer(layer);
|
||||
|
||||
// 渲染场景
|
||||
scene.render();
|
||||
})();
|
||||
```
|
||||
|
||||
最后在 `<head>` 中引入 L7 CDN 版本的 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<link href='https://api.l7/v2.0.0-beta/l7.css' rel='stylesheet' />
|
||||
</head>
|
||||
```
|
||||
|
||||
L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
|
||||
* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
|
||||
* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
|
||||
|
||||
|
||||
## [WIP] React
|
||||
|
||||
React 组件待开发，目前可以暂时以 Submodule 方式使用：
|
||||
```tsx
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class AMap extends React.Component {
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
|
||||
);
|
||||
const scene = new Scene({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
});
|
||||
const layer = new PolygonLayer({});
|
||||
|
||||
layer
|
||||
.source(await response.json())
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
])
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
scene.render();
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: geojson
|
||||
order: 1
|
||||
---
|
||||
|
||||
|
||||
# geojson 数据介绍
|
||||
|
||||
|
||||
## 简介
|
||||
|
||||
GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
|
||||
|
||||
[geojson详细文档]()
|
||||
|
||||
## Geojson相关的JS库
|
||||
|
||||
### 地理统计分析工具
|
||||
|
||||
[turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的Javascript 库
|
||||
|
||||
|
||||
### 在线工具：
|
||||
|
||||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改GeoJSON数据
|
||||
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
title: geojson
|
||||
order: 1
|
||||
---
|
||||
|
||||
|
||||
# geojson 数据介绍
|
||||
|
||||
|
||||
## 简介
|
||||
|
||||
GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
|
||||
|
||||
[geojson详细文档]()
|
||||
|
||||
## Geojson相关的JS库
|
||||
|
||||
### 地理统计分析工具
|
||||
|
||||
[turfjs](http://turfjs.org/): 地理数据计算，处理，统计，分析的Javascript 库
|
||||
|
||||
|
||||
### 在线工具：
|
||||
|
||||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改GeoJSON数据
|
||||
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
---
|
||||
title: Source
|
||||
order: 0
|
||||
---
|
||||
|
||||
|
||||
# Source
|
||||
|
||||
|
||||
### 概述
|
||||
|
||||
source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
|
||||
|
||||
**parser:**
|
||||
|
||||
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。
|
||||
|
||||
**transform**
|
||||
|
||||
数据转换，数据统计，网格布局，数据聚合等数据操作。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### parser
|
||||
|
||||
空间数据分矢量数据和栅格数据两大类
|
||||
|
||||
- 矢量数据 支持 csv，geojson，json 三种数据类型
|
||||
|
||||
- 栅格数据 支持 image，Raster
|
||||
|
||||
|
||||
|
||||
#### geojson
|
||||
|
||||
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
|
||||
|
||||
不需要设置parser 参数
|
||||
|
||||
```javascript
|
||||
layer.source(data)
|
||||
```
|
||||
|
||||
|
||||
#### json
|
||||
|
||||
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
|
||||
|
||||
**点数据**
|
||||
|
||||
x: 经度字段
|
||||
|
||||
y: 纬度字段
|
||||
|
||||
```javascript
|
||||
|
||||
const data = [{
|
||||
lng:112.345,
|
||||
lat:30.455,
|
||||
value: 10
|
||||
},{
|
||||
lng:114.345,
|
||||
lat:31.455,
|
||||
value: 10
|
||||
}
|
||||
]
|
||||
|
||||
layer.source(
|
||||
data,
|
||||
{
|
||||
parser: {
|
||||
type:'json',
|
||||
x:'lng',
|
||||
y:'lat',
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**线段数据**
|
||||
|
||||
type: json
|
||||
|
||||
这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标
|
||||
|
||||
x:经度字段 起点经度
|
||||
y:纬度字段 起点纬度
|
||||
x1:经度字段 终点经度
|
||||
y1:纬度字段 终点纬度
|
||||
|
||||
```javascript
|
||||
const data = [{
|
||||
lng1:112.345,
|
||||
lat1:30.455,
|
||||
lng2:112.345,
|
||||
lat2:30.455,
|
||||
value: 10
|
||||
},{
|
||||
lng1:114.345,
|
||||
lat1:31.455,
|
||||
lng2:112.345,
|
||||
lat2:30.455,
|
||||
value: 10
|
||||
}
|
||||
];
|
||||
|
||||
layer.source(
|
||||
data,
|
||||
{
|
||||
parser:{
|
||||
type:'json',
|
||||
x:'lng1',
|
||||
y:'lat1' ,
|
||||
x1:'lng1',
|
||||
y1:'lat2' ,
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**面数据**
|
||||
|
||||
需要指定coordinates 字段, coordinates据格式
|
||||
|
||||
**注意面数据 coord 是三层数据结构**
|
||||
|
||||
```javascript
|
||||
|
||||
[ {
|
||||
type: "Polygon",
|
||||
'geometryCoord': [
|
||||
[
|
||||
[
|
||||
115.1806640625,
|
||||
30.637912028341123
|
||||
],
|
||||
[
|
||||
114.9609375,
|
||||
29.152161283318915
|
||||
],
|
||||
[
|
||||
117.79541015625001,
|
||||
27.430289738862594
|
||||
],
|
||||
[
|
||||
118.740234375,
|
||||
29.420460341013133
|
||||
],
|
||||
[
|
||||
117.46582031249999,
|
||||
31.50362930577303
|
||||
],
|
||||
[
|
||||
115.1806640625,
|
||||
30.637912028341123
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
layer.source(data,{
|
||||
parser:{
|
||||
type:'json',
|
||||
coordinates:'geometryCoord'
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### csv
|
||||
点，线数据配置项同json数据类型
|
||||
|
||||
```javascript
|
||||
layer.source(
|
||||
data,
|
||||
{
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:'lng1',
|
||||
y:'lat1' ,
|
||||
x1:'lng1',
|
||||
y1:'lat2' ,
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**栅格数据类型****
|
||||
|
||||
#### image
|
||||
根据图片的经纬度范围，将图片添加到地图上。 配置项
|
||||
|
||||
- type: image
|
||||
- extent: 图像的经纬度范围 []
|
||||
|
||||
```javascript
|
||||
layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
|
||||
parser:{
|
||||
type:'image',
|
||||
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
|
||||
}
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
#### raster
|
||||
栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项
|
||||
|
||||
- type raster
|
||||
- width 数据宽度二维矩阵 columns
|
||||
- height 数据高度
|
||||
- min 数据最大值
|
||||
- max 数据最小值
|
||||
- extent 经纬度范围
|
||||
|
||||
```javascript
|
||||
source(values, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width: n,
|
||||
height: m,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
### transforms
|
||||
目前支持三种数据处理方法 map，grid，hexagon transform配置项
|
||||
|
||||
- type 数据处理类型
|
||||
- tansform cfg 数据处理配置项
|
||||
|
||||
|
||||
#### map
|
||||
数据处理，支持自定义callback函数
|
||||
|
||||
- callback:function 回调函数
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
transforms:[
|
||||
{
|
||||
type: 'map',
|
||||
callback:function(item){
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat*1;
|
||||
item.lng = item.lng*1;
|
||||
item.v = item.v *1;
|
||||
item.coordinates = [x*1,y*1];
|
||||
return item;
|
||||
}
|
||||
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
#### grid
|
||||
|
||||
生成方格网布局，根据数据字段统计，主要在网格热力图中使用
|
||||
|
||||
- type: 'grid',
|
||||
- size: 网格半径
|
||||
- field: 数据统计字段
|
||||
- method:聚合方法 count,max,min,sum,mean5个统计维度
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
transforms:[
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
#### hexagon
|
||||
生成六边形网格布局，根据数据字段统计
|
||||
|
||||
- type: 'hexagon',
|
||||
- size: 网格半径
|
||||
- field: 数据统计字段
|
||||
- method:聚合方法 count,max,min,sum,mean5个统计维度
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
---
|
||||
title: Source
|
||||
order: 0
|
||||
---
|
||||
|
||||
|
||||
# Source
|
||||
|
||||
|
||||
### 概述
|
||||
|
||||
source 地理数据处理模块，主要包含数据解析（parser)，和数据处理(transform);
|
||||
|
||||
**parser:**
|
||||
|
||||
不同数据类型处理成统一数据格式。矢量数据包括 GeoJON, CSV，Json等不同数据格式，栅格数据，包括Raster，Image数据。将来还会支持瓦片格式数据。
|
||||
|
||||
**transform:**
|
||||
|
||||
数据转换，数据统计，网格布局，数据聚合等数据操作。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### parser
|
||||
|
||||
空间数据分矢量数据和栅格数据两大类
|
||||
|
||||
- 矢量数据 支持 csv，geojson，json 三种数据类型
|
||||
|
||||
- 栅格数据 支持 image，Raster
|
||||
|
||||
|
||||
|
||||
#### geojson
|
||||
|
||||
[geojson](https://www.yuque.com/antv/l7/dm2zll) 数据为默认数据格式，可以
|
||||
|
||||
不需要设置parser 参数
|
||||
|
||||
```javascript
|
||||
layer.source(data);
|
||||
```
|
||||
|
||||
|
||||
#### json
|
||||
|
||||
json 不是标准的地理数据结构，因此需要设置对应的经纬度字段
|
||||
|
||||
**点数据**
|
||||
|
||||
x: 经度字段
|
||||
|
||||
y: 纬度字段
|
||||
|
||||
```javascript
|
||||
|
||||
const data = [{
|
||||
lng:112.345,
|
||||
lat:30.455,
|
||||
value: 10
|
||||
},{
|
||||
lng:114.345,
|
||||
lat:31.455,
|
||||
value: 10
|
||||
}
|
||||
]
|
||||
|
||||
layer.source(
|
||||
data,
|
||||
{
|
||||
parser: {
|
||||
type:'json',
|
||||
x:'lng',
|
||||
y:'lat',
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**线段数据**
|
||||
|
||||
type: json
|
||||
|
||||
这里的直线表示有两个点组成的线段，主要绘制弧线的时候比较常用，只需指定线段的起始点坐标
|
||||
|
||||
x:经度字段 起点经度
|
||||
y:纬度字段 起点纬度
|
||||
x1:经度字段 终点经度
|
||||
y1:纬度字段 终点纬度
|
||||
|
||||
```javascript
|
||||
const data = [{
|
||||
lng1:112.345,
|
||||
lat1:30.455,
|
||||
lng2:112.345,
|
||||
lat2:30.455,
|
||||
value: 10
|
||||
},{
|
||||
lng1:114.345,
|
||||
lat1:31.455,
|
||||
lng2:112.345,
|
||||
lat2:30.455,
|
||||
value: 10
|
||||
}
|
||||
];
|
||||
|
||||
layer.source(
|
||||
data,
|
||||
{
|
||||
parser:{
|
||||
type:'json',
|
||||
x:'lng1',
|
||||
y:'lat1' ,
|
||||
x1:'lng1',
|
||||
y1:'lat2' ,
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**面数据**
|
||||
|
||||
需要指定coordinates 字段, coordinates据格式
|
||||
|
||||
**注意面数据 coord 是三层数据结构**
|
||||
|
||||
```javascript
|
||||
|
||||
[ {
|
||||
type: "Polygon",
|
||||
'geometryCoord': [
|
||||
[
|
||||
[
|
||||
115.1806640625,
|
||||
30.637912028341123
|
||||
],
|
||||
[
|
||||
114.9609375,
|
||||
29.152161283318915
|
||||
],
|
||||
[
|
||||
117.79541015625001,
|
||||
27.430289738862594
|
||||
],
|
||||
[
|
||||
118.740234375,
|
||||
29.420460341013133
|
||||
],
|
||||
[
|
||||
117.46582031249999,
|
||||
31.50362930577303
|
||||
],
|
||||
[
|
||||
115.1806640625,
|
||||
30.637912028341123
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
layer.source(data,{
|
||||
parser:{
|
||||
type:'json',
|
||||
coordinates:'geometryCoord'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### csv
|
||||
点，线数据配置项同json数据类型
|
||||
|
||||
```javascript
|
||||
layer.source(
|
||||
data,
|
||||
{
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:'lng1',
|
||||
y:'lat1' ,
|
||||
x1:'lng1',
|
||||
y1:'lat2' ,
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**栅格数据类型****
|
||||
|
||||
#### image
|
||||
根据图片的经纬度范围，将图片添加到地图上。 配置项
|
||||
|
||||
- type: image
|
||||
- extent: 图像的经纬度范围 []
|
||||
|
||||
```javascript
|
||||
layer.source('https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',{
|
||||
parser:{
|
||||
type:'image',
|
||||
extent: [ 121.1680, 30.2828, 121.3840, 30.4219 ]
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### raster
|
||||
栅格数据类型，主要表示遥感数据类型data 栅格数据的二维矩阵数据parser 配置项
|
||||
|
||||
- type raster
|
||||
- width 数据宽度二维矩阵 columns
|
||||
- height 数据高度
|
||||
- min 数据最大值
|
||||
- max 数据最小值
|
||||
- extent 经纬度范围
|
||||
|
||||
```javascript
|
||||
source(values, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width: n,
|
||||
height: m,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
extent: [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### transforms
|
||||
|
||||
目前支持三种数据处理方法 map，grid，hexagon transform配置项
|
||||
|
||||
- type 数据处理类型
|
||||
- tansform cfg 数据处理配置项
|
||||
|
||||
|
||||
#### map
|
||||
数据处理，支持自定义callback函数
|
||||
|
||||
- callback:function 回调函数
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
transforms:[
|
||||
{
|
||||
type: 'map',
|
||||
callback:function(item){
|
||||
const [x, y] = item.coordinates;
|
||||
item.lat = item.lat*1;
|
||||
item.lng = item.lng*1;
|
||||
item.v = item.v *1;
|
||||
item.coordinates = [x*1,y*1];
|
||||
return item;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### grid
|
||||
|
||||
生成方格网布局，根据数据字段统计，主要在网格热力图中使用
|
||||
|
||||
- type: 'grid',
|
||||
- size: 网格半径
|
||||
- field: 数据统计字段
|
||||
- method:聚合方法 count,max,min,sum,mean5个统计维度
|
||||
|
||||
```javascript
|
||||
layer.source(data, {
|
||||
transforms:[
|
||||
{
|
||||
type: 'grid',
|
||||
size: 15000,
|
||||
field:'v',
|
||||
method:'sum'
|
||||
}
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
#### hexagon
|
||||
生成六边形网格布局，根据数据字段统计
|
||||
|
||||
- type: 'hexagon',
|
||||
- size: 网格半径
|
||||
- field: 数据统计字段
|
||||
- method:聚合方法 count,max,min,sum,mean5个统计维度
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -63,3 +63,12 @@ GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支
|
|||
[http://geojson.io/](http://geojson.io/) 可以在线查看，绘制，修改GeoJSON数据
|
||||
|
||||
[https://mapshaper.org/](https://mapshaper.org/) 可以查看较大的geojson，还能够简化GeoJSON数据
|
||||
|
||||
## 数据资源
|
||||
|
||||
#### 全国行政区划边界
|
||||
[支持 geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
|
||||
|
||||
#### HighCharts 全球行政区划数据集
|
||||
|
||||
[https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/)
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: quickStart
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /en/docs/tutorial
|
||||
---
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
title: 快速上手
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/docs/tutorial
|
||||
---
|
||||
|
||||
内容
|
||||
|
|
@ -5,31 +5,29 @@ const scene = new Scene({
|
|||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [107.77791556935472, 35.443286920228644],
|
||||
zoom: 2.9142882493605033,
|
||||
center: [ 107.77791556935472, 35.443286920228644 ],
|
||||
zoom: 2.9142882493605033
|
||||
});
|
||||
window.mapScene = scene;
|
||||
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);
|
||||
})
|
||||
.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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,42 +1,45 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [103.83735604457024,1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
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({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.source(data,{
|
||||
parser:{
|
||||
type:'json',
|
||||
coordinates:'path'
|
||||
}
|
||||
})
|
||||
.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)
|
||||
)
|
||||
.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);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,44 +1,44 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer} from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 35.210526315789465,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [108.524505, 29.873128],
|
||||
zoom: 4.4,
|
||||
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [1, 2, level * 2 + 20];
|
||||
})
|
||||
.color('t',[
|
||||
'#094D4A', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#CEF8D6'
|
||||
],)
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
})
|
||||
scene.addLayer(pointLayer);
|
||||
console.log(pointLayer);
|
||||
|
||||
});
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,56 +4,56 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 43,
|
||||
center: [120.13383079335335,29.651873105004427],
|
||||
center: [ 120.13383079335335, 29.651873105004427 ],
|
||||
zoom: 7.068989519212174,
|
||||
type: 'mapbox',
|
||||
type: 'mapbox'
|
||||
});
|
||||
|
||||
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
|
||||
)
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:'lng',
|
||||
y:'lat',
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 2500,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', (sum)=>{
|
||||
.size('sum', sum => {
|
||||
return sum * 200;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#094D4A', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#C3F9CC',
|
||||
'#DEFAC0', '#ECFFB1'
|
||||
]
|
||||
);
|
||||
.color('sum', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#C3F9CC',
|
||||
'#DEFAC0',
|
||||
'#ECFFB1'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,34 +1,30 @@
|
|||
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [121.417463, 31.215175],
|
||||
center: [ 121.417463, 31.215175 ],
|
||||
pitch: 0,
|
||||
zoom: 11
|
||||
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
})
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
}).size(0.5)
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity:1.,
|
||||
})
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
})
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,36 +1,37 @@
|
|||
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 64.88,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [114.060288, 22.53684],
|
||||
zoom: 15.63,
|
||||
|
||||
center: [ 114.060288, 22.53684 ],
|
||||
zoom: 15.63
|
||||
});
|
||||
window.mapScene = scene;
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
title: Gallery
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /en/examples/
|
||||
- /en/examples
|
||||
---
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
title: Gallery
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/examples/
|
||||
- /zh/examples
|
||||
---
|
||||
|
|
|
|||
|
|
@ -4,49 +4,59 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [110.097892, 33.853662],
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap',
|
||||
type: 'amap'
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
.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'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count',(value)=>{
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0,
|
||||
})
|
||||
.color('count', [
|
||||
'#0B0030', '#100243',
|
||||
'#100243', '#1B048B',
|
||||
'#051FB7', '#0350C1',
|
||||
'#0350C1', '#0072C4',
|
||||
'#0796D3', '#2BA9DF',
|
||||
'#30C7C4', '#6BD5A0',
|
||||
'#A7ECB2', '#D0F4CA'
|
||||
].reverse())
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 20000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,44 +4,50 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [110.097892, 33.853662],
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap',
|
||||
type: 'amap'
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
.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'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count',(value)=>{
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0,
|
||||
})
|
||||
.color('count', [
|
||||
'#FF4818', '#F7B74A',
|
||||
'#FFF598', '#FF40F3',
|
||||
'#9415FF', '#421EB2'
|
||||
].reverse())
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#FF40F3',
|
||||
'#9415FF',
|
||||
'#421EB2'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,17 +4,16 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
pitch: 0,
|
||||
center: [110.097892, 33.853662],
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap',
|
||||
type: 'amap'
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
|
|
@ -31,20 +30,30 @@ fetch(
|
|||
}
|
||||
]
|
||||
})
|
||||
.size('count', (value) => {
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('circle')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
angle: 0
|
||||
})
|
||||
.color('count', [
|
||||
'#8C1EB2', '#8C1EB2', '#DA05AA',
|
||||
'#F0051A', '#FF2A3C', '#FF4818',
|
||||
'#FF4818', '#FF8B18',
|
||||
'#F77B00', '#ED9909',
|
||||
'#ECC357', '#EDE59C'
|
||||
].reverse())
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#8C1EB2',
|
||||
'#8C1EB2',
|
||||
'#DA05AA',
|
||||
'#F0051A',
|
||||
'#FF2A3C',
|
||||
'#FF4818',
|
||||
'#FF4818',
|
||||
'#FF8B18',
|
||||
'#F77B00',
|
||||
'#ED9909',
|
||||
'#ECC357',
|
||||
'#EDE59C'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,46 +4,53 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [110.097892, 33.853662],
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap',
|
||||
type: 'amap'
|
||||
});
|
||||
|
||||
window.mapScene = scene;
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
.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'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count',(value)=>{
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0,
|
||||
})
|
||||
.color('count', [
|
||||
'#FF3417', '#FF7412',
|
||||
'#FFB02A', '#FFE754',
|
||||
'#46F3FF', '#02BEFF',
|
||||
'#1A7AFF', '#0A1FB2'
|
||||
].reverse())
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 10000,
|
||||
field: 'v',
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('count', value => {
|
||||
return value * 0;
|
||||
})
|
||||
.shape('square')
|
||||
.style({
|
||||
coverage: 1,
|
||||
angle: 0
|
||||
})
|
||||
.color(
|
||||
'count',
|
||||
[
|
||||
'#FF3417',
|
||||
'#FF7412',
|
||||
'#FFB02A',
|
||||
'#FFE754',
|
||||
'#46F3FF',
|
||||
'#02BEFF',
|
||||
'#1A7AFF',
|
||||
'#0A1FB2'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 网格热力图
|
||||
order: 1
|
||||
---
|
||||
热力图的变体，网格布局呈现数据分级分布的聚合现象。
|
||||
|
|
@ -4,30 +4,35 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [127.5671666579043, 7.445038892195569],
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
type: 'mapbox',
|
||||
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]
|
||||
}
|
||||
})
|
||||
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);
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,40 +3,39 @@ import { HeatmapLayer } from '@l7/layers';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 57.4999999,
|
||||
center: [116.49434030056, 39.868073421167621],
|
||||
pitch: 58.5,
|
||||
center: [ 111.8759, 30.6942 ],
|
||||
rotation: 0.519,
|
||||
type: 'mapbox',
|
||||
zoom: 3,
|
||||
zoom: 3.6116
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new HeatmapLayer({
|
||||
})
|
||||
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])
|
||||
.size('capacity', [ 0, 1 ])
|
||||
.shape('heatmap3D')
|
||||
// weight映射通道
|
||||
// weight映射通道
|
||||
.style({
|
||||
intensity: 10,
|
||||
radius: 5,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors:[
|
||||
colors: [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
'#CF1D49'
|
||||
],
|
||||
positions: [0,0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||
}
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
console.log(layer)
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,30 +4,35 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [127.5671666579043,7.445038892195569],
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
type: 'mapbox',
|
||||
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({
|
||||
})
|
||||
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]
|
||||
}
|
||||
})
|
||||
.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);
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
---
|
||||
title: 经典热力图
|
||||
order: 0
|
||||
redirect_from:
|
||||
- /zh/examples/heatmap/
|
||||
---
|
||||
区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。
|
||||
|
|
@ -4,45 +4,51 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 47.49999999999995,
|
||||
center: [112.50447776627743,30.830476390931125],
|
||||
center: [ 112.50447776627743, 30.830476390931125 ],
|
||||
zoom: 3.9879693680088626,
|
||||
type: 'mapbox',
|
||||
type: 'mapbox'
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
.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,
|
||||
})
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,17 +3,18 @@ import { Scene } from '@l7/scene';
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 47.49999999999995,
|
||||
center: [114.05737552216226, 22.542656745583486],
|
||||
zoom: 12.405122702055305,
|
||||
type: 'mapbox',
|
||||
pitch: 56.499,
|
||||
center: [ 114.07737552216226, 22.542656745583486 ],
|
||||
rotation: 39.19,
|
||||
zoom: 12.47985,
|
||||
type: 'mapbox'
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
transforms: [
|
||||
|
|
@ -21,26 +22,31 @@ fetch(
|
|||
type: 'hexagon',
|
||||
size: 100,
|
||||
field: 'h12',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', [0, 600])
|
||||
.size('sum', [ 0, 600 ])
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#094D4A', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#CEF8D6'
|
||||
].reverse()
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,59 +1,59 @@
|
|||
import { HeatMapHexagonLayer, HeatMapGrid3dLayer } from '@l7/layers';
|
||||
import { HeatmapLayer } from '@l7/layers';
|
||||
import { Scene } from '@l7/scene';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 43,
|
||||
center: [120.13383079335335,29.651873105004427],
|
||||
center: [ 120.13383079335335, 29.651873105004427 ],
|
||||
zoom: 7.068989519212174,
|
||||
type: 'mapbox',
|
||||
type: 'mapbox'
|
||||
});
|
||||
|
||||
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
|
||||
)
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const layer = new HeatMapGrid3dLayer({})
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data, {
|
||||
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:'lng',
|
||||
y:'lat',
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
},
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 2500,
|
||||
field: 'v',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', (sum)=>{
|
||||
.size('sum', sum => {
|
||||
return sum * 200;
|
||||
})
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#094D4A', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#C3F9CC',
|
||||
'#DEFAC0', '#ECFFB1'
|
||||
]
|
||||
);
|
||||
.color('sum', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#C3F9CC',
|
||||
'#DEFAC0',
|
||||
'#ECFFB1'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
{
|
||||
"filename": "world.js",
|
||||
"title": "蜂窝热力图",
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tq4hR7QfQ0AAAAAAAAAAAABkARQnAQ"
|
||||
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*C3V7ToIoEvkAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,46 +4,52 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [116.49434030056, 39.868073421167621],
|
||||
center: [ 104.995156, 31.450658 ],
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
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({
|
||||
})
|
||||
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',
|
||||
},
|
||||
],
|
||||
method: 'sum'
|
||||
}
|
||||
]
|
||||
})
|
||||
.size('sum', (value) => {
|
||||
.size('sum', value => {
|
||||
return value * 50;
|
||||
})
|
||||
.shape('hexagon')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 1.0,
|
||||
opacity: 1.0
|
||||
})
|
||||
.color('sum', [
|
||||
'#1D2BB2', '#06117C',
|
||||
'#06117C', '#06117C',
|
||||
'#1D2BB2', '#1D2BB2',
|
||||
'#1D2BB2', '#0F62FF',
|
||||
'#0F62FF', '#0CB7FF',
|
||||
'#0CB7FF', '#52F1FC'
|
||||
|
||||
].reverse());
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#0F62FF',
|
||||
'#0F62FF',
|
||||
'#30B2E9',
|
||||
'#30B2E9',
|
||||
'#40C4CE'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 蜂窝热力图
|
||||
order: 1
|
||||
---
|
||||
热力图的变体，蜂窝布局呈现数据分级分布的聚合现象。
|
||||
|
|
@ -5,40 +5,34 @@ const scene = new Scene({
|
|||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [0., 23.107329],
|
||||
zoom: 0,
|
||||
center: [ 0, 23.107329 ],
|
||||
zoom: 0
|
||||
});
|
||||
console.time('loadData');
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
console.timeEnd('loadData');
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
function getAirportCoord(idx) {
|
||||
return [data.airports[idx][3], data.airports[idx][4]];
|
||||
return [ data.airports[idx][3], data.airports[idx][4] ];
|
||||
}
|
||||
const routes = data.routes.map(function (airline) {
|
||||
const routes = data.routes.map(function(airline) {
|
||||
return {
|
||||
coord: [
|
||||
getAirportCoord(airline[1]),
|
||||
getAirportCoord(airline[2])
|
||||
]
|
||||
}
|
||||
coord: [ getAirportCoord(airline[1]), getAirportCoord(airline[2]) ]
|
||||
};
|
||||
});
|
||||
console.timeEnd('loadData');
|
||||
const layer =
|
||||
new LineLayer({})
|
||||
.source(routes, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord',
|
||||
},
|
||||
})
|
||||
.size(0.6)
|
||||
.shape('arc')
|
||||
.color('rgb(5, 5, 50)')
|
||||
.style({
|
||||
opacity: 0.05,
|
||||
})
|
||||
;
|
||||
const layer = new LineLayer({})
|
||||
.source(routes, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord'
|
||||
}
|
||||
})
|
||||
.size(0.6)
|
||||
.shape('arc')
|
||||
.color('rgb(5, 5, 50)')
|
||||
.style({
|
||||
opacity: 0.05
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,30 +5,28 @@ const scene = new Scene({
|
|||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [107.77791556935472, 35.443286920228644],
|
||||
zoom: 2.9142882493605033,
|
||||
center: [ 107.77791556935472, 35.443286920228644 ],
|
||||
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,
|
||||
blur: 0.99
|
||||
})
|
||||
;
|
||||
.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,
|
||||
blur: 0.99
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,30 +5,30 @@ const scene = new Scene({
|
|||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [-74.06355155037261,40.73507179789368],
|
||||
zoom: 11.8623,
|
||||
center: [ -74.06967, 40.720399 ],
|
||||
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);
|
||||
})
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,31 +5,29 @@ const scene = new Scene({
|
|||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [104.92827320100344,41.209090496438364],
|
||||
zoom: 2.8844827033002813,
|
||||
rotation: 80,
|
||||
center: [ 104.34278, 41.12554 ],
|
||||
zoom: 2.94888,
|
||||
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,
|
||||
})
|
||||
.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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 弧线地图
|
||||
order: 1
|
||||
---
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等。
|
||||
|
|
@ -1,42 +1,40 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 40.89473684210526,
|
||||
pitch: 53.6305,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [102.60244, 23.10556],
|
||||
zoom: 14.28,
|
||||
center: [ 102.600579, 23.114887 ],
|
||||
zoom: 14.66
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new LineLayer({
|
||||
.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 ];
|
||||
})
|
||||
.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()
|
||||
)
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize'
|
||||
})
|
||||
.color(
|
||||
'ELEV',
|
||||
[
|
||||
'#E4682F',
|
||||
'#FF8752',
|
||||
'#FFA783',
|
||||
'#FFBEA8',
|
||||
'#FFDCD6',
|
||||
'#EEF3FF',
|
||||
'#C8D7F5',
|
||||
'#A5C1FC',
|
||||
'#7FA7F9',
|
||||
'#5F8AE5'
|
||||
].reverse()
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,38 +1,37 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 26.842105263157915,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [102.601919, 23.108997],
|
||||
zoom: 14.22,
|
||||
center: [ 102.599436, 23.116371 ],
|
||||
zoom: 14.78
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new LineLayer({
|
||||
.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 ];
|
||||
})
|
||||
.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'
|
||||
],
|
||||
)
|
||||
.shape('line')
|
||||
.scale('ELEV', {
|
||||
type: 'quantize'
|
||||
})
|
||||
.color('ELEV', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
]);
|
||||
scene.addLayer(layer);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,33 +1,40 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [104.117492,36.492696],
|
||||
zoom: 3.89,
|
||||
center: [ 104.117492, 36.492696 ],
|
||||
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({
|
||||
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'
|
||||
})
|
||||
.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())
|
||||
.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);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 等值线地图
|
||||
order: 2
|
||||
---
|
||||
指需要用一连串首尾闭合相等数值点的连线的图层，表示连续分布且逐渐变化的数量特征的地图，常用于等高线图、等温线图等图。
|
||||
|
|
@ -1,33 +1,40 @@
|
|||
import { Scene } from './node_modules/@l7/scene';
|
||||
import { LineLayer } from './node_modules/@l7/layers'
|
||||
import { LineLayer } from './node_modules/@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [104.117492,36.492696],
|
||||
zoom: 3.89,
|
||||
center: [ 104.117492, 36.492696 ],
|
||||
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({
|
||||
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'
|
||||
})
|
||||
.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())
|
||||
.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);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,42 +1,45 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [103.83735604457024,1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
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({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.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)
|
||||
)
|
||||
.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);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,42 +1,47 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [103.83735604457024,1.360253881403068],
|
||||
pitch: 4.00000000000001,
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
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({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.source(data,{
|
||||
parser:{
|
||||
type:'json',
|
||||
coordinates:'path'
|
||||
}
|
||||
})
|
||||
.size('level',(level)=>{
|
||||
return [0.8 , level * 1]
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
'level',
|
||||
[
|
||||
'#0A3663', '#1558AC',
|
||||
'#3771D9', '#4D89E5',
|
||||
'#64A5D3', '#72BED6',
|
||||
'#83CED6', '#A6E1E0',
|
||||
'#B8EFE2', '#D7F9F0'
|
||||
].slice(0,8)
|
||||
)
|
||||
.size('level', level => {
|
||||
return [ 0.8, level * 1 ];
|
||||
})
|
||||
.shape('line')
|
||||
.color(
|
||||
'level',
|
||||
[
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
]
|
||||
.reverse()
|
||||
.slice(0, 8)
|
||||
);
|
||||
scene.addLayer(layer);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,29 +1,24 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [116.3956,39.9392],
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
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' ]
|
||||
)
|
||||
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);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,29 +1,24 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { LineLayer } from '@l7/layers'
|
||||
import { LineLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [116.3956,39.9392],
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
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' ]
|
||||
)
|
||||
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);
|
||||
console.log(layer);
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 路径地图
|
||||
order: 0
|
||||
---
|
||||
指需要用一连串首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
|
||||
|
|
@ -1,48 +1,44 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [121.40, 31.258134],
|
||||
zoom: 15,
|
||||
center: [ 121.435159, 31.256971 ],
|
||||
zoom: 14.89,
|
||||
minZoom: 10
|
||||
});
|
||||
scene.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.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);
|
||||
.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);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,31 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [140.067171, 36.26186],
|
||||
center: [ 140.067171, 36.26186 ],
|
||||
zoom: 5.32,
|
||||
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';
|
||||
})
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
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)
|
||||
.shape('circle')
|
||||
.size('mag', [1, 25])
|
||||
.color('mag',(mag)=>{
|
||||
return mag > 4.5? "#5B8FF9" : '#5CCEA1';
|
||||
})
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
})
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,43 +1,45 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [-122.80009283836715, 37.05881309947238],
|
||||
center: [ -121.24357, 37.58264 ],
|
||||
pitch: 0,
|
||||
zoom: 5.740491857794806
|
||||
zoom: 6.45
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv')
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.source(data,{
|
||||
parser:{
|
||||
type:'csv',
|
||||
x:'Longitude',
|
||||
y:'Latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.size(4)
|
||||
.color('Magnitude',[
|
||||
'#0A3663', '#1558AC',
|
||||
'#3771D9', '#4D89E5',
|
||||
'#64A5D3', '#72BED6',
|
||||
'#83CED6', '#A6E1E0',
|
||||
'#B8EFE2', '#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0,
|
||||
})
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
.shape('circle')
|
||||
.size(4)
|
||||
.color('Magnitude', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0'
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,38 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [ 96.99215001469588, 29.281597225674773],
|
||||
center: [ 96.99215001469588, 29.281597225674773 ],
|
||||
zoom: 2.194613775109773,
|
||||
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'])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
})
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
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'
|
||||
])
|
||||
.style({
|
||||
opacity: 0.5,
|
||||
strokeWidth: 0
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 气泡地图
|
||||
order: 0
|
||||
---
|
||||
指地图上可用一个形状相同、大小和与其代表的数值成固定比率的圆点符号来定位的点图层，用于表达离散现象分布特征的地图。
|
||||
|
|
@ -1,70 +1,78 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { Marker, Popup } from '@l7/component'
|
||||
import * as G2 from '@antv/g2'
|
||||
import { Marker } from '@l7/component';
|
||||
import * as G2 from '@antv/g2';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [2.6125016864608597,49.359131],
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
pitch: 0,
|
||||
zoom: 4.19
|
||||
});
|
||||
|
||||
scene.on('loaded',()=>{
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
})
|
||||
});
|
||||
function addChart() {
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach(function (item) {
|
||||
const el = document.createElement('div');
|
||||
const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.nodes.forEach(function(item) {
|
||||
const el = document.createElement('div');
|
||||
const total =
|
||||
item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
|
||||
const size = Math.min(parseInt(total / 30000), 70);
|
||||
if(size< 30) {
|
||||
return
|
||||
}
|
||||
console.log(total);
|
||||
const itemData = [{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
}, {
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
}, {
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}];
|
||||
const size = Math.min(parseInt(total / 30000, 10), 70);
|
||||
if (size < 30) {
|
||||
return;
|
||||
}
|
||||
const itemData = [
|
||||
{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
},
|
||||
{
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
},
|
||||
{
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0,
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.tooltip(false);
|
||||
chart.axis('count', {
|
||||
grid: false
|
||||
});
|
||||
chart
|
||||
.interval()
|
||||
.position('item*count')
|
||||
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
|
||||
.opacity(1);
|
||||
chart.render();
|
||||
new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
})
|
||||
.addTo(scene);
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.tooltip(false);
|
||||
chart.axis('count', {
|
||||
grid:false
|
||||
});
|
||||
chart.interval().position('item*count').color('item',['#5CCEA1','#5D7092','#5B8FF9']).opacity(1);
|
||||
chart.render();
|
||||
new Marker({
|
||||
element: el
|
||||
}).setLnglat({
|
||||
lng:item.coordinates[0],
|
||||
lat:item.coordinates[1]
|
||||
}).addTo(scene);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,91 +1,101 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { Marker, Popup } from '@l7/component'
|
||||
import * as G2 from '@antv/g2'
|
||||
import { Marker } from '@l7/component';
|
||||
import * as G2 from '@antv/g2';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [2.6125016864608597,49.359131],
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
pitch: 0,
|
||||
zoom: 4.19
|
||||
});
|
||||
|
||||
scene.on('loaded',()=>{
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
})
|
||||
});
|
||||
window.mapScene = scene;
|
||||
function addChart() {
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach(function (item) {
|
||||
const el = document.createElement('div');
|
||||
const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.nodes.forEach(function(item) {
|
||||
const el = document.createElement('div');
|
||||
const total =
|
||||
item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
|
||||
const size = Math.min(parseInt(total / 30000), 70);
|
||||
if(size< 30) {
|
||||
return
|
||||
}
|
||||
const itemData = [{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
}, {
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
}, {
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}];
|
||||
|
||||
var sliceNumber = 0.02;
|
||||
|
||||
// 自定义 other 的图形，增加两条线
|
||||
G2.Shape.registerShape('interval', 'sliceShape', {
|
||||
draw: function draw(cfg, container) {
|
||||
var points = cfg.points;
|
||||
var path = [];
|
||||
path.push(['M', points[0].x, points[0].y]);
|
||||
path.push(['L', points[1].x, points[1].y - sliceNumber]);
|
||||
path.push(['L', points[2].x, points[2].y - sliceNumber]);
|
||||
path.push(['L', points[3].x, points[3].y]);
|
||||
path.push('Z');
|
||||
path = this.parsePath(path);
|
||||
return container.addShape('path', {
|
||||
attrs: {
|
||||
fill: cfg.color,
|
||||
path: path
|
||||
}
|
||||
});
|
||||
const size = Math.min(parseInt(total / 30000, 10), 70);
|
||||
if (size < 30) {
|
||||
return;
|
||||
}
|
||||
});
|
||||
const itemData = [
|
||||
{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
},
|
||||
{
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
},
|
||||
{
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}
|
||||
];
|
||||
|
||||
var chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0,
|
||||
const sliceNumber = 0.02;
|
||||
|
||||
// 自定义 other 的图形，增加两条线
|
||||
G2.Shape.registerShape('interval', 'sliceShape', {
|
||||
draw: function draw(cfg, container) {
|
||||
const points = cfg.points;
|
||||
let path = [];
|
||||
path.push([ 'M', points[0].x, points[0].y ]);
|
||||
path.push([ 'L', points[1].x, points[1].y - sliceNumber ]);
|
||||
path.push([ 'L', points[2].x, points[2].y - sliceNumber ]);
|
||||
path.push([ 'L', points[3].x, points[3].y ]);
|
||||
path.push('Z');
|
||||
path = this.parsePath(path);
|
||||
return container.addShape('path', {
|
||||
attrs: {
|
||||
fill: cfg.color,
|
||||
path
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.coord('theta', {
|
||||
innerRadius: 0.6
|
||||
});
|
||||
chart.tooltip(false);
|
||||
chart
|
||||
.intervalStack()
|
||||
.position('percent')
|
||||
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
|
||||
.shape('sliceShape');
|
||||
chart.render();
|
||||
new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
})
|
||||
.addTo(scene);
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.coord('theta', {
|
||||
innerRadius: 0.6
|
||||
});
|
||||
chart.tooltip(false);
|
||||
chart.intervalStack().position('percent').color('item',['#5CCEA1','#5D7092','#5B8FF9']).shape('sliceShape');
|
||||
chart.render();
|
||||
new Marker({
|
||||
element: el
|
||||
}).setLnglat({
|
||||
lng:item.coordinates[0],
|
||||
lat:item.coordinates[1]
|
||||
}).addTo(scene);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { Marker, Popup } from '@l7/component'
|
||||
import * as G2 from '@antv/g2'
|
||||
import { Marker } from '@l7/component';
|
||||
import * as G2 from '@antv/g2';
|
||||
|
||||
const CSS = `.l7-marker .g2-guide-html {
|
||||
width: 50px;
|
||||
|
|
@ -21,16 +21,16 @@ l7-marker .g2-guide-html .value {
|
|||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
`
|
||||
`;
|
||||
function loadCssCode(code) {
|
||||
var style = document.createElement('style');
|
||||
const style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.rel = 'stylesheet';
|
||||
// for Chrome Firefox Opera Safari
|
||||
style.appendChild(document.createTextNode(code));
|
||||
// for IE
|
||||
// style.styleSheet.cssText = code;
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
const head = document.getElementsByTagName('head')[0];
|
||||
head.appendChild(style);
|
||||
}
|
||||
loadCssCode(CSS);
|
||||
|
|
@ -40,40 +40,46 @@ const scene = new Scene({
|
|||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [52.21496184144132, 24.121126851768906],
|
||||
zoom: 3.802,
|
||||
center: [ 52.21496184144132, 24.121126851768906 ],
|
||||
zoom: 3.802
|
||||
});
|
||||
window.mapScene = scene;
|
||||
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/5b772136-a1f4-4fc5-9a80-9f9974b4b182.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, center, population]) {
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.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([ center, population ]) {
|
||||
const popobj = {};
|
||||
population.forEach(element => {
|
||||
popobj[element.Code] = element['Population, female (% of total) (% of total)']
|
||||
popobj[element.Code] =
|
||||
element['Population, female (% of total) (% of total)'];
|
||||
});
|
||||
// 数据绑定
|
||||
|
||||
center.features = center.features.map((fe) => {
|
||||
center.features = center.features.map(fe => {
|
||||
fe.properties.female = popobj[fe.properties.id] * 1 || 0;
|
||||
return fe;
|
||||
})
|
||||
center.features.forEach((point, index) => {
|
||||
});
|
||||
center.features.forEach(point => {
|
||||
const el = document.createElement('div');
|
||||
const coord = point.geometry.coordinates;
|
||||
const v = point.properties.female * 1;
|
||||
if (v < 1 || v> 46 && v < 54) return;
|
||||
if (v < 1 || (v > 46 && v < 54)) { return; }
|
||||
const size = 60;
|
||||
const data = [{
|
||||
type: '男性',
|
||||
value: 100.00 - v.toFixed(2)
|
||||
}, {
|
||||
type: '女性',
|
||||
value: v.toFixed(2) * 1
|
||||
}];
|
||||
const data = [
|
||||
{
|
||||
type: '男性',
|
||||
value: 100.0 - v.toFixed(2)
|
||||
},
|
||||
{
|
||||
type: '女性',
|
||||
value: v.toFixed(2) * 1
|
||||
}
|
||||
];
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
|
|
@ -88,15 +94,18 @@ scene.on('loaded', () => {
|
|||
radius: 0.9,
|
||||
innerRadius: 0.6
|
||||
});
|
||||
chart.intervalStack().position('value').color('type', ['#5CCEA1','#5B8FF9']).opacity(1);
|
||||
chart
|
||||
.intervalStack()
|
||||
.position('value')
|
||||
.color('type', [ '#5CCEA1', '#5B8FF9' ])
|
||||
.opacity(1);
|
||||
chart.render();
|
||||
new Marker(
|
||||
{ element: el}
|
||||
).setLnglat({
|
||||
lng: coord[0],
|
||||
lat: coord[1]
|
||||
}).addTo(scene);
|
||||
})
|
||||
|
||||
new Marker({ element: el })
|
||||
.setLnglat({
|
||||
lng: coord[0],
|
||||
lat: coord[1]
|
||||
})
|
||||
.addTo(scene);
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 复合图表地图
|
||||
order: 6
|
||||
---
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
|
@ -1,40 +1,42 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 65.68421052631578,
|
||||
pitch: 66.02383,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [121.3917, 31.259242],
|
||||
center: [ 121.400257, 31.25287 ],
|
||||
zoom: 14.55,
|
||||
rotation: 120
|
||||
|
||||
rotation: 134.9507
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
}).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,
|
||||
})
|
||||
.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);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +1,42 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 65.68421052631578,
|
||||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [121.3917, 31.259242],
|
||||
zoom: 13.55,
|
||||
rotation: 120
|
||||
|
||||
center: [ 121.412224, 31.26192438 ],
|
||||
zoom: 13.13438,
|
||||
rotation: 35.97133
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
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'
|
||||
}
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
}).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,
|
||||
})
|
||||
.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
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,44 +1,44 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 35.210526315789465,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [108.524505, 29.873128],
|
||||
zoom: 4.4,
|
||||
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function (level) {
|
||||
return [1, 2, level * 2 + 20];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A', '#146968',
|
||||
'#1D7F7E', '#289899',
|
||||
'#34B6B7', '#4AC5AF',
|
||||
'#5FD3A6', '#7BE39E',
|
||||
'#A1EDB8', '#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.color('t', [
|
||||
'#094D4A',
|
||||
'#146968',
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
console.log(pointLayer);
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,38 +1,33 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 35.210526315789465,
|
||||
pitch: 48.62562,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [108.524505, 29.873128],
|
||||
zoom: 4.4,
|
||||
|
||||
center: [ 104.026043, 31.847 ],
|
||||
rotation: -0.76,
|
||||
zoom: 4.48
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w'
|
||||
}
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function (level) {
|
||||
return [1, 2, level * 2 + 20];
|
||||
})
|
||||
.color('#006CFF')
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
})
|
||||
.shape('cylinder')
|
||||
.size('t', function(level) {
|
||||
return [ 1, 2, level * 2 + 20 ];
|
||||
})
|
||||
.color('#006CFF')
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
console.log(pointLayer);
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 3D 柱状地图
|
||||
order: 4
|
||||
---
|
||||
用形状大小相同的柱状体代替点状符号，高度与数值大小映射共同表达离散现象分布特征的地图
|
||||
|
|
@ -1,29 +1,30 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
console.log(this);
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [121.434765, 31.256735],
|
||||
zoom: 14.83,
|
||||
center: [ 121.434765, 31.256735 ],
|
||||
zoom: 14.83
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
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',
|
||||
'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',
|
||||
'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',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data, {
|
||||
|
|
@ -33,9 +34,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
|
|||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('name', ['00', '01', '02'])
|
||||
.shape('name', [ '00', '01', '02' ])
|
||||
.size(20);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,26 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [116.276227, 35.256776],
|
||||
zoom: 6,
|
||||
center: [ 116.276227, 35.256776 ],
|
||||
zoom: 6
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
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',
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
|
||||
);
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data)
|
||||
.shape('marker')
|
||||
.size(12);
|
||||
scene.addLayer(imageLayer);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,72 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [120.5969, 29.7918],
|
||||
center: [ 120.5969, 29.7918 ],
|
||||
pitch: 35,
|
||||
zoom: 7,
|
||||
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) => {
|
||||
|
||||
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) {
|
||||
.shape('w', function(w) {
|
||||
return w;
|
||||
})
|
||||
.size(15)
|
||||
.size(15);
|
||||
scene.addLayer(imageLayer);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 符号地图
|
||||
order: 2
|
||||
---
|
||||
以形状变量中具象的图标映射的点图层，将真实地物具化为利于直观识别的图标，常用于突出信息的突出表达。
|
||||
|
|
@ -1,40 +1,54 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { Marker } from '@l7/component'
|
||||
import { Marker } from '@l7/component';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [110.80009283836715, 37.05881309947238],
|
||||
center: [ 105.790327, 36.495636 ],
|
||||
pitch: 0,
|
||||
zoom: 4
|
||||
});
|
||||
|
||||
scene.on('loaded',()=>{
|
||||
scene.on('loaded', () => {
|
||||
addMarkers();
|
||||
})
|
||||
});
|
||||
|
||||
function addMarkers() {
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json')
|
||||
.then((res) => res.json())
|
||||
.then((nodes) => {
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
|
||||
if (nodes[i].g !== '1' || nodes[i].v === '') continue;
|
||||
console.log(nodes[i],nodes[i].v === '')
|
||||
var el = document.createElement('label');
|
||||
el.className = 'lableclass';
|
||||
el.textContent = nodes[i].v +'℃';
|
||||
el.style.background = getColor(nodes[i].v);
|
||||
el.style.borderColor = getColor(nodes[i].v);
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
}).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
|
||||
.addTo(scene);;
|
||||
|
||||
}
|
||||
})
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(nodes => {
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
if (nodes[i].g !== '1' || nodes[i].v === '') { continue; }
|
||||
const el = document.createElement('label');
|
||||
el.className = 'lableclass';
|
||||
el.textContent = nodes[i].v + '℃';
|
||||
el.style.background = getColor(nodes[i].v);
|
||||
el.style.borderColor = getColor(nodes[i].v);
|
||||
new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
|
||||
.addTo(scene);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getColor(v) {
|
||||
return v > 50 ? '#800026' : v > 40 ? '#BD0026' : v > 30 ? '#E31A1C' : v > 20 ? '#FC4E2A' : v > 10 ? '#FD8D3C' : v > 5 ? '#FEB24C' : v > 0 ? '#FED976' : '#FFEDA0';
|
||||
}
|
||||
function getColor(v) {
|
||||
return v > 50
|
||||
? '#800026'
|
||||
: v > 40
|
||||
? '#BD0026'
|
||||
: v > 30
|
||||
? '#E31A1C'
|
||||
: v > 20
|
||||
? '#FC4E2A'
|
||||
: v > 10
|
||||
? '#FD8D3C'
|
||||
: v > 5
|
||||
? '#FEB24C'
|
||||
: v > 0
|
||||
? '#FED976'
|
||||
: '#FFEDA0';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: 自定义 Marker
|
||||
order: 7
|
||||
---
|
||||
可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。
|
||||
|
|
@ -1,34 +1,30 @@
|
|||
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [121.417463, 31.215175],
|
||||
center: [ 121.417463, 31.215175 ],
|
||||
pitch: 0,
|
||||
zoom: 11
|
||||
|
||||
});
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
|
||||
.then((res) => res.text())
|
||||
.then((data) => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
})
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
y: 'lat',
|
||||
x: 'lng'
|
||||
}
|
||||
}).size(0.5)
|
||||
})
|
||||
.size(0.5)
|
||||
.color('#080298')
|
||||
.style({
|
||||
opacity:1.,
|
||||
})
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
})
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,36 +1,37 @@
|
|||
|
||||
import { Scene } from '@l7/scene';
|
||||
import { PointLayer } from '@l7/layers'
|
||||
import { PointLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 64.88,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [114.060288, 22.53684],
|
||||
zoom: 15.63,
|
||||
|
||||
center: [ 114.060288, 22.53684 ],
|
||||
zoom: 15.63
|
||||
});
|
||||
window.mapScene = scene;
|
||||
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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
title: "散点地图"
|
||||
order: 1
|
||||
---
|
||||
指地图上可用一个形状大小相同的点状符号来定位，用表达离散现象分布特征的地图，如人口、农作物、动植物等的分布。
|
||||
|
|
@ -1,30 +1,35 @@
|
|||
import { Scene } from '@l7/scene';
|
||||
import { PolygonLayer } from '@l7/layers'
|
||||
import { PolygonLayer } from '@l7/layers';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 15.05263,
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [114.056128, 22.529272],
|
||||
zoom: 14.2,
|
||||
center: [ 114.050008, 22.529272 ],
|
||||
zoom: 14.1
|
||||
});
|
||||
|
||||
window.mapScene = scene;
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer =
|
||||
new PolygonLayer ({
|
||||
})
|
||||
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'])
|
||||
.size('h20', [ 100, 120, 160, 200, 260, 500 ])
|
||||
.color('h20', [
|
||||
'#816CAD',
|
||||
'#A67FB5',
|
||||
'#C997C7',
|
||||
'#DEB8D4',
|
||||
'#F5D4E6',
|
||||
'#FAE4F1',
|
||||
'#FFF3FC'
|
||||
])
|
||||
.style({
|
||||
opacity: 1.0
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue