mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' into docs
This commit is contained in:
thinkinggis
commit
2932da9673
|
|
@ -0,0 +1,84 @@
|
|||
# Contributing to L7
|
||||
|
||||
👍🎉 欢迎向 L7 贡献代码! 🎉👍
|
||||
|
||||
## 前置依赖安装
|
||||
|
||||
### 安装 Yarn
|
||||
|
||||
由于使用了 Yarn workspace，首先需要安装 Yarn：https://yarnpkg.com/en/docs/install#windows-stable
|
||||
|
||||
### Windows 环境配置
|
||||
|
||||
[L7 测试方案](https://github.com/antvis/L7/blob/master/dev-docs/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95%E6%96%B9%E6%A1%88.md)依赖 headless-gl，其中需要 node-gyp [编译本地依赖](https://github.com/nodejs/node-gyp#on-windows)。
|
||||
|
||||
1. 首先以管理员身份启动 PowerShell
|
||||
2. 运行 `npm install --global --production windows-build-tools`，安装 Microsoft's windows-build-tools
|
||||
|
||||
安装过程中其他问题[详见](https://github.com/antvis/L7/issues/101)。
|
||||
|
||||
## 安装依赖
|
||||
|
||||
安装依赖并完成 Yarn workspace 初始化：
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Windows
|
||||
|
||||
```bash
|
||||
copy node_modules/gl/deps/windows/dll/x64/*.dll c:\windows\system32
|
||||
```
|
||||
|
||||
## 运行 DEMO
|
||||
|
||||
启动各个 package 代码变更监听：
|
||||
```bash
|
||||
yarn watch
|
||||
```
|
||||
|
||||
启动 Storybook，会自动打开 `http://localhost:6006/`：
|
||||
```bash
|
||||
yarn storybook
|
||||
```
|
||||
|
||||
## 运行测试
|
||||
|
||||
运行单元测试：
|
||||
```bash
|
||||
yarn test
|
||||
```
|
||||
|
||||
运行单元测试并查看代码覆盖率：
|
||||
```bash
|
||||
yarn coveralls
|
||||
```
|
||||
|
||||
## 添加 Lerna package
|
||||
|
||||
添加一个新的 lerna 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
|
||||
```
|
||||
|
||||
## 提交代码
|
||||
|
||||
代替 `git commit` 提交：
|
||||
```bash
|
||||
yarn commit
|
||||
```
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
module.exports = ({ config }) => {
|
||||
|
||||
// config.module.rules.push({
|
||||
// test: /\.glsl$/,
|
||||
// loader: 'raw-loader'
|
||||
// });
|
||||
config.module.rules.push({
|
||||
test: /\.glsl$/,
|
||||
loader: 'raw-loader'
|
||||
});
|
||||
|
||||
// config.module.rules.push({
|
||||
// test: /\.worker\.(js|ts)$/,
|
||||
|
|
|
|||
15
.travis.yml
15
.travis.yml
|
|
@ -1,4 +1,15 @@
|
|||
language: node_js
|
||||
os: linux
|
||||
sudo: required
|
||||
dist: trusty
|
||||
addons:
|
||||
apt:
|
||||
packages:
|
||||
- mesa-utils
|
||||
- xvfb
|
||||
- libgl1-mesa-dri
|
||||
- libglapi-mesa
|
||||
- libosmesa6
|
||||
|
||||
node_js:
|
||||
- '12'
|
||||
|
|
@ -13,6 +24,10 @@ before_install:
|
|||
install:
|
||||
- yarn install
|
||||
|
||||
before_script:
|
||||
- export DISPLAY=:99.0; sh -e /etc/init.d/xvfb start
|
||||
|
||||
script:
|
||||
- yarn lint
|
||||
- yarn test
|
||||
- yarn build
|
||||
|
|
|
|||
341
CHANGELOG.md
341
CHANGELOG.md
|
|
@ -1,9 +1,344 @@
|
|||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
# [2.0.0-beta.16](https://github.com/antvis/L7/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2019-11-29)
|
||||
|
||||
**Note:** Version bump only for package L7
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [2.0.0-beta.15](https://github.com/antvis/L7/compare/v2.0.0-beta.14...v2.0.0-beta.15) (2019-11-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **control:** lint error ([c863d7c](https://github.com/antvis/L7/commit/c863d7c8d15e560e3dfaf39d0ea3fac3242d776a))
|
||||
* **map:** temporarily closed amap offset coordinate ([9a20f64](https://github.com/antvis/L7/commit/9a20f6480321c9297ff27fe4cfe6af9032fcb969))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [2.0.0-beta.14](https://github.com/antvis/L7/compare/v2.0.0-beta.13...v2.0.0-beta.14) (2019-11-28)
|
||||
|
||||
**Note:** Version bump only for package L7
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [2.0.0-beta.13](https://github.com/antvis/L7/compare/v2.0.0-beta.12...v2.0.0-beta.13) (2019-11-28)
|
||||
|
||||
**Note:** Version bump only for package L7
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [2.0.0-beta.12](https://github.com/antvis/L7/compare/v2.0.0-beta.11...v2.0.0-beta.12) (2019-11-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **component:** fix marker ([14d4818](https://github.com/antvis/L7/commit/14d48184a1579241b077110ed51a8358de25e010))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# 2.0.0-beta.11 (2019-11-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **active:** fliter acitve ([c603e30](https://github.com/antvis/L7/commit/c603e30e2368310c3bbb2559d6c1a703c489634b))
|
||||
* **babel:** gatsby env ([a0f249e](https://github.com/antvis/L7/commit/a0f249e40f18f712c522b2ccf3adf4434b9c2837))
|
||||
* **component:** rename IPopupService ([a553111](https://github.com/antvis/L7/commit/a553111340065525be993b6a8df2754653880c59))
|
||||
* **demo:** bugs ([5a857f9](https://github.com/antvis/L7/commit/5a857f9c1b707c91cbc07b0fc4878be3fe56011b))
|
||||
* **demo:** demo ([a4e49a6](https://github.com/antvis/L7/commit/a4e49a6f6b25f585ba224f6d92fafd5cb5e0113f))
|
||||
* **demo:** demo ([3792e6c](https://github.com/antvis/L7/commit/3792e6c3ea55860dd8cffbab1b68a2c212052aca))
|
||||
* **demo:** gatsby ([5faac23](https://github.com/antvis/L7/commit/5faac2306c34ac8f3a02fdc61ad18337a4df7f49))
|
||||
* **demo:** gatsby ([b6a1785](https://github.com/antvis/L7/commit/b6a1785a0ba432134495f6d9ac65f92ecc045fe8))
|
||||
* **demo:** update demo ([3ae610f](https://github.com/antvis/L7/commit/3ae610f81421fb2720966dde76f5988dac8acc02))
|
||||
* **demo:** update demo ([f073b39](https://github.com/antvis/L7/commit/f073b3900b3bb7bdf030654c9e4bc71972179e84))
|
||||
* **doc:** file name lowercase ([3cbdc9c](https://github.com/antvis/L7/commit/3cbdc9c7f1d9be34e9c917f05531323946993eb4))
|
||||
* **fix:** fix ([f40e44f](https://github.com/antvis/L7/commit/f40e44ffa07d33d6fbf828e8a006f0ec708612f3))
|
||||
* **fix confilict:** conflict ([8a09ae2](https://github.com/antvis/L7/commit/8a09ae24bef7ba845e5b16759b3ecac210e472c5))
|
||||
* **fix css:** fix css png ([f7e5376](https://github.com/antvis/L7/commit/f7e5376b7d6c64b2b078dca8f2a230f4fce14c68))
|
||||
* **fix css:** fix css png ([da604e2](https://github.com/antvis/L7/commit/da604e266f36b70fcc7faa23fa7fe3359d3a1318))
|
||||
* **l7:** modules import ([7106b4f](https://github.com/antvis/L7/commit/7106b4f7ad494541ee2f8f56018d18a19c940ada))
|
||||
* **layer render:** scene 创建完成字段调用render方法 ([b5112a5](https://github.com/antvis/L7/commit/b5112a575083add0be1b770f7dafbc3644339230))
|
||||
* **layers:** heatmap 3d effect ([38d1736](https://github.com/antvis/L7/commit/38d173610fbf729dfc3a6fae94ad27bb68f33cb8))
|
||||
* **layerservice:** fix init bugs in layer service ([8cbbf7b](https://github.com/antvis/L7/commit/8cbbf7b28d63f4df16f061a4ae21726f243e7108))
|
||||
* **layerservice:** fix init bugs in layer service ([8844243](https://github.com/antvis/L7/commit/8844243050f619b28043c4e9ed1942fe172f561e))
|
||||
* **maker:** marker demo ([34d4d68](https://github.com/antvis/L7/commit/34d4d68151fe09992ec26bcec83a9862f6591920))
|
||||
* **maker:** marker demo ([685e17b](https://github.com/antvis/L7/commit/685e17bf44033ad86d7fd7793605018bbdc71206))
|
||||
* **map:** amap contanier creat new amap div ([bf43136](https://github.com/antvis/L7/commit/bf4313678501ec9c96da43de87b3b8dbf7be4c18))
|
||||
* **map:** export l7-maps in CDN bundle ([9d08549](https://github.com/antvis/L7/commit/9d085491f697ac2c17b80c55df8cc97e3e2c2298))
|
||||
* **map:** use P20 offset coordinates ([393e891](https://github.com/antvis/L7/commit/393e891a22098db3bcfb036a7182a45238ca6a73)), closes [#94](https://github.com/antvis/L7/issues/94)
|
||||
* **modules:** remove node_modules ([4239ca8](https://github.com/antvis/L7/commit/4239ca80dec24cfd92ad2f244f50337a3ae03d36))
|
||||
* **packages:** remove sub modules node_modules ([132b99e](https://github.com/antvis/L7/commit/132b99e4d2bef7ec5565a0b18c5659e8b246944b))
|
||||
* **site:** 首页头图位置,以及英文大小写 ([1c1f5b1](https://github.com/antvis/L7/commit/1c1f5b1f1efe150cbbc572fb6408141fbc97dc81))
|
||||
* chart demo code ([213a4bd](https://github.com/antvis/L7/commit/213a4bdb60a2a17670ae0d20a6f03efe3d9ba7c6))
|
||||
* eslint bug ([52e8afc](https://github.com/antvis/L7/commit/52e8afcb345151f4e544a4227590e6eebd7b42bd))
|
||||
* eslint missing in devDependencies ([3858f45](https://github.com/antvis/L7/commit/3858f4541ebce87f55b528625b33ff99c77fdd76))
|
||||
* **readme:** readme ([38d7c95](https://github.com/antvis/L7/commit/38d7c9520b5ef16e1c1b9468757703afc6f9ad52))
|
||||
* **render:** gl type ([f0d49d9](https://github.com/antvis/L7/commit/f0d49d915717c6799faabcb149339ec73923e616))
|
||||
* **rm cache:** rm cache ([51ea07e](https://github.com/antvis/L7/commit/51ea07ea664229f775b7c191cfde68299cc8c2d5))
|
||||
* **site:** site img ([0aabc0f](https://github.com/antvis/L7/commit/0aabc0f91b2488e09a0ccab5adb08df68ceb9c6e))
|
||||
* **site:** site img ([96d94d7](https://github.com/antvis/L7/commit/96d94d7f3889425568abf28d6fb9cc84b1ade53e))
|
||||
* **travis:** update travis ([2ac66b4](https://github.com/antvis/L7/commit/2ac66b4b50abfd0e7ddb998d54b698a718c1f86b))
|
||||
* **travis:** update travis ([909c9d1](https://github.com/antvis/L7/commit/909c9d18feb3bc6791be7ade9691295fa235e348))
|
||||
* babel.config.js for gatsby ([6c2cb7c](https://github.com/antvis/L7/commit/6c2cb7c7ddfab2b4ac84231f3a1558280589f996))
|
||||
* gatsby site examples ([624a88b](https://github.com/antvis/L7/commit/624a88b28843c8d62e7701eecbec1a6344c9cacc))
|
||||
* locale.json should be valid json ([a75c435](https://github.com/antvis/L7/commit/a75c43591ab68e9930e7ef60fa0d90e86b9c8db0))
|
||||
* locale.json should be valid json ([9ff435f](https://github.com/antvis/L7/commit/9ff435f52b75cc1535f17911cfbce51f9cfabf46))
|
||||
* **event:** add touch event ([e37a3eb](https://github.com/antvis/L7/commit/e37a3ebb8a95a0b2409dcc6db8423ae8e8797e4a))
|
||||
* **extrude:** add geojson rewind ([0d833f5](https://github.com/antvis/L7/commit/0d833f52d6757d324212730fee260b63635ef31e))
|
||||
* **extrude:** add geojson rewind ([12ca2c7](https://github.com/antvis/L7/commit/12ca2c7e36d5aa3611dbb6b784d4883ddda1a2f1))
|
||||
* **layer:** 修复数据更新数据为空 ([96bc0fc](https://github.com/antvis/L7/commit/96bc0fc1c0d570f0ceda7451c0594220543cd04d))
|
||||
* **layer:** 修复数据更新数据为空 ([d708f85](https://github.com/antvis/L7/commit/d708f85b1f366c39ddb32409e220bec21aa98915))
|
||||
* **layer:** eslint err ([6911b3f](https://github.com/antvis/L7/commit/6911b3f4e9be5e531c201cf860f48cdbd157b84e))
|
||||
* **layer:** eslint err ([219b8c1](https://github.com/antvis/L7/commit/219b8c12a4d4122f2f6995c3ebd86c271d5dc3c5))
|
||||
* **layers:** heatmap 3d effect ([c99bb27](https://github.com/antvis/L7/commit/c99bb27d94ad9b6b1e85b7b153953dd2a7455db8))
|
||||
* **line-layer:** 修复相邻线段重叠情况下的接头处理 ([d4a8f29](https://github.com/antvis/L7/commit/d4a8f2943e4efcbf0d7aa8a223aa343135a8662b))
|
||||
* **line-layer:** 修复相邻线段重叠情况下的接头处理 ([badca04](https://github.com/antvis/L7/commit/badca0446d79701fc5545fe84261456f76f85ca8))
|
||||
* **lint:** lint warning ([66c4304](https://github.com/antvis/L7/commit/66c4304c14d759d1ccb3301fd638c75bfbfb8031))
|
||||
* **lint:** lint warning ([45ec241](https://github.com/antvis/L7/commit/45ec241ed3fe6124daeaac32dfa94ba8af35f89d))
|
||||
* **map:** map style map ([9ab41ff](https://github.com/antvis/L7/commit/9ab41ff9d224b06be89c2ee50b40500b479aec3d))
|
||||
* **map:** map style map ([ac1056c](https://github.com/antvis/L7/commit/ac1056c3a28b71f622118ee6e05f8b163ce80b67))
|
||||
* **package:** update version ([e6bf285](https://github.com/antvis/L7/commit/e6bf28557cabecbde6db546c4d990294aeacc4c7))
|
||||
* **package:** update version ([1db0b47](https://github.com/antvis/L7/commit/1db0b4717227e05b7c60f0968c072a7aea1a8147))
|
||||
* **point:** 修复shape映射,图片加载的事件 ([8d54bc6](https://github.com/antvis/L7/commit/8d54bc6ab59a09f2f75015271dcf1862e1e1dffd))
|
||||
* **point:** 修复shape映射,图片加载的事件 ([84a55df](https://github.com/antvis/L7/commit/84a55dfdcd19c164cbb0136491123b0984a06f03))
|
||||
* **point-layer:** adjust shift bits in vertex compression ([1104e3a](https://github.com/antvis/L7/commit/1104e3afc5168f0bdf2411d9c8e4da95c72d1b8c))
|
||||
* **point-layer:** adjust shift bits in vertex compression ([865875d](https://github.com/antvis/L7/commit/865875d47874faec65f4c81f8f97c4be3fd04d5a))
|
||||
* **polygon-layer:** 修复 demo ([b4fdc97](https://github.com/antvis/L7/commit/b4fdc97b56929c372c1e2b2b5bfad1ffa483636b))
|
||||
* **polygon-layer:** 修复 demo ([f382bdb](https://github.com/antvis/L7/commit/f382bdbc0de1a48ddd6e11039e497d04dee588e5))
|
||||
* **poylygon:** json source ([3296975](https://github.com/antvis/L7/commit/3296975d0486f27e5000889e515dea70aacde1f7))
|
||||
* **poylygon:** json source ([0b099ca](https://github.com/antvis/L7/commit/0b099cac5e72241b97214639fa849bef112f6fd5))
|
||||
* **raster layer:** raster layer triangle ([cce659a](https://github.com/antvis/L7/commit/cce659aaa1fda8e6964bc6c839b875fa05a89c7d))
|
||||
* **raster layer:** update raster triangle ([b0f6265](https://github.com/antvis/L7/commit/b0f6265cd3b16c6ff39d0a6693788a25fca7bda2))
|
||||
* **scene:** engine run ([c5ada86](https://github.com/antvis/L7/commit/c5ada860bb957918413437619c16064d27df86dc))
|
||||
* **travis:** travis nodejs version ([93d1578](https://github.com/antvis/L7/commit/93d1578a77e6c017aad4ad200f543bae518290e6))
|
||||
* control css ([09ebe29](https://github.com/antvis/L7/commit/09ebe2981eff86b396594e73f975316370eb42e6))
|
||||
* **rendermask:** maskmesh ([1c2c33e](https://github.com/antvis/L7/commit/1c2c33ed05eca8efd722bdfdab2187c0e6f8e381))
|
||||
* **rendermask:** maskmesh ([d55ffff](https://github.com/antvis/L7/commit/d55ffff5aa9a87a3f4130b0a34ca69375de9ba83))
|
||||
* **scene:** engine run ([9d8e531](https://github.com/antvis/L7/commit/9d8e531df67ea4603377abf30749cc9cf7724a1a))
|
||||
* **src:** lint err ([b269222](https://github.com/antvis/L7/commit/b269222d3d45337026b783877473e8b5fa837f68))
|
||||
* **src:** lint err ([9b4216d](https://github.com/antvis/L7/commit/9b4216db5159c6a5f4745d07adc8788a690dec84))
|
||||
* **style:** update bug ([a0ad3c4](https://github.com/antvis/L7/commit/a0ad3c42fdfd803f4d7d0abe960eb092b2cc0475))
|
||||
* **text:** demo ([bae149e](https://github.com/antvis/L7/commit/bae149e91d3cd83e30671ca5afe13c2452a00379))
|
||||
* **text:** demo ([71fcf42](https://github.com/antvis/L7/commit/71fcf42ff86286e4817e97576a98383ace244ee6))
|
||||
* **text:** shader defines ([0d9beb8](https://github.com/antvis/L7/commit/0d9beb8fe677d37414ea9e8c225603a07163a2bf))
|
||||
* **text:** shader defines ([408ce92](https://github.com/antvis/L7/commit/408ce92bfdcfde317f3385a3de16fe67d12f2ba2))
|
||||
* bevel joint in dashline ([03ce45c](https://github.com/antvis/L7/commit/03ce45c7ca4e2bb7519b2a95982e8d61cea6c973))
|
||||
* bevel joint in dashline ([dd8fcfa](https://github.com/antvis/L7/commit/dd8fcfab7a8c778d57d4e62b233cf6c1e3bb17da))
|
||||
* meshline triangulation bug ([9d530cb](https://github.com/antvis/L7/commit/9d530cb27babb7766348506ac94e66d506104f2b))
|
||||
* meshline triangulation bug ([b34ba8b](https://github.com/antvis/L7/commit/b34ba8b6a79e9e374cc497c4f7bf728b08465e63))
|
||||
* update babel.config.js ([fc45854](https://github.com/antvis/L7/commit/fc458545aaae8b1e76c77c52af604b68a34de94f))
|
||||
* **Amap:** fix map ([2a84b54](https://github.com/antvis/L7/commit/2a84b5480eaf6998139736d2bae84b9729f315b5))
|
||||
* **Amap:** fix map ([64906f7](https://github.com/antvis/L7/commit/64906f7e9d9cb8658fdf11454a64f76564154ffd))
|
||||
* **Amap:** fix mapstyle ([83df28b](https://github.com/antvis/L7/commit/83df28b24603595fc6e8e7051c1559d858176ad7))
|
||||
* **Amap:** fix mapstyle ([9be646b](https://github.com/antvis/L7/commit/9be646b8ab5dd77d4c03520ac6a34186bc9df2cf))
|
||||
* **Amap:** setstyle ([6588614](https://github.com/antvis/L7/commit/6588614d7f5238f29dfb51d461d18035eb142999))
|
||||
* **Amap:** setstyle ([907ea56](https://github.com/antvis/L7/commit/907ea56ece29e90681e55e12f0afadccff129bcf))
|
||||
* **code:** shaderpass ([349e04a](https://github.com/antvis/L7/commit/349e04a20634c6ddfbec9236c895781e03f309a1))
|
||||
* **code:** shaderpass ([65df7ce](https://github.com/antvis/L7/commit/65df7ce180578e9e9ae89b3c7fd015445a938184))
|
||||
* **core:** delete composer.js ([b558371](https://github.com/antvis/L7/commit/b5583715e3d4f4b927b2cdf6543d854e019065d4))
|
||||
* **core:** delete composer.js ([1ca12ff](https://github.com/antvis/L7/commit/1ca12ff2f9ad2db4f186e56856f36b7581e4c33a))
|
||||
* **core:** file name ([d79d7a3](https://github.com/antvis/L7/commit/d79d7a3df4ba26a53306e121f0df2abb2c3c5fae))
|
||||
* **core:** file name ([cd65288](https://github.com/antvis/L7/commit/cd652880bfc822a937e55f06cfafc6edcddad3f8))
|
||||
* **core:** shaderpass ([9d936e7](https://github.com/antvis/L7/commit/9d936e7a3c8bc3de3218d9bff0be39ecf92322fc))
|
||||
* **core:** shaderpass ([07672fe](https://github.com/antvis/L7/commit/07672fe2195a99dc974fe9c5c87e0243426abb60))
|
||||
* **geojson:** geometry is null ([3fc7747](https://github.com/antvis/L7/commit/3fc7747a1685955904a39b64270052751964dcdc))
|
||||
* **geojson:** geometry is null ([9d8bfb1](https://github.com/antvis/L7/commit/9d8bfb159a3b3076edb7220858d2e9dd2857f4a4))
|
||||
* **gloal:** snap ([8e4b4d3](https://github.com/antvis/L7/commit/8e4b4d31ae9827f53f7351c5034449f16664246a))
|
||||
* **gloal:** snap ([14b261c](https://github.com/antvis/L7/commit/14b261c2bcb77795d82e27feaf4cc159dfd58591))
|
||||
* **heat-map:** 修复bbox计算逻辑 ([13583ea](https://github.com/antvis/L7/commit/13583eab7ae53765134a154d7002226b6d649504))
|
||||
* **heat-map:** 修复bbox计算逻辑 ([7d7cbda](https://github.com/antvis/L7/commit/7d7cbda53cb31c67e7397dccff7b91c77b4c1afc))
|
||||
* **heat-map:** 渲染逻辑 & bbox ([62932e0](https://github.com/antvis/L7/commit/62932e093ff180bdff69f185bc9ce8720d7702f2))
|
||||
* **heat-map:** 渲染逻辑 & bbox ([b0df153](https://github.com/antvis/L7/commit/b0df153670567e4ff055094bb46548db91f3ab2b))
|
||||
* **heatmap:** 解决颜色插值问题，优化渲染性能 ([507a353](https://github.com/antvis/L7/commit/507a3537f50f45936391d9e312982d852f0d45ef))
|
||||
* **heatmap:** 解决颜色插值问题，优化渲染性能 ([45db805](https://github.com/antvis/L7/commit/45db805a6889b4435d946ae0f35cb4d1e141f92f))
|
||||
* **heatmap:** performance ([724d73b](https://github.com/antvis/L7/commit/724d73bd8478ea312871578c24de801e6599cd05))
|
||||
* **heatmap:** performance ([5e2ebd3](https://github.com/antvis/L7/commit/5e2ebd3dadd76d675b2ff8bc8869fdc7a2a7b966))
|
||||
* **heatmap:** setValue ([208ed7f](https://github.com/antvis/L7/commit/208ed7f6136e748439a81e4a854e454e7c2f9dd2))
|
||||
* **heatmap:** setValue ([2da2c1f](https://github.com/antvis/L7/commit/2da2c1f2af500cc88b67104a3b841c73ce80955d))
|
||||
* **imagedata:** image from origin data ([3928fe5](https://github.com/antvis/L7/commit/3928fe5233bf120a1b85268018c7a35b4c15d707))
|
||||
* **imagedata:** image from origin data ([66f0e94](https://github.com/antvis/L7/commit/66f0e94fa47309ca3cb2373d52e3ef5257bea42d))
|
||||
* **l7:** update package ([ee54e52](https://github.com/antvis/L7/commit/ee54e529b2fe05fa0fb5dff196af363aa651f8ac))
|
||||
* **l7:** update package ([f669629](https://github.com/antvis/L7/commit/f66962976961ebaad3915875a5bb8b13092a65ee))
|
||||
* **layer:** conflict ([1f54741](https://github.com/antvis/L7/commit/1f5474180fcc6914d272a96db951820d0bcde606))
|
||||
* **layer:** conflict ([bcc7388](https://github.com/antvis/L7/commit/bcc7388df224a8b7d96b7085ba535592d1e9aecb))
|
||||
* **line:** default activeId ([fdec4b1](https://github.com/antvis/L7/commit/fdec4b1a49c4c7b49d410e7ed784c556b4a9ed19))
|
||||
* **line:** default activeId ([1491a7b](https://github.com/antvis/L7/commit/1491a7b0aa0c4bd7e89c2dd3bfe5580a3f9cf7b2))
|
||||
* **mapbox:** scale ([f2d9214](https://github.com/antvis/L7/commit/f2d9214e075bdfee1913bbc5c6758e3346edebc8))
|
||||
* **mapbox:** scale ([e0f7ff3](https://github.com/antvis/L7/commit/e0f7ff398c5d08be598c19c15ef3a1b999ee851a))
|
||||
* **package:** update version ([580b4ef](https://github.com/antvis/L7/commit/580b4ef39d93b43ab84c7f15e7f4426c2afa90f6))
|
||||
* **package:** update version ([7a55d07](https://github.com/antvis/L7/commit/7a55d07664c63b0a2cdd2706f13cbbc52d73a6fa))
|
||||
* **package:** update version ([92cb458](https://github.com/antvis/L7/commit/92cb458c9820cdd9a2de2e36ae79222be035d741))
|
||||
* **package:** update version ([335021d](https://github.com/antvis/L7/commit/335021de1b3142b3c3c8efe19030c365a245a3cf))
|
||||
* **pick:** event ([5d2b690](https://github.com/antvis/L7/commit/5d2b6902f64c04bd44e2ade8bf7244d8181bb19d))
|
||||
* **pick:** event ([952e03a](https://github.com/antvis/L7/commit/952e03aeb16de63a2562d5ee2ba8818d97da824b))
|
||||
* **raster:** layer clone typeArray ([7ca322d](https://github.com/antvis/L7/commit/7ca322d234a2b14f79dfeefb8bbb8ea2ef9d0ea1))
|
||||
* **raster:** layer clone typeArray ([29bcb5d](https://github.com/antvis/L7/commit/29bcb5d3003085d1035f0b334586bd44d063019b))
|
||||
* **renderTarget:** 修复了threeJS更新版本后引发的renderPass渲染问题 ([a2e00e3](https://github.com/antvis/L7/commit/a2e00e382b0dbb4b2708bc36cbf4e32ef74d18a2))
|
||||
* **renderTarget:** 修复了threeJS更新版本后引发的renderPass渲染问题 ([81e0f15](https://github.com/antvis/L7/commit/81e0f15873e7d3ae945b95248e2f184d6e9b3f67))
|
||||
* **scene:** event on map ([7b58386](https://github.com/antvis/L7/commit/7b583866fa80f283a736f9cabed232f46a683f06))
|
||||
* **scene:** event on map ([cf5444f](https://github.com/antvis/L7/commit/cf5444f0a6d5018a6a737bee14e7f46e43514440))
|
||||
* **scene:** render ([6ba7f07](https://github.com/antvis/L7/commit/6ba7f07c7d1d0f11d280dc5a049dca6e75f31ea2))
|
||||
* **scene:** render ([97af34f](https://github.com/antvis/L7/commit/97af34f5953d3b5b881c09358772fb84f88f543f))
|
||||
* **source:** cluster layer ([abc4bf1](https://github.com/antvis/L7/commit/abc4bf10906469d8bd3b64dd7aae322b7379a366))
|
||||
* **source:** cluster layer ([642a841](https://github.com/antvis/L7/commit/642a841f10aca0d4ba93481874a8240064465969))
|
||||
* **source:** geojson parser filter invalid ([d546527](https://github.com/antvis/L7/commit/d5465275a05f85f401d80a48f6fda26844c550e6))
|
||||
* **source:** geojson parser filter invalid ([2702f02](https://github.com/antvis/L7/commit/2702f028b05ed808b8050ca495eddcd0187569fc))
|
||||
* **source:** import supercluster ([e69f860](https://github.com/antvis/L7/commit/e69f8600450d255855ab55ee01fdf5ad3e64c6f2))
|
||||
* **source:** import supercluster ([b00bcaf](https://github.com/antvis/L7/commit/b00bcaf150b563d15af4d7f709a86dcb13909e1c))
|
||||
* **src:** require 引入方式切换成import ([988afc1](https://github.com/antvis/L7/commit/988afc18af4b0081c4ec1ce14bd2f9b18826bc67))
|
||||
* **src:** require 引入方式切换成import ([f652dca](https://github.com/antvis/L7/commit/f652dcae7a0dac2e08419ff6f2b8abcdda84e8b6))
|
||||
* **test:** compile threejs source ([bd53b2b](https://github.com/antvis/L7/commit/bd53b2bd89b57317a09637567fec443e651b8d84))
|
||||
* **test:** use the proper version of torchjs and babel, etc. ([758db46](https://github.com/antvis/L7/commit/758db46202136428803f24d40db2f43b996d3c98))
|
||||
* **text:** layer ([f527be2](https://github.com/antvis/L7/commit/f527be22cc4ac5e6e2dc715e4f666e1c0f72f954))
|
||||
* **text:** layer ([725c0cf](https://github.com/antvis/L7/commit/725c0cf232ee801fdd7c1f3ab6ff4227f5e6ab9e))
|
||||
* **threejs:** remove unuse import ([6c283ef](https://github.com/antvis/L7/commit/6c283ef1b0870cce29dc001cf2f57e648b25c75a))
|
||||
* **threejs:** remove unuse import ([a93d34b](https://github.com/antvis/L7/commit/a93d34b8215aadd331616ba289cc18e33c69ed13))
|
||||
* **tile:** vectorMap ([fe345e1](https://github.com/antvis/L7/commit/fe345e1579d6a8e31e7f935a91de908779cb354c))
|
||||
* **tile:** vectorMap ([0888f31](https://github.com/antvis/L7/commit/0888f31769c13aee825c0b97e38ac788608bbc10))
|
||||
* **tilelayer:** point pickup ([facce2a](https://github.com/antvis/L7/commit/facce2a255ca4b43ba120f5d58457c7f41b81044))
|
||||
* **tilelayer:** point pickup ([cef72bc](https://github.com/antvis/L7/commit/cef72bc497b50b0150cb0dd62002791fbaf284e7))
|
||||
* **transform:** stattistics ([3745540](https://github.com/antvis/L7/commit/374554037c764867d63f31bbbcb22ec522d14c51))
|
||||
* **transform:** stattistics ([49d8f60](https://github.com/antvis/L7/commit/49d8f603cd6d24f757c52db7d022a3f4bcd5d788))
|
||||
* **util:** extent ([e20c4ca](https://github.com/antvis/L7/commit/e20c4cabcf7f287e3ab63483f26aec9d0e9d8fff))
|
||||
* **util:** extent ([0ee3ce9](https://github.com/antvis/L7/commit/0ee3ce958d8a752aab95dc29518c6e20e096e720))
|
||||
* **util:** geo convert ([7c555c2](https://github.com/antvis/L7/commit/7c555c2cf11fdbe3355f7f5aa8ca506abdb540ff))
|
||||
* **util:** geo convert ([113aae9](https://github.com/antvis/L7/commit/113aae900b354447d20ad2e26a88f497671d5837))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **add l7 site:** add websites ([0463ff8](https://github.com/antvis/L7/commit/0463ff874eab1c484b593e8c02f73c85a02c000c))
|
||||
* **add point demo:** add demo ([cfecc93](https://github.com/antvis/L7/commit/cfecc930454c7b0a49884d383464c3d579ff8bf1))
|
||||
* **add point demo:** add demo ([90f6945](https://github.com/antvis/L7/commit/90f6945feb4818842c6231f5b5683db6cda15a73))
|
||||
* **attr:** add pattern ([a5767f2](https://github.com/antvis/L7/commit/a5767f25753b902c896799eb396da4594aec1522))
|
||||
* **attr:** add pattern ([1eef58a](https://github.com/antvis/L7/commit/1eef58a29a167c1045a7cf1c2cfee38d7b60cadc))
|
||||
* **chart:** add chart demo ([2a19b07](https://github.com/antvis/L7/commit/2a19b07c1bca7dfbf191618f15ab06a18c262148))
|
||||
* **chart:** add chart demo ([12cc906](https://github.com/antvis/L7/commit/12cc906139ae20583174ddf12c1c0cce96da44c4))
|
||||
* **component:** add layer control ([7f4646e](https://github.com/antvis/L7/commit/7f4646efd3b0004fde4e9f6860e618c7668af1a7))
|
||||
* **component:** add scale ,zoom, popup, marker map method ([a6baef4](https://github.com/antvis/L7/commit/a6baef4954c11d9c6582c27de2ba667f18538460))
|
||||
* **control:** add marker ([c83f1c3](https://github.com/antvis/L7/commit/c83f1c3d0b1f325c7328bf465164901fc5a84e90))
|
||||
* **control:** add marker ([39e870a](https://github.com/antvis/L7/commit/39e870af093cd67aa428dc44ac71e26f072c47e3))
|
||||
* **control:** add scale, layer.zoom control ([f6983ac](https://github.com/antvis/L7/commit/f6983ac907730a8421648a3e439830ec9bdf8904))
|
||||
* **control:** add scale, layer.zoom control ([1bd12f1](https://github.com/antvis/L7/commit/1bd12f15605b651073bd64a31e53d0c7428e34df))
|
||||
* **core:** add map method ([853c190](https://github.com/antvis/L7/commit/853c1901fbb8559a9d3bdb3631ec13a7dcaf0ea7))
|
||||
* **demo:** add point chart demo ([8c2e4a8](https://github.com/antvis/L7/commit/8c2e4a82bf7a49b29004d5e261d8e9c46cd0bd9d))
|
||||
* **demo:** add point chart demo ([fe5d8cd](https://github.com/antvis/L7/commit/fe5d8cdb324fbdcc28ac20d243b7a945e80e79e5))
|
||||
* **demo:** normalization demo ([09e2e22](https://github.com/antvis/L7/commit/09e2e22fcc54d9dd308ad0dba14d88e003ebe5d2))
|
||||
* **demo:** normalization demo ([67edabe](https://github.com/antvis/L7/commit/67edabeac7d1d97e6659f111108611d6d568c270))
|
||||
* **filter:** filter by pickids ([a0499b7](https://github.com/antvis/L7/commit/a0499b78d1c7e9ca9659ca71b468430fada8d31f))
|
||||
* **json:** point数据coord 设置支持数组 ([fb5be34](https://github.com/antvis/L7/commit/fb5be34932b1dac06c0476ec71b370d42b400d76))
|
||||
* **json:** point数据coord 设置支持数组 ([a4ad61f](https://github.com/antvis/L7/commit/a4ad61fac37955d43a1aa630c79fcb46a6c74a3e))
|
||||
* **layer:** 新增sourceplugin, attribute 增加类型判断 ([2570b8c](https://github.com/antvis/L7/commit/2570b8c242af29bae07640b1ec7eaadfb04ec9d6))
|
||||
* **layer:** add arc2d layer ([420459c](https://github.com/antvis/L7/commit/420459ce5aee91dc8d6f770a2a2078c7e5bca4bf))
|
||||
* **layer:** add imagelayer ([a995815](https://github.com/antvis/L7/commit/a995815284652ca5d6e013c547b617fa52039ddc))
|
||||
* **layer:** add point line polygon image layer ([54f28be](https://github.com/antvis/L7/commit/54f28be495af94a39313b7840c69725be16dc1e2))
|
||||
* **layer:** point layer ([3da72c8](https://github.com/antvis/L7/commit/3da72c83ff0577455a29ba98df4bb7cd8838328a))
|
||||
* **layer:** style 增加blending 配置项 ([bab462a](https://github.com/antvis/L7/commit/bab462ac40a6c3e188743eae198481db65435b26))
|
||||
* **layer:** style 增加blending 配置项 ([53f7268](https://github.com/antvis/L7/commit/53f726872a37457bfa75d8fab1d840e69f910373))
|
||||
* **layers:** add arclayer ([7e499fd](https://github.com/antvis/L7/commit/7e499fdc877d9715000c138a5d3505924ebd083e))
|
||||
* **layers:** add girdheatmap add raster imagelayer ([ddd1d0e](https://github.com/antvis/L7/commit/ddd1d0ef38cc44767d2ec5329eb844c31d847938))
|
||||
* **layers:** add heatmap 3d layer ([cd8409e](https://github.com/antvis/L7/commit/cd8409e4cb234f850f2d46dd68b35f4848daf74b))
|
||||
* **layers:** add polygon3d , pointimagelayer ([75f2eaa](https://github.com/antvis/L7/commit/75f2eaa083064ff21c8bbe13f5f6770682c23241))
|
||||
* **layers:** add polygon3d , pointimagelayer ([bda6b6c](https://github.com/antvis/L7/commit/bda6b6cfb06193f6ae83e505a9c8667811d80a2f))
|
||||
* **line:** greatCircle ([4977426](https://github.com/antvis/L7/commit/49774266456bf4845785247f2a37ad1b66518e2d))
|
||||
* **line:** greatCircle ([6188d07](https://github.com/antvis/L7/commit/6188d0783a10869e61cc5949407106965f73d0e7))
|
||||
* **map:** adjust Scene API, use @antv/l7-maps instead ([77b8f21](https://github.com/antvis/L7/commit/77b8f21b0bcf8b06e88d8e0bef213935bf32b957)), closes [#86](https://github.com/antvis/L7/issues/86)
|
||||
* **multi-pass:** support TAA(Temporal Anti-Aliasing) ([2cf0824](https://github.com/antvis/L7/commit/2cf082439ad04eb84b96b2922e45082476452aec))
|
||||
* **picking:** support advanced picking API: `layer.pick({x, y})` ([3e22f21](https://github.com/antvis/L7/commit/3e22f21a5c658e4ade31c0506bd77ae787ec2fcc))
|
||||
* **picking:** support PixelPickingPass and highlight the picked feature ([ff0ffa0](https://github.com/antvis/L7/commit/ff0ffa057e2f533dc6ac92f40d3892f9dd57fafb))
|
||||
* **point image:** add point image ([89b2513](https://github.com/antvis/L7/commit/89b25133a17f308c3e884c49baebcd3cc7a9470a))
|
||||
* **point image:** add point image ([ae4a594](https://github.com/antvis/L7/commit/ae4a594a9383443d0ade5eb84105f3c8f2c6c47c))
|
||||
* **point-layer:** use 2d sdf functions ([6ec7039](https://github.com/antvis/L7/commit/6ec70396b9f0358766af61663b76aaf987f4e3c7))
|
||||
* **point-layer:** use 2d sdf functions ([ea548ed](https://github.com/antvis/L7/commit/ea548edaa648a7eab4c67ced96f54b270c9b6368))
|
||||
* **post-processing:** add some post processing effects ([1d8e15c](https://github.com/antvis/L7/commit/1d8e15cec11abc62785bc68c8281550732550839))
|
||||
* **scene:** scene service inTransientScope ([ccf1ff4](https://github.com/antvis/L7/commit/ccf1ff464e1b220650e61c0999846725b075ef3a))
|
||||
* **schema-validation:** support validation for layer's options ([9c5766d](https://github.com/antvis/L7/commit/9c5766d0e37958d67f7072d465f51e2aa3d53939))
|
||||
* **text:** text add textAllowOverlap propertry ([4dcc177](https://github.com/antvis/L7/commit/4dcc17794112c914eb4233b365b9f7e5c316da26))
|
||||
* 增加对于点要素的自动标注 ([86d89dd](https://github.com/antvis/L7/commit/86d89dd5bff0d83a2b2c4acfb14853e549148310))
|
||||
* 增加对于点要素的自动标注 ([8feefb6](https://github.com/antvis/L7/commit/8feefb6d7580674c41948e0c4279e178d127b7d6))
|
||||
* **polygon-layer:** 支持多个平行光源配置 ([63e70a3](https://github.com/antvis/L7/commit/63e70a36796667c90987e8f522a125f32e5071d0))
|
||||
* **polygon-layer:** 支持多个平行光源配置 ([32cdcf8](https://github.com/antvis/L7/commit/32cdcf83f37dbe532336d8393f95d98aa94b3d5b))
|
||||
* **source:** reuse tileSource ([a9d2c27](https://github.com/antvis/L7/commit/a9d2c276d74166d8dece3e7f45f6a7d3e4d009d2))
|
||||
* **source:** reuse tileSource ([4ce9d60](https://github.com/antvis/L7/commit/4ce9d602569850e26ba550f0cf8b7753abf054c6))
|
||||
* **worker:** worker Source ([40947c0](https://github.com/antvis/L7/commit/40947c04ec85610bb1694f9a203ad174139fb2f3))
|
||||
* **worker:** worker Source ([1a5faae](https://github.com/antvis/L7/commit/1a5faaea45b9c7dbdb3da5d4d86da9709e8a397d))
|
||||
* **worker:** worker Source ([3bbdb5e](https://github.com/antvis/L7/commit/3bbdb5ec8870244f4ab0dc7cadbc49f7055a2256))
|
||||
* **worker:** worker Source ([d7d66a2](https://github.com/antvis/L7/commit/d7d66a26f636e9cf29e314b8e76bf876eae2df00))
|
||||
* lighting ([4d19584](https://github.com/antvis/L7/commit/4d1958467e0d112ec0bd1d5b2499294c909bf337))
|
||||
* lighting ([f8269ee](https://github.com/antvis/L7/commit/f8269ee35bd1a50bb150366cecdad5958919013d))
|
||||
* **hexagon:** hexagon heatmap ([00d58a0](https://github.com/antvis/L7/commit/00d58a03c5dfa92c5812c2b94fca4831694ceff6))
|
||||
* **hexagon:** hexagon heatmap ([f6847e1](https://github.com/antvis/L7/commit/f6847e15d644c84448dcb49ce3dc63f3ee0819fb))
|
||||
* **l7:** add shader module ([8a45456](https://github.com/antvis/L7/commit/8a454561ad1241f6b5bfea72d0c5967b2464c284))
|
||||
* **l7:** add shader module ([a6d4774](https://github.com/antvis/L7/commit/a6d477480444ea7e0c24456b31fc3b920e05506e))
|
||||
* **l7:** feat heatmap layer ([109f3f1](https://github.com/antvis/L7/commit/109f3f12d0913442f676691317b827b67b948d29))
|
||||
* **l7:** feat heatmap layer ([eec6a12](https://github.com/antvis/L7/commit/eec6a121ac4c1a13f3442d6285533395a70bbcf6))
|
||||
* **layer:** add controller ([7d33a17](https://github.com/antvis/L7/commit/7d33a17f4d5a984a740f1c8d3b4a0a604a1817e7))
|
||||
* **layer:** add controller ([d562f86](https://github.com/antvis/L7/commit/d562f86251869776761819ef85656bf74654bd02))
|
||||
* **layer:** add lengendcdg method ([c8ac525](https://github.com/antvis/L7/commit/c8ac525c020db01be12e9d182e82226aa809f45a))
|
||||
* **point-layer:** optimize 2d circle ([ee5611d](https://github.com/antvis/L7/commit/ee5611d892d9875b3d592cdfdd8c49296ab2a03b))
|
||||
* **point-layer:** optimize 2d circle ([e8704a1](https://github.com/antvis/L7/commit/e8704a1e7e305a5952bb9ba62012fa8a1708c6f9))
|
||||
* **point-layer:** vertex compression ([5e0bac0](https://github.com/antvis/L7/commit/5e0bac0fe410eb589ecfade7e1f09ebfbf5d18a2))
|
||||
* **point-layer:** vertex compression ([ef2a9dd](https://github.com/antvis/L7/commit/ef2a9dd95746fa92b2459736cec6824cbea17c37))
|
||||
* support bevel joint, dashline & anti-alias ([c0ea754](https://github.com/antvis/L7/commit/c0ea7545221a5aaf57742be52449cbe5a390f1c0))
|
||||
* support bevel joint, dashline & anti-alias ([393c5d0](https://github.com/antvis/L7/commit/393c5d0c5aeb4665ef2e78ad0733580bfd4ee33e))
|
||||
* **interaction:** add hash ([17d8483](https://github.com/antvis/L7/commit/17d8483a38a6e7acbdc98fbcacaaebfdee81a090))
|
||||
* **interaction:** add hash ([a290efb](https://github.com/antvis/L7/commit/a290efb7875cf2d8a122e10d9c4d8d8fa3f6efbd))
|
||||
* **layer:** add lengendcdg method ([14ce71d](https://github.com/antvis/L7/commit/14ce71d7bb9143892d42874bba890373127e9f4f))
|
||||
* **layer:** add repaint method ([48de69f](https://github.com/antvis/L7/commit/48de69f7d9d49ccd5b10f9652fc3a949d705bee0))
|
||||
* **layer:** add repaint method ([3d2bde5](https://github.com/antvis/L7/commit/3d2bde558e4bb305408ecf21fbde8008219821c0))
|
||||
* **layer:** add tile ([28bd807](https://github.com/antvis/L7/commit/28bd807916dc57100f87aa0d5bad84d0c0601acf))
|
||||
* **layer:** add tile ([181d7bc](https://github.com/antvis/L7/commit/181d7bc42f6a0be656669113486cb54d8c388d94))
|
||||
* **map:** add mapbox ([418b3bc](https://github.com/antvis/L7/commit/418b3bcbc973900406f1a1093fc043f33b00c3a8))
|
||||
* **map:** add mapbox ([8bb5bc6](https://github.com/antvis/L7/commit/8bb5bc66470ee527ba6d742b118054302beeaa72))
|
||||
* **mapbox:** add mapbox ([ef30053](https://github.com/antvis/L7/commit/ef30053ff3824c07d0c4d6879d3af2de5cc7f9cf))
|
||||
* **mapbox:** add mapbox ([e856519](https://github.com/antvis/L7/commit/e856519fa71e7662de5a6aed41c1ea68feef6d75))
|
||||
* **package:** update version ([25f9af3](https://github.com/antvis/L7/commit/25f9af30bba55ebb4e5d1b5d8d6ad0ae495c8906))
|
||||
* **package:** update version ([eda3042](https://github.com/antvis/L7/commit/eda3042b3f8c134791f84be75997055c8df5684b))
|
||||
* **pick:** update pick method ([2b21158](https://github.com/antvis/L7/commit/2b21158568295b629e7bbb516507c7b1ac11ec22))
|
||||
* **pick:** update pick method ([a1c534d](https://github.com/antvis/L7/commit/a1c534da698f615de54435e1b53c82629b432226))
|
||||
* **scene:** 按需进行渲染刷新 ([6b2d9b7](https://github.com/antvis/L7/commit/6b2d9b76caf40f276017afc2f3751ec76a68b7e5))
|
||||
* **scene:** 按需进行渲染刷新 ([691f223](https://github.com/antvis/L7/commit/691f2237d0ca6d6e45a708e3eaa25b2a6a3eb0b9))
|
||||
* **scene:** 实例化支持传入地图实例 ([e60e51c](https://github.com/antvis/L7/commit/e60e51c12d294a475a798d6b83957e7b76549711))
|
||||
* **scene:** 实例化支持传入地图实例 ([f0db13e](https://github.com/antvis/L7/commit/f0db13e711eed9657faeb68e4b0fd1e1a32b80fc))
|
||||
* **source:** hexagon ([3ab8aac](https://github.com/antvis/L7/commit/3ab8aac11a17ce93e74add1b066a8d50e93dd86f))
|
||||
* **source:** hexagon ([7d73d7f](https://github.com/antvis/L7/commit/7d73d7f34843d2eed8c916ed9b5350883c0ed491))
|
||||
* **src:** threejs render ([e75f215](https://github.com/antvis/L7/commit/e75f215625c0cc56c531254a8082d39690ea693f))
|
||||
* **tile:** add image tile layer ([f4f63c4](https://github.com/antvis/L7/commit/f4f63c48b1f8cc15d502bf1cda8ce12012b995bc))
|
||||
* **tile:** add image tile layer ([ab11b98](https://github.com/antvis/L7/commit/ab11b98e54262a6ab1e6e7abe05172d04ed07e83))
|
||||
* **tile:** add tile ([5e494fe](https://github.com/antvis/L7/commit/5e494fe7529252a256d147014257cafcc1c1bd78))
|
||||
* **tile:** add tile ([6dd6c5d](https://github.com/antvis/L7/commit/6dd6c5dd018551c67a42c1e1e28373c55ede58e9))
|
||||
* **tile:** fix point tile layer ([f0a1099](https://github.com/antvis/L7/commit/f0a10992ddcbd9639640d21617020df009503f18))
|
||||
* **tile:** fix point tile layer ([b6d2109](https://github.com/antvis/L7/commit/b6d2109a68a3f6d0c35963368bad3e0f94388802))
|
||||
* **tilelayer:** add mask ([e018661](https://github.com/antvis/L7/commit/e018661b7ad8acbfdcd01f85ef15d217f8d3b277))
|
||||
* **tilelayer:** add mask ([fb26f6e](https://github.com/antvis/L7/commit/fb26f6e5e89b598629aaf206d3d3f444b645150b))
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **shader:** 优化线动画效果 ([9b2a4ca](https://github.com/antvis/L7/commit/9b2a4ca26cd58791a667e373a2bd04d63dc1570c))
|
||||
* **shader:** 优化线动画效果 ([94b7630](https://github.com/antvis/L7/commit/94b76304ef6b8989ccbdd955b4d24a1c09105b36))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 2019.11.22
|
||||
|
||||
### L7 2.0 beta
|
||||
|
||||
- 新架构
|
||||
- 多地图引擎
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
94
README.md
94
README.md
|
|
@ -4,36 +4,92 @@
|
|||
|
||||
Large-scale WebGL-powered Geospatial data visualization analysis framework.
|
||||
|
||||
## l7 visualization demos
|
||||
[中文 README](./README.zh-CN.md)
|
||||
|
||||
Powered by WebGL, the rendering technology of L7 supports fast and efficient rendering of big data, 2D/3D rendering, possible through calculation and analysis of spatial data by GPU Parallel Compu-ting.
|
||||
|
||||
L7 focuses on geographic data expressiveness，interaction and design of geographic visualization layers. The basemaps on the platform are powered by third-party services
|
||||
|
||||
|
||||
## 🌄 l7 visualization demos
|
||||
|
||||
|
||||
|
||||
### Installation
|
||||
|
||||
## 🌟 Highlight features of L7 2.0
|
||||
|
||||
- 🌏 Data-driven Visualization
|
||||
|
||||
Layer visualization API design base Semiology of Graphics.
|
||||
|
||||
It supports rich map visualization types for a better insight on data.
|
||||
|
||||
- 🌏 High performance rendering with 2D/3D effect
|
||||
|
||||
Real-time and dynamic rendering with millions of spatial data.
|
||||
|
||||
- 🌏 Simple and flexible data format
|
||||
|
||||
L7 supports a wide variety of data formats including CSV, JSON, geojson, among others, eliminating the need to run conversions ahead of time.
|
||||
|
||||
- 🌏 Multi-basemap
|
||||
|
||||
For global users, Mapbox is easy to be embedded by a simple line of code.
|
||||
|
||||
## Getting Started
|
||||
|
||||
### 📦 Installation
|
||||
|
||||
```
|
||||
npm install @antv/l7@beta
|
||||
```
|
||||
|
||||
## Development
|
||||
### Init Map by L7 scene
|
||||
|
||||
```javascript
|
||||
import { Scene } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
})
|
||||
|
||||
```
|
||||
### Add Layer
|
||||
|
||||
``` javascript
|
||||
|
||||
import { PointLayer } from '@antv/l7';
|
||||
const pointLayer = new PointLayer()
|
||||
.source(data)
|
||||
.shape('circle')
|
||||
.size('mag', [ 1, 25 ])
|
||||
.color('mag',['#5B8FF9', '#5CCEA1'])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
使用 Yarn Workspace 完成依赖安装以及各包之间的 link 工作：
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
开发模式：
|
||||
```bash
|
||||
yarn watch
|
||||
```
|
||||
## :memo: Documentation
|
||||
|
||||
运行 Demo，基于 Storybook：
|
||||
```bash
|
||||
yarn storybook
|
||||
```
|
||||
- [Getting started with L7](https://l7.antv.vision/en/docs/api/l7)
|
||||
- [Tutorials](https://l7.antv.vision/en/docs/tutorial/quickstart)
|
||||
- [API documentation](https://l7.antv.vision/en/docs/api/l7)
|
||||
- [Examples](https://l7.antv.vision/en/examples/gallery/basic)
|
||||
|
||||
## view doc example
|
||||
## 🔨 Development
|
||||
|
||||
```bash
|
||||
yarn start
|
||||
```
|
||||
visit http://localhost:8000/
|
||||
We wrote a [contribution guide](./.github/CONTRIBUTING.md) to help you get started.
|
||||
|
||||
## ✅ License
|
||||
|
||||
[MIT license](./LICENSE).
|
||||
|
|
|
|||
|
|
@ -67,53 +67,6 @@ npm install @antv/l7@beta
|
|||
|
||||
|
||||
|
||||
## Development
|
||||
## 向 L7 贡献代码
|
||||
|
||||
使用 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
|
||||
```
|
||||
您可以参考 [CONTRIBUTING.md](./.github/CONTRIBUTING.md) 向 L7 贡献代码。
|
||||
|
|
@ -60,6 +60,7 @@ module.exports = api => {
|
|||
'@babel/preset-typescript',
|
||||
],
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-object-rest-spread',
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
'@babel/plugin-proposal-nullish-coalescing-operator',
|
||||
[
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [ 0, 23.107329 ],
|
||||
zoom: 0
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 0, 23.107329 ],
|
||||
zoom: 0
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -12,6 +12,36 @@ Invalid configuration object. MyPlugin has been initialised using a configuratio
|
|||
和 Webpack 一样，我们也选择 [ajv](https://github.com/epoberezkin/ajv) 作为 JSON Schema 校验器。
|
||||
目前我们只在 Layer 初始阶段进行校验，一旦校验失败会中断后续初始化插件的处理，并在控制台给出校验失败信息。后续需要在属性更新时同样进行校验。
|
||||
|
||||
## 地图参数校验
|
||||
|
||||
当用户传入地图参数时，需要进行校验：
|
||||
```javascript
|
||||
// l7-core/services/config/mapConfigSchema.ts
|
||||
|
||||
export default {
|
||||
properties: {
|
||||
// 地图缩放等级
|
||||
zoom: {
|
||||
type: 'number',
|
||||
minimum: 0,
|
||||
maximum: 20,
|
||||
},
|
||||
// 地图中心点
|
||||
center: {
|
||||
item: {
|
||||
type: 'number',
|
||||
},
|
||||
maxItems: 2,
|
||||
minItems: 2,
|
||||
},
|
||||
// 仰角
|
||||
pitch: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Layer 基类配置项 Schema
|
||||
|
||||
目前在基类中我们声明了如下属性及其对应的校验规则：
|
||||
|
|
|
|||
|
|
@ -171,6 +171,7 @@ protected getConfigSchema() {
|
|||
通过 `mapService` 引用。
|
||||
|
||||
常用地图状态获取方法如下：
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 说明 |
|
||||
| -------- | ------------- | --------- | --------- |
|
||||
| getSize | 无 | `[number, number]` | 获取地图尺寸（像素单位） |
|
||||
|
|
@ -196,7 +197,6 @@ protected getConfigSchema() {
|
|||
通过 `rendererService` 引用。
|
||||
|
||||
|
||||
|
||||
### 图层管理服务
|
||||
|
||||
开发者不需要显式调用。用于管理场景中所有的图层，负责图层的创建、销毁。
|
||||
|
|
|
|||
|
|
@ -39,12 +39,13 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
|
|||
// 创建场景
|
||||
const scene = new L7.Scene({
|
||||
id: 'map', // 容器 id
|
||||
type: 'mapbox', // 高德 amap 或者 mapbox
|
||||
style: 'mapbox://styles/mapbox/streets-v9',
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
map: new L7.Mapbox({ // 高德地图为 L7.AMap
|
||||
style: 'mapbox://styles/mapbox/streets-v9',
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
}),
|
||||
});
|
||||
|
||||
// 创建图层
|
||||
|
|
@ -89,16 +90,17 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
|
|||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn` 安装 `@antv/l7`：
|
||||
首先通过 `npm/yarn` 安装 `@antv/l7@beta`：
|
||||
```bash
|
||||
npm install --save @antv/l7
|
||||
npm install --save @antv/l7@beta
|
||||
// or
|
||||
yarn add @antv/l7
|
||||
yarn add @antv/l7@beta
|
||||
```
|
||||
|
||||
然后就可以使用其中包含的场景和各类图层：
|
||||
```typescript
|
||||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
import { AMap } from '@antv/l7-maps';
|
||||
|
||||
(async function() {
|
||||
// 获取数据
|
||||
|
|
@ -109,13 +111,14 @@ import { Scene, PolygonLayer } from '@antv/l7';
|
|||
|
||||
// 创建场景
|
||||
const scene = new Scene({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
type: 'amap',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
map: new AMap({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
}),
|
||||
});
|
||||
|
||||
// 创建图层
|
||||
|
|
@ -151,9 +154,10 @@ L7 目前的文档都通过这种方式使用，可以参考项目中的 stories
|
|||
React 组件待开发，目前可以暂时以 Submodule 方式使用：
|
||||
```tsx
|
||||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
import { AMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
|
||||
export default class AMap extends React.Component {
|
||||
export default class AMapExample extends React.Component {
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
|
|
@ -165,13 +169,14 @@ export default class AMap extends React.Component {
|
|||
'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
|
||||
map: new AMap({
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
zoom: 3,
|
||||
token: 'pg.xxx', // 高德或者 Mapbox 的 token
|
||||
}),
|
||||
});
|
||||
const layer = new PolygonLayer({});
|
||||
|
||||
|
|
|
|||
|
|
@ -344,9 +344,9 @@ yarn build
|
|||
}
|
||||
```
|
||||
|
||||
### [WIP] 异步加载 Mapbox
|
||||
### 按需引入地图依赖
|
||||
|
||||
以 L7 Bundler 方式使用时，由于需要在运行时根据用户配置项选择地图底图，会导致构建时需要将全部地图依赖引入，无法进行 TreeShaking。
|
||||
目前高德地图使用运行时异步加载方式引入，不会导致该问题，但 Mapbox 同样使用 Bundler，对于高德用户就多余了。
|
||||
|
||||
一个可能的方案是对于 Mapbox 使用 CodeSplitting。在容器首次获取 Mapbox 地图服务时异步加载并缓存。
|
||||
[ISSUE](https://github.com/antvis/L7/issues/86)
|
||||
|
|
|
|||
|
|
@ -136,11 +136,12 @@ void main() {
|
|||
// 场景定义
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'mapbox',
|
||||
style: 'mapbox://styles/mapbox/streets-v9',
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
zoom: 3,
|
||||
map: new Mapbox({
|
||||
style: 'mapbox://styles/mapbox/streets-v9',
|
||||
center: [110.19382669582967, 50.258134],
|
||||
pitch: 0,
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
// 注册自定义后处理效果
|
||||
scene.registerPostProcessingPass(
|
||||
|
|
@ -154,7 +155,6 @@ scene.registerPostProcessingPass(
|
|||
和 L7 内置的后处理效果使用方法一致，通过效果名引用，同时传入定义参数即可：
|
||||
```typescript
|
||||
const layer = new PolygonLayer({
|
||||
enableMultiPassRenderer: true,
|
||||
enablePicking: true,
|
||||
enableHighlight: true,
|
||||
passes: [
|
||||
|
|
|
|||
|
|
@ -2,44 +2,52 @@
|
|||
title: Control
|
||||
order: 3
|
||||
---
|
||||
# control
|
||||
|
||||
地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
|
||||
|
||||
|
||||
## 构造函数
|
||||
L7 目前支持Control
|
||||
|
||||
```javascript
|
||||
const baseControl = new L7.Control.Base(option);
|
||||
```
|
||||
- Zoom 放大缩小
|
||||
- Scale 比例尺
|
||||
- Layers 图层列表
|
||||
|
||||
|
||||
## 构造函数
|
||||
|
||||
|
||||
#### option
|
||||
position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
|
||||
|
||||
position: `string` 控件位置支持是个方位
|
||||
|
||||
- bottomright
|
||||
- topright
|
||||
- bottomleft,
|
||||
- topleft`
|
||||
|
||||
|
||||
#### scene 内置地图组件
|
||||
zoom 地图放大缩小 默认添加<br />Scale 地图比例尺 默认添加<br />attribution 地图数据属性 默认添加<br />layer 图层列表
|
||||
|
||||
**scene配置项设置控件添加状态**
|
||||
### 组件介绍
|
||||
|
||||
```
|
||||
import { Scale Layers, Zoom } from '@antv/l7';
|
||||
|
||||
```javascript
|
||||
scene = new L7.scene({
|
||||
zoomControl: true,
|
||||
scaleControl: true,
|
||||
attributionControl: true
|
||||
})
|
||||
```
|
||||
|
||||
####
|
||||
|
||||
|
||||
|
||||
#### Zoom
|
||||
|
||||
放大缩小组件 默认 左上角
|
||||
|
||||
```javascript
|
||||
new L7.Control.Zoom({
|
||||
const zoomControl = new Zoom({
|
||||
position: 'topleft'
|
||||
}).addTo(scene);
|
||||
})
|
||||
|
||||
scene.addControl(zoomControl);
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -47,50 +55,34 @@ scene = new L7.scene({
|
|||
比例尺组件默认左下角
|
||||
|
||||
```javascript
|
||||
new L7.Control.Scale({
|
||||
position: 'bottomleft'
|
||||
}).addTo(scene);
|
||||
const zoomControl = new Zoom({
|
||||
position: 'topleft'
|
||||
})
|
||||
|
||||
scene.addControl(zoomControl);
|
||||
|
||||
```
|
||||
|
||||
|
||||
#### attribution
|
||||
默认右下角
|
||||
#### Layers
|
||||
图层列表目前支持可视化的图层控制
|
||||
|
||||
```javascript
|
||||
new L7.Control.Attribution({
|
||||
position: 'bottomleft'
|
||||
}).addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
#### layer
|
||||
图层列表目前只支持可视化overlayers 图层控制
|
||||
|
||||
```javascript
|
||||
var overlayers = {
|
||||
"围栏填充": layer,
|
||||
"围栏边界": layer2
|
||||
const overlayers = {
|
||||
"点图层": layer,
|
||||
|
||||
};
|
||||
new L7.Control.Layers({
|
||||
overlayers: overlayers
|
||||
}).addTo(scene);
|
||||
const layersControl = new Layers({
|
||||
overlayers
|
||||
});
|
||||
scene.addControl(layersControl);
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 方法
|
||||
|
||||
#### onAdd
|
||||
组件添加到地图Scene时调用，自定义组件时需要实现此方法
|
||||
|
||||
|
||||
#### addTo
|
||||
添加到地图scene
|
||||
|
||||
```javascript
|
||||
control.addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
#### setPosition
|
||||
设置组件位置
|
||||
|
||||
|
|
@ -106,32 +98,3 @@ control.setPosition('bottomright');
|
|||
control.remove();
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 示例代码
|
||||
|
||||
|
||||
#### 自定义图例控件
|
||||
[源码](https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html)
|
||||
|
||||
```javascript
|
||||
var legend = new L7.Control.Base({
|
||||
position: 'bottomright'
|
||||
});
|
||||
legend.onAdd = function() {
|
||||
var el = document.createElement('div');
|
||||
el.className = 'infolegend legend';
|
||||
var grades = [0, 8, 15, 30, 65, 120];
|
||||
for (var i = 0; i < grades.length; i++) {
|
||||
el.innerHTML += '<i style="background:' + colors[i] + '"></i> ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
|
||||
}
|
||||
return el;
|
||||
};
|
||||
legend.addTo(scene);
|
||||
|
||||
```
|
||||
|
||||
##
|
||||
|
||||
## FAQ
|
||||
|
||||
|
|
|
|||
|
|
@ -7,17 +7,26 @@ Marker 地图标注 目前只支持2D dom标注
|
|||
|
||||
|
||||
## 构造函数
|
||||
Marker<br />`const Marker = new L7.Marker(option)`
|
||||
Marker
|
||||
|
||||
`const Marker = new L7.Marker(option)`
|
||||
|
||||
|
||||
|
||||
|
||||
#### option
|
||||
|
||||
- color `string `  设置默认marker的颜色
|
||||
- color `string ` 设置默认marker的颜色
|
||||
- element `Dom|string` 自定义marker Dom节点，可以是dom实例，也可以是dom id
|
||||
- anchor `string` 锚点位置 支持 center, top, top-left, top-right, bottom, bottom-left,bottom- right,left, right
|
||||
- offset `Array` 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
|
||||
|
||||
|
||||
### 添加到Scene
|
||||
```javascript
|
||||
scene.addMarker(marker);
|
||||
```
|
||||
|
||||
## 方法
|
||||
|
||||
#### setLnglat
|
||||
|
|
@ -77,7 +86,6 @@ new L7.Marker({
|
|||
element: el
|
||||
}).setLnglat(item.coordinates)
|
||||
.setPopup(popup)
|
||||
.addTo(scene);
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ order: 1
|
|||
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
目前 1.x 版本最新版本为 1.4.2 版本
|
||||
目前 1.x 版本最新版本为 
|
||||
|
||||
#### CDN 在线使用连接为
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.2/build/L7-min.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.4/build/L7-min.js"></script>
|
||||
```
|
||||
|
||||
### npm 安装使用
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ order: 1
|
|||
|
||||
## [旧版地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
|
||||
|
||||
目前 1.x 版本最新版本为 1.4.2 版本
|
||||
目前 1.x 版本最新版本为 
|
||||
|
||||
#### CDN 在线使用连接为
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.2/build/L7-min.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.4/build/L7-min.js"></script>
|
||||
```
|
||||
|
||||
### npm 安装使用
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ new Layer(option)
|
|||
|
||||
## 鼠标事件
|
||||
|
||||
beta版当前不支持，正式版会支持
|
||||
⚠️ beta版当前不支持，正式版会支持
|
||||
|
||||
```javascript
|
||||
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
|
||||
|
|
@ -319,4 +319,4 @@ layer.hide();
|
|||
```javascript
|
||||
layer.fitBounds()
|
||||
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ new Layer(option)
|
|||
|
||||
## 鼠标事件
|
||||
|
||||
beta版当前不支持，正式版会支持
|
||||
⚠️ beta版当前不支持，正式版会支持
|
||||
|
||||
```javascript
|
||||
layer.on('click', (ev)=>{}); // 鼠标左键点击图层事件
|
||||
|
|
@ -319,4 +319,4 @@ layer.hide();
|
|||
```javascript
|
||||
layer.fitBounds()
|
||||
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,19 +10,24 @@ order: 2
|
|||
```javascript
|
||||
// Module 引用
|
||||
import { Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
pitch: 45,
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
pitch: 45,
|
||||
}),
|
||||
});
|
||||
|
||||
// CDN 使用方法
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
pitch: 45,
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
pitch: 45,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -43,20 +48,21 @@ const scene = new L7.Scene({
|
|||
可以通过scene map 属性获取 map实例
|
||||
|
||||
```javascript
|
||||
const map = scene.map
|
||||
const map = scene.map
|
||||
|
||||
```
|
||||
为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
|
||||
为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
|
||||
|
||||
示例代码
|
||||
|
||||
```javascript
|
||||
import { Scene } from '@antv/l7';
|
||||
const scene =new L7.Scene({
|
||||
id:'map',
|
||||
mapStyle:'dark',
|
||||
center:[ 110.770672, 34.159869 ],
|
||||
pitch:45
|
||||
id: 'map',
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
pitch: 45,
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
|
|
@ -159,6 +165,31 @@ scene.getPitch();
|
|||
|
||||
return {number} pitch
|
||||
|
||||
### setMapStyle
|
||||
|
||||
参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
|
||||
|
||||
L7 内置了三种地图样式，AMAP 和MapBox都适用
|
||||
|
||||
- light
|
||||
- dark
|
||||
- normal
|
||||
|
||||
设置地图底图样式的方法
|
||||
|
||||
```javascript
|
||||
// 快捷名称设置
|
||||
|
||||
scene.setMapStyle('light');
|
||||
|
||||
// mapbox 主题设置
|
||||
scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
|
||||
|
||||
// AMap
|
||||
scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
|
||||
|
||||
```
|
||||
|
||||
### setCenter()
|
||||
设置地图中心点坐标
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,29 @@ order: 2
|
|||
|
||||
## Scene
|
||||
|
||||
L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理
|
||||
```javascript
|
||||
// Module 引用
|
||||
import { Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
pitch: 45,
|
||||
}),
|
||||
});
|
||||
|
||||
// CDN 使用方法
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
pitch: 45,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Map
|
||||
|
|
@ -26,7 +48,7 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
|
|||
可以通过scene map 属性获取 map实例
|
||||
|
||||
```javascript
|
||||
const map = scene.map
|
||||
const map = scene.map
|
||||
|
||||
```
|
||||
为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
|
||||
|
|
@ -34,24 +56,17 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
|
|||
示例代码
|
||||
|
||||
```javascript
|
||||
// Module 引用
|
||||
import { Scene } from '@antv/l7';
|
||||
const scene = new Scene({
|
||||
const scene =new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
pitch: 45,
|
||||
});
|
||||
|
||||
// CDN 使用方法
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
mapStyle: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
pitch: 45,
|
||||
});
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 110.770672, 34.159869 ],
|
||||
pitch: 45,
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
### 构造函数
|
||||
|
||||
**Scene**
|
||||
|
|
@ -150,6 +165,31 @@ scene.getPitch();
|
|||
|
||||
return {number} pitch
|
||||
|
||||
### setMapStyle
|
||||
|
||||
参数：`style` {string} 地图样式 具体样式格式和各底图设置方法一致
|
||||
|
||||
L7 内置了三种地图样式，AMAP 和MapBox都适用
|
||||
|
||||
- light
|
||||
- dark
|
||||
- normal
|
||||
|
||||
设置地图底图样式的方法
|
||||
|
||||
```javascript
|
||||
// 快捷名称设置
|
||||
|
||||
scene.setMapStyle('light');
|
||||
|
||||
// mapbox 主题设置
|
||||
scene.setMapStyle('mapbox://styles/mapbox/streets-v11')
|
||||
|
||||
// AMap
|
||||
scene.setMapStyle('amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true')
|
||||
|
||||
```
|
||||
|
||||
### setCenter()
|
||||
设置地图中心点坐标
|
||||
|
||||
|
|
@ -166,7 +206,9 @@ scene.setCenter([lng,lat])
|
|||
scene.setZoomAndCenter(zoom,center)
|
||||
```
|
||||
|
||||
参数：zoom {number}<br />center {LngLat}
|
||||
参数：
|
||||
- zoom {number}
|
||||
- center {LngLat}
|
||||
|
||||
|
||||
### setRotation
|
||||
|
|
@ -195,14 +237,20 @@ scene.ZoomOUt()
|
|||
scene.panTo(LngLat)
|
||||
```
|
||||
|
||||
参数：`center` LngLat 中心位置坐标
|
||||
参数：
|
||||
|
||||
- `center` LngLat 中心位置坐标
|
||||
|
||||
### panBy
|
||||
以像素为单位沿X方向和Y方向移动地图
|
||||
```javascript
|
||||
scene.panBy(x,y)
|
||||
```
|
||||
参数：<br />`x` {number} 水平方向移动像素 向右为正方向<br /> `y` {number} 垂直方向移动像素 向下为正方向
|
||||
参数：
|
||||
|
||||
- `x` {number} 水平方向移动像素 向右为正方向
|
||||
|
||||
- `y` {number} 垂直方向移动像素 向下为正方向
|
||||
|
||||
|
||||
### setPitch
|
||||
|
|
@ -211,11 +259,16 @@ scene.panBy(x,y)
|
|||
scene.setPitch(pitch)
|
||||
```
|
||||
|
||||
参数 :<br /> `pitch` {number}
|
||||
参数 :
|
||||
- `pitch` {number}
|
||||
|
||||
|
||||
### fitBounds
|
||||
地图缩放到某个范围内<br />参数 :<br /> `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
||||
地图缩放到某个范围内
|
||||
|
||||
参数 :
|
||||
|
||||
- `extent` { array} 经纬度范围 [minlng,minlat,maxlng,maxlat]
|
||||
|
||||
```javascript
|
||||
scene.fitBounds([112,32,114,35]);
|
||||
|
|
@ -230,7 +283,9 @@ scene.fitBounds([112,32,114,35]);
|
|||
scene.removeLayer(layer)
|
||||
```
|
||||
|
||||
参数 `layer` {Layer}
|
||||
参数
|
||||
|
||||
- `layer` {Layer}
|
||||
|
||||
### getLayers
|
||||
获取所有的layer
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: AMap BaseMap
|
||||
title: GaodeMap BaseMap
|
||||
order: 0
|
||||
---
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ order: 0
|
|||
2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
|
||||
```
|
||||
|
||||
### 添加div 标签指定地图容器
|
||||
|
|
@ -35,13 +35,13 @@ order: 0
|
|||
``` javascript
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
type:'amap',
|
||||
token: '高德地图token'
|
||||
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: '高德地图token',
|
||||
}),
|
||||
});
|
||||
|
||||
```
|
||||
|
|
@ -106,17 +106,18 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
|||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
|
||||
<script>
|
||||
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
type:'amap',
|
||||
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: '高德地图token',
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ order: 0
|
|||
2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
|
||||
```
|
||||
|
||||
### 添加div 标签指定地图容器
|
||||
|
|
@ -35,13 +35,13 @@ order: 0
|
|||
``` javascript
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
type:'amap',
|
||||
token: '高德地图token'
|
||||
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: '高德地图token',
|
||||
}),
|
||||
});
|
||||
|
||||
```
|
||||
|
|
@ -106,17 +106,18 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
|||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
|
||||
<script>
|
||||
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
type:'amap',
|
||||
|
||||
map: new L7.GaodeMap({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: '高德地图token',
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ order: 0
|
|||
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -42,13 +42,13 @@ order: 0
|
|||
``` javascript
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
type:'mapbox',
|
||||
token: 'mapbox token'
|
||||
|
||||
map: new L7.Mapbox({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: 'mapbox token',
|
||||
}),
|
||||
});
|
||||
|
||||
```
|
||||
|
|
@ -114,16 +114,17 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
|||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
|
||||
<script>
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
type:'amap',
|
||||
|
||||
map: new L7.Mapbox({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: 'mapbox token',
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ order: 0
|
|||
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -39,18 +39,21 @@ order: 0
|
|||
### 初始化 L7 Scene
|
||||
|
||||
|
||||
``` javascript
|
||||
|
||||
``` javascript
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
type:'mapbox',
|
||||
token: 'mapbox token'
|
||||
|
||||
map: new L7.Mapbox({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: 'mapbox token',
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
```
|
||||
|
||||
这样我们就完成了通过L7 实例化mapbox地图
|
||||
|
|
@ -112,16 +115,17 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
|||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.9/dist/l7.js"></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js"></script>
|
||||
<script>
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
type:'amap',
|
||||
|
||||
map: new L7.Mapbox({
|
||||
style: 'dark', // 样式URL
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 12,
|
||||
token: 'mapbox token',
|
||||
}),
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
||||
|
|
|
|||
|
|
@ -5,164 +5,79 @@ redirect_from:
|
|||
- /en/docs/tutorial
|
||||
---
|
||||
|
||||
## L7
|
||||
|
||||
Current version: 
|
||||
|
||||
# 使用方法
|
||||
|
||||
L7 提供三种使用方式：CDN、Submodule。
|
||||
|
||||
## 通过 CDN 使用
|
||||
## 通过L7 CDN 使用
|
||||
|
||||
Include the L7 JS JavaScript <head> of your HTML file.
|
||||
|
||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
|
||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js'>
|
||||
</script>
|
||||
</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>
|
||||
```
|
||||
⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
|
||||
- [use Gaode Map](../map/amap.en.md)
|
||||
|
||||
然后在 `<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)
|
||||
- [use Mapbox Map ](../map/mapbox.en.md)
|
||||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn`
|
||||
## 通过 Module bundle 使用
|
||||
|
||||
Install the npm package.
|
||||
|
||||
```bash
|
||||
|
||||
// L7 依赖
|
||||
npm install --save @antv/l7@beta
|
||||
|
||||
yarn add --save @antv/l7@beta
|
||||
// 第三方底图依赖
|
||||
npm install --save @antv/l7-maps;
|
||||
|
||||
```
|
||||
|
||||
然后就可以使用其中包含的场景和各类图层：
|
||||
```typescript
|
||||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
### 初始化地图
|
||||
|
||||
(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,
|
||||
```javascript
|
||||
|
||||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
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();
|
||||
})();
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
#### 使用Mapbox 底图
|
||||
|
||||
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)
|
||||
```javascript
|
||||
|
||||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
## [WIP] React
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
zoom: 2.632456779444394
|
||||
})
|
||||
});
|
||||
|
||||
React 组件待开发，目前可以暂时以 Submodule 方式使用：
|
||||
```tsx
|
||||
import { Scene, PolygonLayer} from '@antv/l7';
|
||||
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()` 手动销毁场景。
|
||||
|
||||
|
|
|
|||
|
|
@ -5,164 +5,78 @@ redirect_from:
|
|||
- /zh/docs/tutorial
|
||||
---
|
||||
|
||||
# 使用方法
|
||||
# L7
|
||||
|
||||
L7 提供三种使用方式：CDN、Submodule。
|
||||
Current version: 
|
||||
|
||||
## 通过 CDN 使用
|
||||
## 使用方法
|
||||
|
||||
### 通过 L7 CDN 使用
|
||||
|
||||
Include the L7 JS JavaScript <head> of your HTML file.
|
||||
|
||||
首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
|
||||
```html
|
||||
<head>
|
||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
|
||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.16/dist/l7.js'>
|
||||
</script>
|
||||
</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>
|
||||
```
|
||||
⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
|
||||
- [use Gaode Map](./map/amap)
|
||||
|
||||
然后在 `<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)
|
||||
- [use Mapbox Map ](./map/mapbox)
|
||||
|
||||
## 通过 Submodule 使用
|
||||
|
||||
首先通过 `npm/yarn`
|
||||
## 通过 Module bundle 使用
|
||||
|
||||
Install the npm package.
|
||||
|
||||
```bash
|
||||
|
||||
// L7 依赖
|
||||
npm install --save @antv/l7@beta
|
||||
|
||||
yarn add --save @antv/l7@beta
|
||||
// 第三方底图依赖
|
||||
npm install --save @antv/l7-maps;
|
||||
|
||||
```
|
||||
|
||||
然后就可以使用其中包含的场景和各类图层：
|
||||
```typescript
|
||||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
### 初始化地图
|
||||
|
||||
(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,
|
||||
```javascript
|
||||
|
||||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
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();
|
||||
})();
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
#### 使用Mapbox 底图
|
||||
|
||||
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)
|
||||
```javascript
|
||||
|
||||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
## [WIP] React
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
zoom: 2.632456779444394
|
||||
})
|
||||
});
|
||||
|
||||
React 组件待开发，目前可以暂时以 Submodule 方式使用：
|
||||
```tsx
|
||||
import { Scene, PolygonLayer} from '@antv/l7';
|
||||
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()` 手动销毁场景。
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [ 107.77791556935472, 35.443286920228644 ],
|
||||
zoom: 2.9142882493605033
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
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 => {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
type: 'mapbox',
|
||||
style: 'dark'
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 35.210526315789465,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4
|
||||
map: new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
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 => {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 43,
|
||||
center: [ 120.13383079335335, 29.651873105004427 ],
|
||||
zoom: 7.068989519212174,
|
||||
type: 'mapbox'
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 43,
|
||||
center: [ 120.13383079335335, 29.651873105004427 ],
|
||||
zoom: 7.068989519212174
|
||||
})
|
||||
});
|
||||
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 121.417463, 31.215175 ],
|
||||
pitch: 0,
|
||||
zoom: 11
|
||||
map: new GaodeMap({
|
||||
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 => {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 64.88,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 114.060288, 22.53684 ],
|
||||
zoom: 15.63
|
||||
map: new GaodeMap({
|
||||
pitch: 64.88,
|
||||
style: 'dark',
|
||||
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'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap'
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap'
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap'
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056,
|
||||
type: 'amap'
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 110.097892, 33.853662 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
||||
window.mapScene = scene;
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
type: 'mapbox',
|
||||
zoom: 2.632456779444394
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
zoom: 2.632456779444394
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 58.5,
|
||||
center: [ 111.8759, 30.6942 ],
|
||||
rotation: 0.519,
|
||||
type: 'mapbox',
|
||||
zoom: 3.6116
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 58.5,
|
||||
center: [ 111.8759, 30.6942 ],
|
||||
rotation: 0.519,
|
||||
zoom: 3.6116
|
||||
})
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
type: 'mapbox',
|
||||
zoom: 2.632456779444394
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 0,
|
||||
center: [ 127.5671666579043, 7.445038892195569 ],
|
||||
zoom: 2.632456779444394
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 47.49999999999995,
|
||||
center: [ 112.50447776627743, 30.830476390931125 ],
|
||||
zoom: 3.9879693680088626,
|
||||
type: 'mapbox'
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 47.49999999999995,
|
||||
center: [ 112.50447776627743, 30.830476390931125 ],
|
||||
zoom: 3.9879693680088626
|
||||
})
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 56.499,
|
||||
center: [ 114.07737552216226, 22.542656745583486 ],
|
||||
rotation: 39.19,
|
||||
zoom: 12.47985,
|
||||
type: 'mapbox'
|
||||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 56.499,
|
||||
center: [ 114.07737552216226, 22.542656745583486 ],
|
||||
rotation: 39.19,
|
||||
zoom: 12.47985
|
||||
})
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'dark',
|
||||
pitch: 43,
|
||||
center: [ 120.13383079335335, 29.651873105004427 ],
|
||||
zoom: 7.068989519212174,
|
||||
type: 'mapbox'
|
||||
map: new Mapbox({
|
||||
style: 'dark',
|
||||
pitch: 43,
|
||||
center: [ 120.13383079335335, 29.651873105004427 ],
|
||||
zoom: 7.068989519212174
|
||||
})
|
||||
});
|
||||
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, HeatmapLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 104.995156, 31.450658 ],
|
||||
type: 'amap',
|
||||
zoom: 3.79
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 104.995156, 31.450658 ],
|
||||
zoom: 3.79
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [ 107.77791556935472, 35.443286920228644 ],
|
||||
zoom: 2.9142882493605033
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 107.77791556935472, 35.443286920228644 ],
|
||||
zoom: 2.9142882493605033
|
||||
})
|
||||
});
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
.then(res => res.text())
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [ -74.06967, 40.720399 ],
|
||||
zoom: 12.45977
|
||||
map: new Mapbox({
|
||||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [ -74.06967, 40.720399 ],
|
||||
zoom: 12.45977
|
||||
})
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [ 104.34278, 41.12554 ],
|
||||
zoom: 2.94888,
|
||||
rotation: 42.3999
|
||||
map: new Mapbox({
|
||||
pitch: 60,
|
||||
style: 'dark',
|
||||
center: [ 104.34278, 41.12554 ],
|
||||
zoom: 2.94888,
|
||||
rotation: 42.3999
|
||||
})
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 53.6305,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 102.600579, 23.114887 ],
|
||||
zoom: 14.66
|
||||
map: new GaodeMap({
|
||||
pitch: 53.6305,
|
||||
style: 'light',
|
||||
center: [ 102.600579, 23.114887 ],
|
||||
zoom: 14.66
|
||||
})
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 26.842105263157915,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 102.599436, 23.116371 ],
|
||||
zoom: 14.78
|
||||
map: new GaodeMap({
|
||||
pitch: 26.842105263157915,
|
||||
style: 'dark',
|
||||
center: [ 102.599436, 23.116371 ],
|
||||
zoom: 14.78
|
||||
})
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 104.117492, 36.492696 ],
|
||||
zoom: 3.89
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 104.117492, 36.492696 ],
|
||||
zoom: 3.89
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 104.117492, 36.492696 ],
|
||||
zoom: 3.89
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 104.117492, 36.492696 ],
|
||||
zoom: 3.89
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [ 103.83735, 1.3602538 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
type: 'mapbox',
|
||||
style: 'dark'
|
||||
map: new Mapbox({
|
||||
center: [ 103.83735, 1.3602538 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
style: 'dark'
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
type: 'mapbox',
|
||||
style: 'light'
|
||||
map: new Mapbox({
|
||||
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||
pitch: 4.00000000000001,
|
||||
zoom: 10.210275860702593,
|
||||
rotation: 19.313180925794313,
|
||||
style: 'light'
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark'
|
||||
map: new Mapbox({
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
style: 'dark'
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
import { Scene, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
type: 'mapbox',
|
||||
style: 'light'
|
||||
map: new Mapbox({
|
||||
center: [ 116.3956, 39.9392 ],
|
||||
pitch: 0,
|
||||
zoom: 10,
|
||||
rotation: 0,
|
||||
style: 'light'
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 121.435159, 31.256971 ],
|
||||
zoom: 14.89,
|
||||
minZoom: 10
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 121.435159, 31.256971 ],
|
||||
zoom: 14.89,
|
||||
minZoom: 10
|
||||
})
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 140.067171, 36.26186 ],
|
||||
zoom: 5.32,
|
||||
maxZoom: 10
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 140.067171, 36.26186 ],
|
||||
zoom: 5.32,
|
||||
maxZoom: 10
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ -121.24357, 37.58264 ],
|
||||
pitch: 0,
|
||||
zoom: 6.45
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ -121.24357, 37.58264 ],
|
||||
pitch: 0,
|
||||
zoom: 6.45
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [ 96.99215001469588, 29.281597225674773 ],
|
||||
zoom: 2.194613775109773,
|
||||
maxZoom: 10
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 96.99215001469588, 29.281597225674773 ],
|
||||
zoom: 2.194613775109773,
|
||||
maxZoom: 10
|
||||
})
|
||||
});
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
import { Scene, Marker } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as G2 from '@antv/g2';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
pitch: 0,
|
||||
zoom: 4.19
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
pitch: 0,
|
||||
zoom: 4.19
|
||||
})
|
||||
});
|
||||
addChart();
|
||||
scene.render();
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
});
|
||||
|
||||
|
||||
function addChart() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
|
|
@ -64,14 +67,14 @@ function addChart() {
|
|||
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
|
||||
.opacity(1);
|
||||
chart.render();
|
||||
new Marker({
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
})
|
||||
.addTo(scene);
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import { Scene, Marker } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as G2 from '@antv/g2';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
pitch: 0,
|
||||
zoom: 4.19
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
pitch: 0,
|
||||
zoom: 4.19
|
||||
})
|
||||
});
|
||||
addChart();
|
||||
scene.render();
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
});
|
||||
|
||||
function addChart() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
|
|
@ -86,14 +88,14 @@ function addChart() {
|
|||
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
|
||||
.shape('sliceShape');
|
||||
chart.render();
|
||||
new Marker({
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
})
|
||||
.addTo(scene);
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Scene, Marker } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
import * as G2 from '@antv/g2';
|
||||
|
||||
const CSS = `.l7-marker .g2-guide-html {
|
||||
|
|
@ -36,75 +37,73 @@ loadCssCode(CSS);
|
|||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'dark',
|
||||
center: [ 52.21496184144132, 24.121126851768906 ],
|
||||
zoom: 3.802
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 52.21496184144132, 24.121126851768906 ],
|
||||
zoom: 3.802
|
||||
})
|
||||
});
|
||||
scene.render();
|
||||
scene.on('loaded', () => {
|
||||
Promise.all([
|
||||
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)'];
|
||||
});
|
||||
// 数据绑定
|
||||
Promise.all([
|
||||
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)'];
|
||||
});
|
||||
// 数据绑定
|
||||
|
||||
center.features = center.features.map(fe => {
|
||||
fe.properties.female = popobj[fe.properties.id] * 1 || 0;
|
||||
return fe;
|
||||
center.features = center.features.map(fe => {
|
||||
fe.properties.female = popobj[fe.properties.id] * 1 || 0;
|
||||
return fe;
|
||||
});
|
||||
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; }
|
||||
const size = 60;
|
||||
const data = [
|
||||
{
|
||||
type: '男性',
|
||||
value: 100.0 - v.toFixed(2)
|
||||
},
|
||||
{
|
||||
type: '女性',
|
||||
value: v.toFixed(2) * 1
|
||||
}
|
||||
];
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
});
|
||||
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; }
|
||||
const size = 60;
|
||||
const data = [
|
||||
{
|
||||
type: '男性',
|
||||
value: 100.0 - v.toFixed(2)
|
||||
},
|
||||
{
|
||||
type: '女性',
|
||||
value: v.toFixed(2) * 1
|
||||
}
|
||||
];
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
});
|
||||
chart.source(data);
|
||||
chart.legend(false);
|
||||
chart.tooltip(false);
|
||||
chart.coord('theta', {
|
||||
radius: 0.9,
|
||||
innerRadius: 0.6
|
||||
});
|
||||
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);
|
||||
chart.source(data);
|
||||
chart.legend(false);
|
||||
chart.tooltip(false);
|
||||
chart.coord('theta', {
|
||||
radius: 0.9,
|
||||
innerRadius: 0.6
|
||||
});
|
||||
chart
|
||||
.intervalStack()
|
||||
.position('value')
|
||||
.color('type', [ '#5CCEA1', '#5B8FF9' ])
|
||||
.opacity(1);
|
||||
chart.render();
|
||||
const marker = new Marker({ element: el })
|
||||
.setLnglat({
|
||||
lng: coord[0],
|
||||
lat: coord[1]
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 66.02383,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 121.400257, 31.25287 ],
|
||||
zoom: 14.55,
|
||||
rotation: 134.9507
|
||||
map: new GaodeMap({
|
||||
pitch: 66.02383,
|
||||
style: 'dark',
|
||||
center: [ 121.400257, 31.25287 ],
|
||||
zoom: 14.55,
|
||||
rotation: 134.9507
|
||||
})
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 60,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [ 121.412224, 31.26192438 ],
|
||||
zoom: 13.13438,
|
||||
rotation: 35.97133
|
||||
map: new Mapbox({
|
||||
pitch: 60,
|
||||
style: 'light',
|
||||
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'
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 35.210526315789465,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 104.288144, 31.239692 ],
|
||||
zoom: 4.4
|
||||
map: new GaodeMap({
|
||||
pitch: 35.210526315789465,
|
||||
style: 'dark',
|
||||
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 => {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 48.62562,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 104.026043, 31.847 ],
|
||||
rotation: -0.76,
|
||||
zoom: 4.48
|
||||
map: new GaodeMap({
|
||||
pitch: 48.62562,
|
||||
style: 'light',
|
||||
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 => {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 121.434765, 31.256735 ],
|
||||
zoom: 14.83
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 121.434765, 31.256735 ],
|
||||
zoom: 14.83
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 116.276227, 35.256776 ],
|
||||
zoom: 6
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 116.276227, 35.256776 ],
|
||||
zoom: 6
|
||||
})
|
||||
});
|
||||
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 120.5969, 29.7918 ],
|
||||
pitch: 35,
|
||||
zoom: 7,
|
||||
rotation: 4.183582
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
center: [ 120.5969, 29.7918 ],
|
||||
pitch: 35,
|
||||
zoom: 7,
|
||||
rotation: 4.183582
|
||||
})
|
||||
});
|
||||
scene.addImage(
|
||||
'00',
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
import { Scene, Marker } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 105.790327, 36.495636 ],
|
||||
pitch: 0,
|
||||
zoom: 4
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ 105.790327, 36.495636 ],
|
||||
pitch: 0,
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
addMarkers();
|
||||
scene.render();
|
||||
scene.on('loaded', () => {
|
||||
addMarkers();
|
||||
});
|
||||
|
||||
|
||||
function addMarkers() {
|
||||
fetch(
|
||||
|
|
@ -25,11 +27,11 @@ function addMarkers() {
|
|||
el.textContent = nodes[i].v + '℃';
|
||||
el.style.background = getColor(nodes[i].v);
|
||||
el.style.borderColor = getColor(nodes[i].v);
|
||||
new Marker({
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
})
|
||||
.setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y })
|
||||
.addTo(scene);
|
||||
.setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
|
||||
scene.addMarker(marker);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 121.417463, 31.215175 ],
|
||||
pitch: 0,
|
||||
zoom: 11
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
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 => {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { Scene, PointLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 64.88,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 114.060288, 22.53684 ],
|
||||
zoom: 15.63
|
||||
map: new GaodeMap({
|
||||
pitch: 64.88,
|
||||
style: 'dark',
|
||||
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'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import { Scene, PolygonLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 114.050008, 22.529272 ],
|
||||
zoom: 14.1
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
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'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 116.368652, 39.93866 ],
|
||||
zoom: 10.07
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 116.368652, 39.93866 ],
|
||||
zoom: 10.07
|
||||
})
|
||||
});
|
||||
window.mapScene = scene;
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 107.042225, 37.66565 ],
|
||||
zoom: 3.87
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 107.042225, 37.66565 ],
|
||||
zoom: 3.87
|
||||
})
|
||||
});
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'mapbox',
|
||||
style: 'light',
|
||||
center: [ 3.438, 40.16797 ],
|
||||
zoom: 0.51329
|
||||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 3.438, 40.16797 ],
|
||||
zoom: 0.51329
|
||||
})
|
||||
});
|
||||
Promise.all([
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, ImageLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'light',
|
||||
center: [ 121.268, 30.3628 ],
|
||||
zoom: 13
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 121.268, 30.3628 ],
|
||||
zoom: 13
|
||||
})
|
||||
});
|
||||
|
||||
const layer = new ImageLayer({});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { Scene, ImageLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
pitch: 0,
|
||||
type: 'amap',
|
||||
style: 'dark',
|
||||
center: [ 115.5268, 34.3628 ],
|
||||
zoom: 7
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 115.5268, 34.3628 ],
|
||||
zoom: 7
|
||||
})
|
||||
});
|
||||
|
||||
const layer = new ImageLayer({});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
import { PointLayer, Scale, Scene, Layers, Zoom } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 121.4316962, 31.26082325 ],
|
||||
zoom: 15.056
|
||||
})
|
||||
});
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const pointLayer =
|
||||
new PointLayer({
|
||||
})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
}).shape('circle')
|
||||
.size('unit_price', [ 5, 25 ])
|
||||
.color('name', [ '#49B5AD', '#5B8FF9' ])
|
||||
.style({
|
||||
opacity: 0.3,
|
||||
strokeWidth: 1
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
const overlayers = {
|
||||
围栏填充: pointLayer
|
||||
};
|
||||
const layersControl = new Layers({
|
||||
overlayers
|
||||
});
|
||||
|
||||
scene.addControl(layersControl);
|
||||
|
||||
});
|
||||
|
||||
|
||||
const zoomControl = new Zoom({
|
||||
position: 'topright'
|
||||
});
|
||||
const scaleControl = new Scale({
|
||||
position: 'bottomright'
|
||||
});
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Scale, Zoom, Scene } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
||||
const zoomControl = new Zoom();
|
||||
const scaleControl = new Scale();
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "地图",
|
||||
"en": "Category"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "amap.js",
|
||||
"title": "高德底图组件",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*yXzQRYcGTyoAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "mapbox.js",
|
||||
"title": "MapBox底图组件",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: control
|
||||
order: 2
|
||||
---
|
||||
How to use the map control
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 组件
|
||||
order: 2
|
||||
---
|
||||
如何使用组件
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "图库",
|
||||
"en": "Gallery"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "line.js",
|
||||
"title": "json数据"",
|
||||
"screenshot": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Data
|
||||
order: 1
|
||||
---
|
||||
|
||||
coming soon ……
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 数据
|
||||
order: 1
|
||||
---
|
||||
在路上 ……
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "地图",
|
||||
"en": "Category"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "amap.js",
|
||||
"title": "高德底图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*F0JPSoLcSesAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "mapbox.js",
|
||||
"title": "MapBox底图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: map
|
||||
order: 0
|
||||
---
|
||||
|
||||
how to use L7 Initialize third-party maps
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: 地图
|
||||
order: 0
|
||||
---
|
||||
介绍如何初始化一个第三方底图
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { Scene, Marker, Popup } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 121.4316962, 31.26082325 ],
|
||||
zoom: 12.056
|
||||
})
|
||||
});
|
||||
// 创建默认 marker
|
||||
const popup = new Popup({
|
||||
offsets: [ 0, 20 ]
|
||||
}).setText('hello');
|
||||
|
||||
const marker = new Marker()
|
||||
.setLnglat([ 121.4316962, 31.26082325 ])
|
||||
.setPopup(popup);
|
||||
|
||||
scene.addMarker(marker);
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Scale, Zoom, Scene } from '@antv/l7';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
style: 'light',
|
||||
pitch: 0,
|
||||
center: [ 107.054293, 35.246265 ],
|
||||
zoom: 4.056
|
||||
})
|
||||
});
|
||||
|
||||
const zoomControl = new Zoom();
|
||||
const scaleControl = new Scale();
|
||||
scene.addControl(zoomControl);
|
||||
scene.addControl(scaleControl);
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "地图",
|
||||
"en": "Category"
|
||||
},
|
||||
"demos": [
|
||||
{
|
||||
"filename": "amap.js",
|
||||
"title": "添加默认Marker",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Gzj7SYk-vdEAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "mapbox.js",
|
||||
"title": "MapBox底图组件",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: control
|
||||
order: 2
|
||||
---
|
||||
add Rich text annotation to scene
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Marker
|
||||
order: 2
|
||||
---
|
||||
通过添加dom实现富文本地图标注
|
||||
|
|
@ -4,3 +4,4 @@ require('./packages/component/src/css/l7.css');
|
|||
window.geotiff = require('geotiff/dist/geotiff.bundle.min.js');
|
||||
window.g2 = require('@antv/g2');
|
||||
window.l7 = require('@antv/l7');
|
||||
window.l7Maps = require('@antv/l7-maps');
|
||||
|
|
|
|||
|
|
@ -166,7 +166,8 @@ module.exports = {
|
|||
playground: {
|
||||
container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
|
||||
dependencies: {
|
||||
'@antv/l7': 'beta'
|
||||
'@antv/l7': 'beta',
|
||||
'@antv/l7-maps': 'latest'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ module.exports = {
|
|||
// },
|
||||
// },
|
||||
moduleFileExtensions: [ 'ts', 'tsx', 'js' ],
|
||||
modulePathIgnorePatterns: [ 'dist', 'packages/renderer' ], // TODO: 暂时关闭render test
|
||||
modulePathIgnorePatterns: [ 'dist' ],
|
||||
moduleNameMapper: {
|
||||
'@antv/l7-(.+)$': '<rootDir>packages/$1/src'
|
||||
},
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue