mirror of https://gitee.com/antv-l7/antv-l7
fix: 合并冲突
This commit is contained in:
lzxue
commit
f5c7ce9c72
.github
.umirc.tsREADME.en-US.mdREADME.mddev-demos
bugs/point/demos
component/popup
features/tile
packages
component
core
l7
layers
map
maps
mini
renderer
scene
site
.dumirc.ts
docs
CNAME
api
component
control
popup
raster_layer
common
options.en.mdoptions.zh.mdraster_band_calc.zh.mdraster_layer.en.mdraster_layer.zh.mdraster_multi_band.zh.mdraster_muti_band.en.mdraster_rgb.en.mdraster_rgb.zh.mdraster_single_band.en.mdraster_single_band.zh.mdsource.en.mdsource.zh.mdstyle.en.mdsource
tile
common
examples
package.jsonpublic_site
source
test-utils
three
utils
scripts
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
👍🎉 欢迎向 L7 贡献代码! 🎉👍
|
||||
|
||||
## 下载源码
|
||||
|
||||
```bash
|
||||
git clone https://github.com/antvis/L7 --depth=1
|
||||
```
|
||||
|
||||
## 前置依赖安装
|
||||
|
||||
### 安装 Yarn
|
||||
|
|
@ -20,6 +26,7 @@
|
|||
## 安装依赖
|
||||
|
||||
安装依赖并完成 Yarn workspace 初始化：
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
|
@ -32,20 +39,22 @@ copy node_modules/gl/deps/windows/dll/x64/*.dll c:\windows\system32
|
|||
|
||||
## 运行 DEMO
|
||||
|
||||
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
```
|
||||
打开 `http://localhost:6006/`：
|
||||
|
||||
打开 `http://localhost:6006/`：
|
||||
|
||||
## 运行测试
|
||||
|
||||
运行单元测试：
|
||||
|
||||
```bash
|
||||
yarn test
|
||||
```
|
||||
|
||||
运行单元测试并查看代码覆盖率：
|
||||
|
||||
```bash
|
||||
yarn coveralls
|
||||
```
|
||||
|
|
@ -53,21 +62,25 @@ 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）
|
||||
将 lodash 添加为所有 package 的依赖(不包含 root）
|
||||
|
||||
```bash
|
||||
yarn workspaces run add lodash
|
||||
```
|
||||
|
||||
将 typescript 设置为 root 的开发依赖
|
||||
|
||||
```bash
|
||||
yarn add -W -D typescript jest
|
||||
```
|
||||
|
|
@ -75,6 +88,7 @@ yarn add -W -D typescript jest
|
|||
## 提交代码
|
||||
|
||||
代替 `git commit` 提交：
|
||||
|
||||
```bash
|
||||
yarn commit
|
||||
```
|
||||
|
|
@ -86,10 +100,9 @@ yarn commit
|
|||
```bash
|
||||
yarn run version:prerelease
|
||||
```
|
||||
设置完成后需要commit一下代码
|
||||
|
||||
设置完成后需要 commit 一下代码
|
||||
|
||||
### 发布
|
||||
|
||||
|
||||
yarn run release
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
👍🎉 Welcome to contribute code to L7! 🎉👍
|
||||
|
||||
## Source Code
|
||||
|
||||
```bash
|
||||
git clone https://github.com/antvis/L7 --depth=1
|
||||
```
|
||||
|
||||
## Pre-installation
|
||||
|
||||
### Install Yarn
|
||||
|
|
@ -20,6 +26,7 @@ See [other issues](https://github.com/antvis/L7/issues/101) during installation.
|
|||
## Install dependencies
|
||||
|
||||
Install dependencies and complete Yarn workspace initialization:
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
|
@ -33,11 +40,13 @@ copy node_modules/gl/deps/windows/dll/x64/*.dll c:\windows\system32
|
|||
## Run DEMO
|
||||
|
||||
Start each package code change monitoring:
|
||||
|
||||
```bash
|
||||
yarn watch
|
||||
```
|
||||
|
||||
Start Storybook, it will automatically open `http://localhost:6006/`:
|
||||
|
||||
```bash
|
||||
yarn storybook
|
||||
```
|
||||
|
|
@ -45,11 +54,13 @@ yarn storybook
|
|||
## Run test
|
||||
|
||||
Run unit tests:
|
||||
|
||||
```bash
|
||||
yarn test
|
||||
```
|
||||
|
||||
Run unit tests and view code coverage:
|
||||
|
||||
```bash
|
||||
yarn coveralls
|
||||
```
|
||||
|
|
@ -57,26 +68,31 @@ yarn coveralls
|
|||
## Add Lerna package
|
||||
|
||||
Add a new lerna package:
|
||||
|
||||
```bash
|
||||
lerna create my-pack -y
|
||||
```
|
||||
|
||||
Use ui-lib as a dependency of my-pack:
|
||||
|
||||
```bash
|
||||
yarn workspace my-pack add ui-lib/1.0.0
|
||||
```
|
||||
|
||||
Add lodash as a dependency of all packages (excluding root)
|
||||
|
||||
```bash
|
||||
yarn workspaces run add lodash
|
||||
```
|
||||
|
||||
Set typescript to root development dependency:
|
||||
|
||||
```bash
|
||||
yarn add -W -D typescript jest
|
||||
```
|
||||
|
||||
## Submit code
|
||||
|
||||
Instead of `git commit`:
|
||||
|
||||
```bash
|
||||
|
|
@ -90,8 +106,9 @@ yarn commit
|
|||
```bash
|
||||
yarn run version:prerelease
|
||||
```
|
||||
|
||||
After setting, you need to commit the code
|
||||
|
||||
### release
|
||||
|
||||
yarn run release
|
||||
yarn run release
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ export default defineConfig({
|
|||
'https://gw.alipayobjects.com/os/lib/antd/4.19.4/dist/antd.js',
|
||||
/** lodash */
|
||||
'https://gw.alipayobjects.com/os/lib/lodash/4.17.20/lodash.min.js',
|
||||
],
|
||||
]
|
||||
|
||||
// more config: https://d.umijs.org/config
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
# L7
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> English | [简体中文](./README.md)
|
||||
|
||||
<h1 align="center">L7</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
🌍 Large-scale WebGL-powered Geospatial data visualization analysis framework.
|
||||
|
||||
.
|
||||
[](https://travis-ci.com/antvis/L7) [](https://www.npmjs.com/package/@antv/l7) 
|
||||
|
||||
Large-scale WebGL-powered Geospatial data visualization analysis framework.
|
||||
<p align="center">
|
||||
<a href="https://l7.antv.antgroup.com/tutorial/quickstart">Tutorials</a> •
|
||||
<a href="https://l7.antv.antgroup.com/api/scene">API documentation</a> •
|
||||
<a href="https://l7.antv.antgroup.com/examples">Examples</a> •
|
||||
<a href="./.github/CONTRIBUTING.md">Contributor</a>
|
||||
</p>
|
||||
|
||||
[中文 README](./README.md)
|
||||
|
||||
|
||||
[GitHub](https://github.com/antvis/L7)
|
||||
</div>
|
||||
|
||||
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
|
||||
|
||||
[website](https://l7.antv.vision/zh)
|
||||
|
||||
## 🌄 L7 visualization demos
|
||||
|
||||
|
||||
|
||||
## 🌟 Highlight features of L7 2.0
|
||||
|
||||
- 🌏 Data-driven Visualization
|
||||
|
|
@ -81,20 +85,12 @@ const pointLayer = new PointLayer()
|
|||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## :memo: Documentation
|
||||
|
||||
- [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)
|
||||
- [Contributor documentation](./.github/CONTRIBUTING.md)
|
||||
|
||||
## 🔗 Links
|
||||
|
||||
- [L7Plot](https://github.com/antvis/L7Plot)
|
||||
- [L7 React](https://github.com/antvis/L7-React)
|
||||
- [L7 Boundary](https://github.com/antvis/L7-boundary)
|
||||
- [L7Draw](https://github.com/antvis/L7Draw)
|
||||
- [L7Plot](https://github.com/antvis/L7Plot)
|
||||
- [LarkMap](https://github.com/antvis/LarkMap)
|
||||
- [LocationInsight](https://locationinsight.antv.antgroup.com)
|
||||
|
||||
## ✅ License
|
||||
|
||||
|
|
|
|||
39
README.md
39
README.md
|
|
@ -1,23 +1,28 @@
|
|||
## L7 地理空间数据可视分析引擎
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.en-US.md) | 简体中文
|
||||
|
||||
<h1 align="center">L7</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
🌍 地理空间数据可视分析引擎
|
||||
|
||||
[](https://travis-ci.com/antvis/L7) [](https://www.npmjs.com/package/@antv/l7) 
|
||||
|
||||
[README](./README.en-US.md)
|
||||
<p align="center">
|
||||
<a href="https://l7.antv.antgroup.com/tutorial/quickstart">教程</a> •
|
||||
<a href="https://l7.antv.antgroup.com/api/scene">文档</a> •
|
||||
<a href="https://l7.antv.antgroup.com/examples">示例</a> •
|
||||
<a href="./.github/CONTRIBUTING.md">贡献</a>
|
||||
</p>
|
||||
|
||||
[GitHub](https://github.com/antvis/L7)
|
||||
|
||||
|
||||
```bash
|
||||
git clone https://github.com/antvis/L7 --depth=1
|
||||
```
|
||||
</div>
|
||||
|
||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。
|
||||
|
||||
[官网地址](https://l7.antv.vision/zh)
|
||||
|
||||
L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。
|
||||
|
||||
|
||||
|
||||
## 🌟 核心特性
|
||||
|
||||
🌏 数据驱动可视化展示
|
||||
|
|
@ -113,20 +118,12 @@ const pointLayer = new PointLayer()
|
|||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## :memo: 文档
|
||||
|
||||
- [开始使用](https://l7.antv.vision/en/docs/api/l7)
|
||||
- [教程](https://l7.antv.vision/en/docs/tutorial/quickstart)
|
||||
- [文档](https://l7.antv.vision/en/docs/api/l7)
|
||||
- [示例](https://l7.antv.vision/en/examples/gallery/basic)
|
||||
- [贡献](./.github/CONTRIBUTING.md)
|
||||
|
||||
## 🔗 Links
|
||||
|
||||
- [L7Plot](https://github.com/antvis/L7Plot)
|
||||
- [L7 React](https://github.com/antvis/L7-React)
|
||||
- [L7 Boundary](https://github.com/antvis/L7-boundary)
|
||||
- [L7Draw](https://github.com/antvis/L7Draw)
|
||||
- [L7Plot](https://github.com/antvis/L7Plot)
|
||||
- [LarkMap](https://github.com/antvis/LarkMap)
|
||||
- [LocationInsight](https://locationinsight.antv.antgroup.com)
|
||||
|
||||
## ✅ License
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,10 @@ export default () => {
|
|||
})
|
||||
.shape('circle')
|
||||
.size(12)
|
||||
.active({
|
||||
color:'red',
|
||||
})
|
||||
.select(true)
|
||||
.color('red')
|
||||
.style({
|
||||
stroke: ['name', (name)=>{
|
||||
|
|
|
|||
|
|
@ -109,6 +109,11 @@ const Demo: FunctionComponent = () => {
|
|||
const newPopup = new LayerPopup({
|
||||
items: [
|
||||
{
|
||||
title: (e) => {
|
||||
const h1 = document.createElement('h1');
|
||||
h1.innerText = e.name;
|
||||
return h1;
|
||||
},
|
||||
layer: 'pointLayer',
|
||||
fields: [
|
||||
{
|
||||
|
|
@ -122,25 +127,27 @@ const Demo: FunctionComponent = () => {
|
|||
],
|
||||
},
|
||||
{
|
||||
title: '线图层',
|
||||
layer: 'lineLayer',
|
||||
fields: ['name'],
|
||||
},
|
||||
{
|
||||
title: '面图层',
|
||||
layer: 'polygonLayer',
|
||||
fields: ['name'],
|
||||
},
|
||||
],
|
||||
trigger: 'mousemove',
|
||||
});
|
||||
pointLayer.on('mousemove', (e) => {
|
||||
console.log('point mousemove', e);
|
||||
});
|
||||
polygonLayer.on('mousemove', (e) => {
|
||||
console.log('polygon mousemove', e);
|
||||
});
|
||||
lineString.on('mousemove', (e) => {
|
||||
console.log('line mousemove', e);
|
||||
trigger: 'hover',
|
||||
});
|
||||
// pointLayer.on('mousemove', (e) => {
|
||||
// console.log('point mousemove', e);
|
||||
// });
|
||||
// polygonLayer.on('mousemove', (e) => {
|
||||
// console.log('polygon mousemove', e);
|
||||
// });
|
||||
// lineString.on('mousemove', (e) => {
|
||||
// console.log('line mousemove', e);
|
||||
// });
|
||||
|
||||
newScene.addPopup(newPopup);
|
||||
setPopup(newPopup);
|
||||
|
|
|
|||
|
|
@ -220,7 +220,7 @@ const Demo: FunctionComponent = () => {
|
|||
<button
|
||||
onClick={() => {
|
||||
popup?.setOptions({
|
||||
title: undefined,
|
||||
title: popup.getOptions().title ? undefined : 'Popup Title',
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import { Scene, RasterLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import { encodeParams, sign } from './signGenerator';
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 256;
|
||||
canvas.height = 256;
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
|
|
@ -8,42 +13,139 @@ export default () => {
|
|||
id: 'map',
|
||||
pickBufferScale: 1.0,
|
||||
map: new GaodeMap({
|
||||
center: [121.268, 30.3628],
|
||||
center: [127.471855, 46.509622], // 绥化市-北林区
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
const layerTile = new RasterLayer({
|
||||
zIndex: 1,
|
||||
});
|
||||
layerTile.source(
|
||||
'//t{0-4}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f1f2021a42d110057042177cd22d856f',
|
||||
{
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
tileSize: 256,
|
||||
const Base64toArrayBuffer = (base64Data) => {
|
||||
const padding = '='.repeat((4 - (base64Data.length % 4)) % 4);
|
||||
const base64 = (base64Data + padding).replace(/-/g, '+').replace(/_/g, '/');
|
||||
|
||||
const rawData = window.atob(base64);
|
||||
const outputArray = new Uint8Array(rawData.length);
|
||||
|
||||
for (let i = 0; i < rawData.length; ++i) {
|
||||
outputArray[i] = rawData.charCodeAt(i);
|
||||
}
|
||||
return outputArray;
|
||||
}
|
||||
|
||||
const getUrlQueryParams = (url = location.search): any => {
|
||||
const params = {};
|
||||
const keys = url.match(/([^?&]+)(?==)/g);
|
||||
const values = url.match(/(?<==)([^&]*)/g);
|
||||
for (const index in keys) {
|
||||
// @ts-ignore
|
||||
params[keys[index]] = values?.[index];
|
||||
}
|
||||
return params;
|
||||
};
|
||||
|
||||
|
||||
// const layerTile = new RasterLayer({
|
||||
// zIndex: 1,
|
||||
// });
|
||||
// layerTile.source(
|
||||
// '//t{0-4}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f1f2021a42d110057042177cd22d856f',
|
||||
// {
|
||||
// parser: {
|
||||
// type: 'rasterTile',
|
||||
// tileSize: 256,
|
||||
|
||||
},
|
||||
},
|
||||
);
|
||||
// },
|
||||
// },
|
||||
// );
|
||||
|
||||
const layerTile2 = new RasterLayer({
|
||||
zIndex: 0,
|
||||
});
|
||||
layerTile2.source(
|
||||
'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
||||
}).source(
|
||||
// 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
||||
`https://openapi.alipay.com/gateway.do?x={x}&y={y}&z={z}&index=1001&crow_type=101`,
|
||||
{
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
dataType:'customArrayBuffer',
|
||||
tileSize: 256,
|
||||
},
|
||||
|
||||
getCustomData: ({x,y,z},callback)=>{
|
||||
const biz_content = { x, y, z, index:1001, crow_type:101 };
|
||||
const newUrl = sign('anttech.ai.cv.rs.xytile.get', biz_content, {
|
||||
charset: 'utf-8',
|
||||
version: '1.0',
|
||||
});
|
||||
|
||||
const signStr = Object.keys(encodeParams(newUrl))
|
||||
.sort()
|
||||
.map((key) => {
|
||||
let data = encodeParams(newUrl)[key];
|
||||
if (Array.prototype.toString.call(data) !== '[object String]') {
|
||||
data = JSON.stringify(data);
|
||||
}
|
||||
return `${key}=${data}`;
|
||||
})
|
||||
.join('&');
|
||||
|
||||
const url = `https://openapi.alipay.com/gateway.do?${signStr}`;
|
||||
fetch(url).then(res=>res.json()).then(response=>{
|
||||
const bufferData = Base64toArrayBuffer(response?.anttech_ai_cv_rs_xytile_get_response?.image || '');
|
||||
callback(null, bufferData);
|
||||
|
||||
})
|
||||
},
|
||||
format: async (data: any) => {
|
||||
// console.log(bands)
|
||||
const blob: Blob = new Blob([new Uint8Array(data)], {
|
||||
type: 'image/png',
|
||||
});
|
||||
const img = await createImageBitmap(blob);
|
||||
ctx.clearRect(0, 0, 256, 256);
|
||||
ctx.drawImage(img, 0, 0, 256, 256);
|
||||
const imgData = ctx.getImageData(0, 0, 256, 256).data;
|
||||
const channelR: number[] = [];
|
||||
const channelG: number[] = [];
|
||||
const channelB: number[] = [];
|
||||
for (let i = 0; i < imgData.length; i += 4) {
|
||||
const R = imgData[i];
|
||||
const G = imgData[i + 1];
|
||||
const B = imgData[i + 2];
|
||||
channelR.push(R);
|
||||
channelG.push(G);
|
||||
channelB.push(B);
|
||||
}
|
||||
return [
|
||||
{ rasterData: channelR, width: 256, height: 256 },
|
||||
// { rasterData: channelG, width: 256, height: 256 },
|
||||
// { rasterData: channelB, width: 256, height: 256 },
|
||||
];
|
||||
},
|
||||
// operation: {
|
||||
// type:'rgb',
|
||||
// options:{
|
||||
// RMinMax:[0,255],
|
||||
// GMinMax:[0,255],
|
||||
// BMinMax:[0,255],
|
||||
// }
|
||||
// },
|
||||
}
|
||||
|
||||
},
|
||||
);
|
||||
layerTile2.style({
|
||||
opacity: 1,
|
||||
clampLow: false,
|
||||
clampHigh: false,
|
||||
domain: [0, 150],
|
||||
rampColors: {
|
||||
colors: ['rgba(0, 0, 0, 0)','rgba(0, 0, 0, 0)','#EAC300','#EAC300' ],
|
||||
positions: [0,0.2,0.6,1],
|
||||
},
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layerTile);
|
||||
// scene.addLayer(layerTile);
|
||||
scene.addLayer(layerTile2);
|
||||
});
|
||||
}, []);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
import moment from 'moment';
|
||||
import JSEncrypt from 'jsencrypt';
|
||||
import CryptoJS from 'crypto-js';
|
||||
|
||||
// const key =
|
||||
// 遥感地图网页应用 2021003154649392 私钥
|
||||
// 'MIIEpQIBAAKCAQEAmGPwXSi1MjuIvEh0Gl75d62tTQF/vzMkFDuLjx5RJ/DiSntXbmVV3ZJjICNOKLaWCemHvBerJfXtDQUAJWVo8FwJJQrla3oGHQp38vUNtRLGQQkozzWeSslaXZc/cEDLBfjogzk4jojEXuFpgbzY0BJZg+KHh6k7TK/Tf6Zrn19fxVojeAx8njguIjlDbZAtnaNYlq3fYIVzPX3nd/xTQmLwHKjeuJ626i+zdo57oNKHOOStX/0Isf6y4rj8cdPrmxfWDw86vV1Pd378sKL0vejOrS6TLoYG8sMGk8Fi//ecXnY1068vYl2tQOIqHiZb8XGCFIYoNWefvHPsufqkQwIDAQABAoIBAQCAnfDTn7T2tZqdVwVu8HPbF6Gp2bcJF8++p9cNLwhODpffRySuzyZegNva1xFzeU8/BHQEQ3G2805ka7EI3wNnwjYRppWlVXLtddVxIHS2PCdJ4sInyNhVxIXZcfsf8f+ohcEwZ84dNr+OWO+kiU/wpVwZ3MqIrEOZYNi/5yT0d8jdNNMsDGeGwGzULN/eIqgiF9l3vbn4w79WoUTOll6yxC/8ZYa9TX8yFWGKjElmr6K/c2x2NuRpToQgYv5iqN6m1biUNmkoqQ3cbysGAKP2Vb7S9GEjI6Kcp3TwfyrE65s7pS0aU6lNfuqzjNuulRDnxAXP2+fHSOcZBFQSu7TpAoGBAOPO+9jbezq6eQ9seruN8UMriTiFRU02E+HNihCbM2Vvwbb4wet25dJYL4TqRT+CawQA7XQ85/8QCl0mpUOFDJa6agYSby2Eai2IDZ5KxvdDNXDuQv+R4Wh2TV3xjK4tyrUZhYGZZ8g1MrxuilvR7/gG41pl0X28aDHxzjWgV4JtAoGBAKs/sccl4QbINq2AUB/rWKFv2SNVMTpq13/PtRCeVe49Gin9SpEuYm5XD/0n9hNRDiYul8Hwcq1ff5O+bEi+UJyqyVDjJs82onhCJOY+hWkTcluQCkjKNqKyTciys0gsZorY8/oxzkZ7aBQSkhZ4+ReR8tf2Ti46QTB1ft/55xNvAoGBAKINb6JIH1UbqVqLdJNO2b1Kjwah5zaRrXsHV5uQi/MwmMCsHGZ/4eTLzqHidPhEshPbBQ+W9AHBS14QS6fIUbg3S4yeOHBMratOCUH9N6RVLwLyur5K6+n/nfGiDs0ozfYd/Za/pdAJ59mbWNkQcoAhhkGcBHZJPGWq+WG0egvRAoGBAJnLPTS17w7xNjHBf7P634E0etTBiNGG7HyLpHgFSvUHiPzWzmXuO1YO+HwJrHSSodtmksII2GSd1GxyYrs9uBXLR7tOFSeZUHYiKRNiaNwCK/zRMntGp6Sb70FkQ6B4x6rAxvQWUMN5xvHn760g/cvONkL/oBziEnObwdMSkxUfAoGAQ2zEYHRAas8lichIbcrmfvtBUSfAKIEJO+rXeNoxjEKPHRERlCVnAs/O5OmxbB+oZzyrK16+LGM+3jnDEf0kdT49cqkMK1n8CJR2W9MrbK8jMFZOR0XW7vQ0J0vnc5R6vobf3U4jFq8nVK3ehOUicVIqre6LEiHKVQUqC3y+Vl4=';
|
||||
// 遥感地图网页应用 2021003154694648 私钥
|
||||
// 'MIIEpQIBAAKCAQEA1N165ud87194oMhMT4oCsoF+DenzjhRMEo4WxlSbWsyGRExQh7MSZ+aZZS8RWDLSfy3VNpUhpYllDiGg/Ng2q6SE4inU2O5IBghBKWJoznld+0CiUCKFEFukRYtUszedHiN5rlfE4E/PsUF0RiV8VRCPMdsHsfQvwYJ54CAuFKKcD4FLHrBmHb7X7D569gGJYEyf4L5iBxLoFgoiMnUwoY2SZr4ge+kW94RvNuUCWHDDA8o5/Z8SMztotrwRE1utHgqbPSV1wIn1vppQs8tH2qp8m0s5lT11iEqoJ6NPNlglU6s/4p7CV4genTvXOPyGqVKxz1i29m2LebU0khSwzwIDAQABAoIBAQCyEOBp3kXV3HCFV2j2tIWTG93997JFLVeBwhjtKgOXjjXXVlubWMJR5kZ1rUz+Ee2idA3DDjfKSUge7STFvnzlUsfShZnHKnVXjnosC2WPK1nh/2yISogzaeXeQzLEhQZLGvQEUumfl0QvjIie0WbTpfmThB1I0PNOFj6rrV++482DNdOfIGPAjWb+Id32vbQxgzUtFNsSno85l4EFRZQ9hfXsljxRuDeA4VLUWo7ZpOztNVO95emhAWgWQ2S0/YNgVO04UVVfiCQSqa80HpNz4l+4WnCQEDKrOA4kY64h988g7MG1bN9uaV9zQ6u6wh/Ijb4vvIL/ShwaQHvWtE5RAoGBAPJFgPcyv7Eatg6WMM+bW5ihf6Q2x3KUvocAtnhjLb0DNGsewJGknCU0dE5BQN0TdbV3H1mncLaBOl7XFT2Rvgs0KdUzCBi60uyMtFSRnty/UarE5vdUH8pKWX+OniRcMr9nYD1k/CxWrBKfhOwi8rxgaIJkbIjzHWzwKbZoeEvXAoGBAODtZSKmBc83v5fRR4eSr0QPDzjvzEOZc/g5AOzKhJx+2d496t25bULuxWEsHonvZweLNZraM2wV/lM6wLbmEj1FYHvcuU9TvInceqCbKcXSCkZOpqyuUKJGQVHIAswno07cekp2SFB+1OABYSvEWqVeYg3rqzVjGqVrvuBae2PJAoGBAMTzJbVPhzAVk9zl0cZj+KFq4JYBhkAqlXywYqYZkkwut8VBWbDMjbddHhOjznQqZq1fqpe6m9Fx2p7Q4M6NlV4MSNmtw64+6kss00hQnUG9MknOCikUNUfBC2K78OmEHiklg8JFPw9YYkg9b9R7ULM8+JjPxL/MS6aM0owb/3c/AoGBAKXir2okY7h19xmywTxdlGFvcdyeDln0vLDe6a25lqAMdgYQSD2KWei5TFzkOwmjxKqtorU4JCCc/9rGRAcgG2eQ2R3ApfK5YR2Tu+TjSqWYyPcdXpOQY+uqQNZd2qJSwYCR3qc4IREs2Tb0DYRH5kp8F3kIzFYtZyOFGVtBoCrxAoGAdZnOWrUyXx6OJg98+TtV5HMkNIVbdGjjoJvmvxgXnABHKbyRjnP4WxARQiiBga/qh07+Ovo4EkbyWf5oqkogzY+F969A5zeSQCuJ7Gu6HzBdjcAIRzq8hDqBiFSskYBFz/Ohn8JL8Y757JXYgjur6AppOk4KElC0o/ZOXkPjg7k=';
|
||||
// RSA 签名
|
||||
const encrypt = new JSEncrypt();
|
||||
// encrypt.setPrivateKey(key);
|
||||
|
||||
const AK = {
|
||||
appId: '2021003154694648', // 遥感地图网页应用
|
||||
key:
|
||||
'MIIEpQIBAAKCAQEA1N165ud87194oMhMT4oCsoF+DenzjhRMEo4WxlSbWsyGRExQh7MSZ+aZZS8RWDLSfy3VNpUhpYllDiGg/Ng2q6SE4inU2O5IBghBKWJoznld+0CiUCKFEFukRYtUszedHiN5rlfE4E/PsUF0RiV8VRCPMdsHsfQvwYJ54CAuFKKcD4FLHrBmHb7X7D569gGJYEyf4L5iBxLoFgoiMnUwoY2SZr4ge+kW94RvNuUCWHDDA8o5/Z8SMztotrwRE1utHgqbPSV1wIn1vppQs8tH2qp8m0s5lT11iEqoJ6NPNlglU6s/4p7CV4genTvXOPyGqVKxz1i29m2LebU0khSwzwIDAQABAoIBAQCyEOBp3kXV3HCFV2j2tIWTG93997JFLVeBwhjtKgOXjjXXVlubWMJR5kZ1rUz+Ee2idA3DDjfKSUge7STFvnzlUsfShZnHKnVXjnosC2WPK1nh/2yISogzaeXeQzLEhQZLGvQEUumfl0QvjIie0WbTpfmThB1I0PNOFj6rrV++482DNdOfIGPAjWb+Id32vbQxgzUtFNsSno85l4EFRZQ9hfXsljxRuDeA4VLUWo7ZpOztNVO95emhAWgWQ2S0/YNgVO04UVVfiCQSqa80HpNz4l+4WnCQEDKrOA4kY64h988g7MG1bN9uaV9zQ6u6wh/Ijb4vvIL/ShwaQHvWtE5RAoGBAPJFgPcyv7Eatg6WMM+bW5ihf6Q2x3KUvocAtnhjLb0DNGsewJGknCU0dE5BQN0TdbV3H1mncLaBOl7XFT2Rvgs0KdUzCBi60uyMtFSRnty/UarE5vdUH8pKWX+OniRcMr9nYD1k/CxWrBKfhOwi8rxgaIJkbIjzHWzwKbZoeEvXAoGBAODtZSKmBc83v5fRR4eSr0QPDzjvzEOZc/g5AOzKhJx+2d496t25bULuxWEsHonvZweLNZraM2wV/lM6wLbmEj1FYHvcuU9TvInceqCbKcXSCkZOpqyuUKJGQVHIAswno07cekp2SFB+1OABYSvEWqVeYg3rqzVjGqVrvuBae2PJAoGBAMTzJbVPhzAVk9zl0cZj+KFq4JYBhkAqlXywYqYZkkwut8VBWbDMjbddHhOjznQqZq1fqpe6m9Fx2p7Q4M6NlV4MSNmtw64+6kss00hQnUG9MknOCikUNUfBC2K78OmEHiklg8JFPw9YYkg9b9R7ULM8+JjPxL/MS6aM0owb/3c/AoGBAKXir2okY7h19xmywTxdlGFvcdyeDln0vLDe6a25lqAMdgYQSD2KWei5TFzkOwmjxKqtorU4JCCc/9rGRAcgG2eQ2R3ApfK5YR2Tu+TjSqWYyPcdXpOQY+uqQNZd2qJSwYCR3qc4IREs2Tb0DYRH5kp8F3kIzFYtZyOFGVtBoCrxAoGAdZnOWrUyXx6OJg98+TtV5HMkNIVbdGjjoJvmvxgXnABHKbyRjnP4WxARQiiBga/qh07+Ovo4EkbyWf5oqkogzY+F969A5zeSQCuJ7Gu6HzBdjcAIRzq8hDqBiFSskYBFz/Ohn8JL8Y757JXYgjur6AppOk4KElC0o/ZOXkPjg7k=',
|
||||
};
|
||||
|
||||
const openAPIConfig: any = {
|
||||
gateway: 'http://openapi.stable.dl.alipaydev.com/gateway.do',
|
||||
timeout: 5000,
|
||||
charset: 'utf-8',
|
||||
version: '1.0',
|
||||
appId: '2021003154694648',
|
||||
camelcase: false,
|
||||
};
|
||||
|
||||
export async function callByOpenAPI(
|
||||
method: string,
|
||||
// modelId: string,
|
||||
// version: string,
|
||||
// appId: string = '',
|
||||
bizContent: Object,
|
||||
) {
|
||||
const params = sign(method, bizContent, openAPIConfig);
|
||||
const encodedParams = encodeParams(params);
|
||||
// console.log('encodedParams :>> ', encodedParams);
|
||||
return encodedParams;
|
||||
}
|
||||
|
||||
/**
|
||||
* 签名
|
||||
* @description https://opendocs.alipay.com/common/02kf5q
|
||||
* @param {string} method 调用接口方法名，比如 alipay.ebpp.bill.add
|
||||
* @param {object} bizContent 业务请求参数
|
||||
* @param {object} config sdk 配置
|
||||
*/
|
||||
export function sign(method: string, bizContent: any = {}, config: any): any {
|
||||
const signParams = Object.assign({
|
||||
method,
|
||||
appId: config.appId || AK.appId,
|
||||
charset: config.charset,
|
||||
version: config.version,
|
||||
signType: 'RSA2',
|
||||
timestamp: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
// appAuthToken: '202210BB64237396751c42aa9c225985256e2D92',
|
||||
// ws_service_url: 'mysearchgw-36.gz00b.dev.alipay.net:12200', // 可选，开发环境需要传，预发环境不需要传
|
||||
});
|
||||
|
||||
encrypt.setPrivateKey(config.key || AK.key);
|
||||
|
||||
if (bizContent) {
|
||||
signParams.bizContent = JSON.stringify(toSnakeCases(bizContent));
|
||||
}
|
||||
|
||||
// params key 驼峰转下划线
|
||||
const deCamelizeParams = toSnakeCases(signParams);
|
||||
|
||||
// 排序
|
||||
const signStr = Object.keys(deCamelizeParams)
|
||||
.sort()
|
||||
.map((key) => {
|
||||
let data = deCamelizeParams[key];
|
||||
if (Array.prototype.toString.call(data) !== '[object String]') {
|
||||
data = JSON.stringify(data);
|
||||
}
|
||||
return `${key}=${data}`;
|
||||
})
|
||||
.join('&');
|
||||
|
||||
// console.log('signStr :>> ', signStr);
|
||||
|
||||
// 计算签名
|
||||
const sign = RSAEncrypt(signStr);
|
||||
return Object.assign(deCamelizeParams, { sign });
|
||||
}
|
||||
|
||||
function RSAEncrypt(signStr: string) {
|
||||
const start = Date.now();
|
||||
const encrypted = encrypt.sign(signStr, CryptoJS.SHA256, 'sha256');
|
||||
// console.log('encrypted :>> ', encrypted, Date.now() - start);
|
||||
return encrypted;
|
||||
}
|
||||
|
||||
function toSnakeCases(params: any) {
|
||||
const out: { [key in string]: any } = {};
|
||||
Object.keys(params).forEach((key) => {
|
||||
const newKey = key.replace(
|
||||
/([A-Z])/g,
|
||||
(match) => '_' + match.toLowerCase(),
|
||||
);
|
||||
out[newKey] = params[key];
|
||||
});
|
||||
return out;
|
||||
}
|
||||
|
||||
export function encodeParams(params: any) {
|
||||
const out: { [key in string]: any } = {};
|
||||
Object.keys(params).forEach((key) => {
|
||||
out[key] = encodeURIComponent(params[key]);
|
||||
});
|
||||
return out;
|
||||
}
|
||||
|
|
@ -3,6 +3,3 @@ raster 图片瓦片
|
|||
|
||||
#### 卫星图
|
||||
<code src="./raster/satellite.tsx"></code>
|
||||
|
||||
#### 图片瓦片 - 颜色映射
|
||||
<code src="./raster/imageDataMapping.tsx"></code>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
"registry": "https://registry.npmjs.org"
|
||||
}
|
||||
},
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
"url": "https://github.com/antvis/L7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antv/g2": "^3.5.9",
|
||||
"@antv/g2plot": "^2.3.40",
|
||||
"@antv/g2": "^4.2.8",
|
||||
"@antv/l7-district": "^2.3.9",
|
||||
"@antv/l7-draw": "^3.0.9",
|
||||
"@antv/l7-react": "^2.3.3",
|
||||
|
|
@ -155,7 +154,9 @@
|
|||
"webpack-merge": "^4.1.4",
|
||||
"wellknown": "^0.5.0",
|
||||
"worker-loader": "^2.0.0",
|
||||
"yorkie": "^2.0.0"
|
||||
"yorkie": "^2.0.0",
|
||||
"crypto-js": "^4.1.1",
|
||||
"jsencrypt": "^3.2.1"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "npm run worker && dumi dev",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-component",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "2.11.0",
|
||||
"@antv/l7-utils": "2.11.0",
|
||||
"@antv/l7-core": "2.11.2",
|
||||
"@antv/l7-utils": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
"supercluster": "^7.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antv/l7-test-utils": "2.11.0",
|
||||
"@antv/l7-test-utils": "2.11.2",
|
||||
"gcoord": "^0.3.2",
|
||||
"less": "^4.1.3"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default class Logo extends Control<ILogoControlOption> {
|
|||
return {
|
||||
position: PositionType.BOTTOMLEFT,
|
||||
name: 'logo',
|
||||
href: 'https://l7.antv.vision/',
|
||||
href: 'https://l7.antv.antgroup.com/',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GRb1TKp4HcMAAAAAAAAAAAAAARQnAQ',
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -422,7 +422,6 @@
|
|||
z-index: 5;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
}
|
||||
.l7-popup.l7-popup-hide {
|
||||
|
|
@ -431,15 +430,18 @@
|
|||
.l7-popup .l7-popup-content {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
pointer-events: auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
.l7-popup .l7-popup-content .l7-popup-content__title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.l7-popup .l7-popup-content .l7-popup-content__title,
|
||||
.l7-popup .l7-popup-content .l7-popup-content__panel {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
.l7-popup .l7-popup-content .l7-popup-close-button {
|
||||
position: absolute;
|
||||
|
|
@ -447,16 +449,17 @@
|
|||
right: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0 3px 0 0;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.l7-popup .l7-popup-tip {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
|
@ -468,12 +471,22 @@
|
|||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.l7-popup.l7-popup-anchor-bottom .l7-popup-tip,
|
||||
.l7-popup.l7-popup-anchor-bottom-left .l7-popup-tip,
|
||||
.l7-popup.l7-popup-anchor-bottom-right .l7-popup-tip {
|
||||
bottom: 1px;
|
||||
}
|
||||
.l7-popup.l7-popup-anchor-top,
|
||||
.l7-popup.l7-popup-anchor-top-left,
|
||||
.l7-popup.l7-popup-anchor-top-right {
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.l7-popup.l7-popup-anchor-top .l7-popup-tip,
|
||||
.l7-popup.l7-popup-anchor-top-left .l7-popup-tip,
|
||||
.l7-popup.l7-popup-anchor-top-right .l7-popup-tip {
|
||||
top: 1px;
|
||||
}
|
||||
.l7-popup.l7-popup-anchor-left {
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
|
|
@ -483,6 +496,7 @@
|
|||
flex-direction: row-reverse;
|
||||
}
|
||||
.l7-popup-anchor-top .l7-popup-tip {
|
||||
position: relative;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
border-top: none;
|
||||
|
|
@ -529,6 +543,7 @@
|
|||
border-left: none;
|
||||
}
|
||||
.l7-popup-anchor-right .l7-popup-tip {
|
||||
right: 1px;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
border-right: none;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
z-index: 5;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
&.l7-popup-hide {
|
||||
display: none;
|
||||
|
|
@ -16,15 +15,19 @@
|
|||
.l7-popup-content {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
pointer-events: auto;
|
||||
font-size: 14px;
|
||||
|
||||
.l7-popup-content__title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.l7-popup-content__title,
|
||||
.l7-popup-content__panel {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.l7-popup-close-button {
|
||||
|
|
@ -33,18 +36,19 @@
|
|||
right: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0 3px 0 0;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.l7-popup-tip {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
|
@ -56,6 +60,9 @@
|
|||
&.l7-popup-anchor-bottom-right {
|
||||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
.l7-popup-tip {
|
||||
bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.l7-popup-anchor-top,
|
||||
|
|
@ -63,6 +70,9 @@
|
|||
&.l7-popup-anchor-top-right {
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
.l7-popup-tip {
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.l7-popup-anchor-left {
|
||||
|
|
@ -77,6 +87,7 @@
|
|||
}
|
||||
|
||||
.l7-popup-anchor-top .l7-popup-tip {
|
||||
position: relative;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
border-top: none;
|
||||
|
|
@ -130,6 +141,7 @@
|
|||
}
|
||||
|
||||
.l7-popup-anchor-right .l7-popup-tip {
|
||||
right: 1px;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
border-right: none;
|
||||
|
|
|
|||
|
|
@ -5,16 +5,20 @@ import { get } from 'lodash';
|
|||
// import { Container } from 'inversify';
|
||||
import Popup from './popup';
|
||||
|
||||
type ElementType = DOM.ElementType;
|
||||
|
||||
export type LayerField = {
|
||||
field: string;
|
||||
formatField?: ((field: string) => string) | string;
|
||||
formatValue?: ((value: any) => any) | string;
|
||||
formatField?: ElementType | ((field: string, feature: any) => ElementType);
|
||||
formatValue?: ElementType | ((value: any, feature: any) => ElementType);
|
||||
getValue?: (feature: any) => any;
|
||||
};
|
||||
|
||||
export type LayerPopupConfigItem = {
|
||||
layer: ILayer | string;
|
||||
fields: Array<LayerField | string>;
|
||||
fields?: Array<LayerField | string>;
|
||||
title?: ElementType | ((feature: any) => ElementType);
|
||||
customContent?: ElementType | ((feature: any) => ElementType);
|
||||
};
|
||||
|
||||
export interface ILayerPopupOption extends IPopupOption {
|
||||
|
|
@ -86,6 +90,7 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
|
|||
},
|
||||
offsets: [0, 10],
|
||||
closeButton: false,
|
||||
closeOnClick: false,
|
||||
autoClose: false,
|
||||
closeOnEsc: false,
|
||||
};
|
||||
|
|
@ -158,15 +163,13 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
|
|||
|
||||
protected onLayerMouseMove(layer: ILayer, e: any) {
|
||||
if (!this.isSameFeature(layer, e.featureId)) {
|
||||
const frag = this.getLayerInfoFrag(layer, e);
|
||||
this.setDOMContent(frag);
|
||||
const { title, content } = this.getLayerInfoFrag(layer, e);
|
||||
this.setDOMContent(content);
|
||||
this.setTitle(title);
|
||||
this.displayFeatureInfo = {
|
||||
layer,
|
||||
featureId: e.featureId,
|
||||
};
|
||||
}
|
||||
|
||||
if (!this.isShow) {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
|
|
@ -183,14 +186,15 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
|
|||
if (this.isShow && this.isSameFeature(layer, e.featureId)) {
|
||||
this.hide();
|
||||
} else {
|
||||
const frag = this.getLayerInfoFrag(layer, e);
|
||||
this.setDOMContent(frag);
|
||||
const { title, content } = this.getLayerInfoFrag(layer, e);
|
||||
this.setDOMContent(content);
|
||||
this.setLnglat(e.lngLat);
|
||||
this.show();
|
||||
this.setTitle(title);
|
||||
this.displayFeatureInfo = {
|
||||
layer,
|
||||
featureId: e.featureId,
|
||||
};
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -207,9 +211,10 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
|
|||
* @param e
|
||||
* @protected
|
||||
*/
|
||||
protected getLayerInfoFrag(layer: ILayer, e: any): DocumentFragment {
|
||||
protected getLayerInfoFrag(layer: ILayer, e: any) {
|
||||
const layerInfo = this.layerConfigMap.get(layer);
|
||||
const frag = document.createDocumentFragment();
|
||||
let titleFrag: DocumentFragment | undefined;
|
||||
const contentFrag = document.createDocumentFragment();
|
||||
if (layerInfo) {
|
||||
let feature = e.feature;
|
||||
if (
|
||||
|
|
@ -219,29 +224,54 @@ export default class LayerPopup extends Popup<ILayerPopupOption> {
|
|||
) {
|
||||
feature = feature.properties;
|
||||
}
|
||||
const { fields } = layerInfo;
|
||||
fields?.forEach((fieldConfig) => {
|
||||
const { field, formatField, formatValue, getValue } =
|
||||
typeof fieldConfig === 'string'
|
||||
? // tslint:disable-next-line:no-object-literal-type-assertion
|
||||
({ field: fieldConfig } as LayerField)
|
||||
: fieldConfig;
|
||||
const row = DOM.create('div', 'l7-layer-popup__row');
|
||||
const value = getValue ? getValue(e.feature) : get(feature, field);
|
||||
const { title, fields, customContent } = layerInfo;
|
||||
|
||||
const fieldText =
|
||||
(formatField instanceof Function
|
||||
? formatField(field)
|
||||
: formatField) ?? field;
|
||||
const valueText =
|
||||
(formatValue instanceof Function
|
||||
? formatValue(value)
|
||||
: formatValue) ?? value;
|
||||
row.innerHTML = `<span class="l7-layer-popup__key">${fieldText}</span>: <span class="l7-layer-popup__value">${valueText}</span>`;
|
||||
frag.appendChild(row);
|
||||
});
|
||||
if (title) {
|
||||
titleFrag = document.createDocumentFragment();
|
||||
const titleElement = title instanceof Function ? title(feature) : title;
|
||||
DOM.appendElementType(titleFrag, titleElement);
|
||||
}
|
||||
|
||||
if (customContent) {
|
||||
const content =
|
||||
customContent instanceof Function
|
||||
? customContent(feature)
|
||||
: customContent;
|
||||
DOM.appendElementType(contentFrag, content);
|
||||
} else if (fields?.length) {
|
||||
fields?.forEach((fieldConfig) => {
|
||||
const { field, formatField, formatValue, getValue } =
|
||||
typeof fieldConfig === 'string'
|
||||
? // tslint:disable-next-line:no-object-literal-type-assertion
|
||||
({ field: fieldConfig } as LayerField)
|
||||
: fieldConfig;
|
||||
const row = DOM.create('div', 'l7-layer-popup__row');
|
||||
const value = getValue ? getValue(e.feature) : get(feature, field);
|
||||
|
||||
const fieldElement =
|
||||
(formatField instanceof Function
|
||||
? formatField(field, feature)
|
||||
: formatField) ?? field;
|
||||
|
||||
const valueElement =
|
||||
(formatValue instanceof Function
|
||||
? formatValue(value, feature)
|
||||
: formatValue) ?? value;
|
||||
|
||||
const fieldSpan = DOM.create('span', 'l7-layer-popup__key', row);
|
||||
DOM.appendElementType(fieldSpan, fieldElement);
|
||||
DOM.appendElementType(fieldSpan, document.createTextNode('：'));
|
||||
|
||||
const valueSpan = DOM.create('span', 'l7-layer-popup__value', row);
|
||||
DOM.appendElementType(valueSpan, valueElement);
|
||||
contentFrag.appendChild(row);
|
||||
});
|
||||
}
|
||||
}
|
||||
return frag;
|
||||
return {
|
||||
title: titleFrag,
|
||||
content: contentFrag,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import {
|
|||
IPopup,
|
||||
IPopupOption,
|
||||
ISceneService,
|
||||
PopupHTML,
|
||||
TYPES,
|
||||
} from '@antv/l7-core';
|
||||
import {
|
||||
|
|
@ -18,6 +17,8 @@ import { EventEmitter } from 'eventemitter3';
|
|||
import { Container } from 'inversify';
|
||||
import { createL7Icon } from '../utils/icon';
|
||||
|
||||
type ElementType = DOM.ElementType;
|
||||
|
||||
export { Popup };
|
||||
|
||||
export default class Popup<O extends IPopupOption = IPopupOption>
|
||||
|
|
@ -64,12 +65,6 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
*/
|
||||
protected contentPanel: HTMLElement;
|
||||
|
||||
/**
|
||||
* popup 内容标题
|
||||
* @protected
|
||||
*/
|
||||
protected title: HTMLElement;
|
||||
|
||||
/**
|
||||
* 气泡箭头对应的 DOM
|
||||
* @protected
|
||||
|
|
@ -124,12 +119,15 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
this.updateCloseOnEsc();
|
||||
this.updateFollowCursor();
|
||||
|
||||
const { html, text } = this.popupOption;
|
||||
const { html, text, title } = this.popupOption;
|
||||
if (html) {
|
||||
this.setHTML(html);
|
||||
} else if (text) {
|
||||
this.setText(text);
|
||||
}
|
||||
if (title) {
|
||||
this.setTitle(title);
|
||||
}
|
||||
this.emit('open');
|
||||
return this;
|
||||
}
|
||||
|
|
@ -171,6 +169,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
}
|
||||
|
||||
public setOptions(option: Partial<O>) {
|
||||
this.show();
|
||||
this.popupOption = {
|
||||
...this.popupOption,
|
||||
...option,
|
||||
|
|
@ -186,7 +185,6 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
'style',
|
||||
'lngLat',
|
||||
'offsets',
|
||||
'title',
|
||||
])
|
||||
) {
|
||||
if (this.container) {
|
||||
|
|
@ -194,6 +192,9 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
// @ts-ignore
|
||||
this.container = undefined;
|
||||
}
|
||||
if (this.popupOption.title) {
|
||||
this.setTitle(this.popupOption.title);
|
||||
}
|
||||
if (this.popupOption.html) {
|
||||
this.setHTML(this.popupOption.html);
|
||||
} else if (this.popupOption.text) {
|
||||
|
|
@ -214,9 +215,11 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
} else if (this.checkUpdateOption(option, ['text']) && option.text) {
|
||||
this.setText(option.text);
|
||||
}
|
||||
if (this.checkUpdateOption(option, ['title'])) {
|
||||
this.setTitle(option.title);
|
||||
}
|
||||
if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
|
||||
this.setLnglat(option.lngLat);
|
||||
this.show();
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
|
@ -259,9 +262,9 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
* 设置 HTML 内容
|
||||
* @param html
|
||||
*/
|
||||
public setHTML(html: PopupHTML) {
|
||||
public setHTML(html: ElementType) {
|
||||
this.popupOption.html = html;
|
||||
return this.setDOMContent(this.getPopupHTMLFragment(html));
|
||||
return this.setDOMContent(html);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -273,6 +276,28 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
return this.setDOMContent(window.document.createTextNode(text));
|
||||
}
|
||||
|
||||
public setTitle(title?: ElementType) {
|
||||
this.show();
|
||||
if (title) {
|
||||
if (!this.contentTitle) {
|
||||
this.contentTitle = DOM.create('div', 'l7-popup-content__title');
|
||||
if (this.content.firstChild) {
|
||||
this.content.insertBefore(
|
||||
this.contentTitle!,
|
||||
this.content.firstChild,
|
||||
);
|
||||
} else {
|
||||
this.content.append(this.contentTitle!);
|
||||
}
|
||||
}
|
||||
DOM.clearChildren(this.contentTitle!);
|
||||
DOM.appendElementType(this.contentTitle!, title);
|
||||
} else if (this.contentTitle) {
|
||||
DOM.remove(this.contentTitle);
|
||||
this.contentTitle = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将地图自动平移到气泡位置
|
||||
*/
|
||||
|
|
@ -293,6 +318,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
* @param lngLat
|
||||
*/
|
||||
public setLnglat(lngLat: ILngLat | [number, number]): this {
|
||||
this.show();
|
||||
this.lngLat = lngLat as ILngLat;
|
||||
if (Array.isArray(lngLat)) {
|
||||
this.lngLat = {
|
||||
|
|
@ -376,11 +402,12 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
|
||||
/**
|
||||
* 设置 Popup 内容 HTML
|
||||
* @param htmlNode
|
||||
* @param element
|
||||
*/
|
||||
protected setDOMContent(htmlNode: ChildNode | DocumentFragment) {
|
||||
protected setDOMContent(element: ElementType) {
|
||||
this.show();
|
||||
this.createContent();
|
||||
this.contentPanel.appendChild(htmlNode);
|
||||
DOM.appendElementType(this.contentPanel, element);
|
||||
this.update();
|
||||
return this;
|
||||
}
|
||||
|
|
@ -432,21 +459,9 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
if (this.content) {
|
||||
DOM.remove(this.content);
|
||||
}
|
||||
this.contentTitle = undefined;
|
||||
this.content = DOM.create('div', 'l7-popup-content', this.container);
|
||||
|
||||
if (this.popupOption.title) {
|
||||
this.contentTitle = DOM.create(
|
||||
'div',
|
||||
'l7-popup-content__title',
|
||||
this.content,
|
||||
);
|
||||
this.contentTitle?.append(
|
||||
this.getPopupHTMLFragment(this.popupOption.title),
|
||||
);
|
||||
} else {
|
||||
this.contentTitle = undefined;
|
||||
}
|
||||
|
||||
if (this.popupOption.closeButton) {
|
||||
const closeButton = createL7Icon('l7-icon-guanbi');
|
||||
DOM.addClass(closeButton, 'l7-popup-close-button');
|
||||
|
|
@ -553,30 +568,4 @@ export default class Popup<O extends IPopupOption = IPopupOption>
|
|||
protected checkUpdateOption(option: Partial<O>, keys: Array<keyof O>) {
|
||||
return keys.some((key) => key in option);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据参数 HTML 片段返回对应的 Fragment
|
||||
* @param html
|
||||
* @protected
|
||||
*/
|
||||
protected getPopupHTMLFragment(html: PopupHTML) {
|
||||
const frag = window.document.createDocumentFragment();
|
||||
const temp = window.document.createElement('body');
|
||||
let child: ChildNode | null;
|
||||
if (typeof html === 'string') {
|
||||
temp.innerHTML = html;
|
||||
} else if (Array.isArray(html)) {
|
||||
temp.append(...html);
|
||||
} else if (html instanceof HTMLElement) {
|
||||
temp.append(html);
|
||||
}
|
||||
while (true) {
|
||||
child = temp.firstChild;
|
||||
if (!child) {
|
||||
break;
|
||||
}
|
||||
frag.appendChild(child);
|
||||
}
|
||||
return frag;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-core",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.2.9",
|
||||
"@antv/l7-utils": "2.11.0",
|
||||
"@antv/l7-utils": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@turf/helpers": "^6.1.4",
|
||||
"ajv": "^6.10.2",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
import { anchorType } from '@antv/l7-utils';
|
||||
import { anchorType, DOM } from '@antv/l7-utils';
|
||||
import EventEmitter from 'eventemitter3';
|
||||
import { Container } from 'inversify';
|
||||
import { ILngLat } from '../map/IMapService';
|
||||
|
||||
export type PopupHTML = string | HTMLElement | HTMLElement[];
|
||||
|
||||
export interface IPopupOption {
|
||||
/**
|
||||
* 是否展示关闭按钮
|
||||
|
|
@ -79,12 +77,12 @@ export interface IPopupOption {
|
|||
/**
|
||||
* Popup 气泡的内置HTML
|
||||
*/
|
||||
html?: PopupHTML;
|
||||
html?: DOM.ElementType;
|
||||
|
||||
/**
|
||||
* Popup 气泡的标题
|
||||
*/
|
||||
title?: PopupHTML;
|
||||
title?: DOM.ElementType;
|
||||
|
||||
/**
|
||||
* 初始的经纬度位置
|
||||
|
|
@ -97,7 +95,7 @@ export interface IPopup extends EventEmitter {
|
|||
remove(): void;
|
||||
setLnglat(lngLat: ILngLat): this;
|
||||
getLnglat(): ILngLat;
|
||||
setHTML(html: PopupHTML): this;
|
||||
setHTML(html: DOM.ElementType): this;
|
||||
setText(text: string): this;
|
||||
setMaxWidth(maxWidth: string): this;
|
||||
isOpen(): boolean;
|
||||
|
|
|
|||
|
|
@ -1,36 +1,38 @@
|
|||
import { TilesetManager } from '@antv/l7-utils';
|
||||
import { RequestParameters, TilesetManager } from '@antv/l7-utils';
|
||||
import { BBox } from '@turf/helpers';
|
||||
export type DataType = string | object[] | object;
|
||||
export type SourceEventType = 'inited' | 'sourceUpdate' | 'update'
|
||||
import { RequestParameters } from "@antv/l7-utils";
|
||||
export type SourceEventType = 'inited' | 'sourceUpdate' | 'update';
|
||||
// 栅格瓦片解析配置项
|
||||
|
||||
export enum RasterTileType {
|
||||
IMAGE = 'image',
|
||||
ARRAYBUFFER = 'arraybuffer',
|
||||
RGB = 'rgb',
|
||||
CUSTOMRGB = 'customRGB',
|
||||
CUSTOMARRAYBUFFER = 'customArrayBuffer',
|
||||
}
|
||||
|
||||
export interface IGeojsonvtOptions {
|
||||
maxZoom: number; // max zoom to preserve detail on
|
||||
indexMaxZoom: number; // max zoom in the tile index
|
||||
indexMaxPoints: number; // max number of points per tile in the tile index
|
||||
tolerance: number; // simplification tolerance (higher means simpler)
|
||||
extent: number; // tile extent
|
||||
buffer: number; // tile buffer on each side
|
||||
lineMetrics: boolean; // whether to calculate line metrics
|
||||
promoteId: null; // name of a feature property to be promoted to feature.id
|
||||
generateId: boolean; // whether to generate feature ids. Cannot be used with promoteId
|
||||
debug: number; // logging level (0, 1 or 2)
|
||||
maxZoom: number; // max zoom to preserve detail on
|
||||
indexMaxZoom: number; // max zoom in the tile index
|
||||
indexMaxPoints: number; // max number of points per tile in the tile index
|
||||
tolerance: number; // simplification tolerance (higher means simpler)
|
||||
extent: number; // tile extent
|
||||
buffer: number; // tile buffer on each side
|
||||
lineMetrics: boolean; // whether to calculate line metrics
|
||||
promoteId: null; // name of a feature property to be promoted to feature.id
|
||||
generateId: boolean; // whether to generate feature ids. Cannot be used with promoteId
|
||||
debug: number; // logging level (0, 1 or 2)
|
||||
}
|
||||
export interface ITileParserCFG {
|
||||
type:string,
|
||||
type: string;
|
||||
tileSize?: number;
|
||||
minZoom?: number;
|
||||
maxZoom?: number;
|
||||
zoomOffset?: number;
|
||||
getCustomData: (tile: { x: number, y: number, z: number },cb:(err:any,data:any)=>void)=>void,
|
||||
extent?: [number, number, number, number];
|
||||
requestParameters: Partial<RequestParameters>
|
||||
requestParameters: Partial<RequestParameters>;
|
||||
updateStrategy?: 'overlap' | 'replace';
|
||||
// 指定 feature 编码 id
|
||||
featureId?: string;
|
||||
|
|
@ -42,10 +44,15 @@ export interface ITileParserCFG {
|
|||
|
||||
geojsonvtOptions?: IGeojsonvtOptions;
|
||||
|
||||
wmtsOptions: IWMTSServiceOption
|
||||
|
||||
wmtsOptions: IWMTSServiceOption;
|
||||
|
||||
format?: any;
|
||||
operation?: any;
|
||||
|
||||
// 用户自定义请求url
|
||||
getURLFromTemplate?: (template: string, properties: { x: number; y: number; z: number }) => string;
|
||||
// 用户自定义处理返回数据回调
|
||||
transformResponse?: (response: Object) => any;
|
||||
}
|
||||
|
||||
export interface IWMTSServiceOption {
|
||||
|
|
@ -76,7 +83,7 @@ export interface ITransform {
|
|||
export interface ISourceCFG {
|
||||
cluster?: boolean;
|
||||
clusterOptions?: Partial<IClusterOptions>;
|
||||
autoRender?:boolean,
|
||||
autoRender?: boolean;
|
||||
parser?: IParserCfg | ITileParserCFG;
|
||||
transforms?: ITransform[];
|
||||
}
|
||||
|
|
@ -118,7 +125,7 @@ export type IJsonData = IJsonItem[];
|
|||
|
||||
export interface ISource {
|
||||
inited: boolean;
|
||||
isTile: boolean
|
||||
isTile: boolean;
|
||||
data: IParserData;
|
||||
center: [number, number];
|
||||
parser: IParserCfg;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
# L7
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> English | [简体中文](./README.md)
|
||||
|
||||
<h1 align="center">L7</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
🌍 Large-scale WebGL-powered Geospatial data visualization analysis framework.
|
||||
|
||||
.
|
||||
[](https://travis-ci.com/antvis/L7) [](https://www.npmjs.com/package/@antv/l7) 
|
||||
|
||||
Large-scale WebGL-powered Geospatial data visualization analysis framework.
|
||||
<p align="center">
|
||||
<a href="https://l7.antv.antgroup.com/tutorial/quickstart">Tutorials</a> •
|
||||
<a href="https://l7.antv.antgroup.com/api/scene">API documentation</a> •
|
||||
<a href="https://l7.antv.antgroup.com/examples">Examples</a> •
|
||||
<a href="./.github/CONTRIBUTING.md">Contributor</a>
|
||||
</p>
|
||||
|
||||
[中文 README](./README.md)
|
||||
|
||||
|
||||
[GitHub](https://github.com/antvis/L7)
|
||||
</div>
|
||||
|
||||
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
|
||||
|
||||
[website](https://l7.antv.vision/zh)
|
||||
|
||||
## 🌄 L7 visualization demos
|
||||
|
||||
|
||||
|
||||
## 🌟 Highlight features of L7 2.0
|
||||
|
||||
- 🌏 Data-driven Visualization
|
||||
|
|
@ -81,20 +85,12 @@ const pointLayer = new PointLayer()
|
|||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## :memo: Documentation
|
||||
|
||||
- [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)
|
||||
- [Contributor documentation](./.github/CONTRIBUTING.md)
|
||||
|
||||
## 🔗 Links
|
||||
|
||||
- [L7Plot](https://github.com/antvis/L7Plot)
|
||||
- [L7 React](https://github.com/antvis/L7-React)
|
||||
- [L7 Boundary](https://github.com/antvis/L7-boundary)
|
||||
- [L7Draw](https://github.com/antvis/L7Draw)
|
||||
- [L7Plot](https://github.com/antvis/L7Plot)
|
||||
- [LarkMap](https://github.com/antvis/LarkMap)
|
||||
- [LocationInsight](https://locationinsight.antv.antgroup.com)
|
||||
|
||||
## ✅ License
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,28 @@
|
|||
## L7 地理空间数据可视分析引擎
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.en-US.md) | 简体中文
|
||||
|
||||
<h1 align="center">L7</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
🌍 地理空间数据可视分析引擎
|
||||
|
||||
[](https://travis-ci.com/antvis/L7) [](https://www.npmjs.com/package/@antv/l7) 
|
||||
|
||||
[README](./README.en-US.md)
|
||||
<p align="center">
|
||||
<a href="https://l7.antv.antgroup.com/tutorial/quickstart">教程</a> •
|
||||
<a href="https://l7.antv.antgroup.com/api/scene">文档</a> •
|
||||
<a href="https://l7.antv.antgroup.com/examples">示例</a> •
|
||||
<a href="./.github/CONTRIBUTING.md">贡献</a>
|
||||
</p>
|
||||
|
||||
[GitHub](https://github.com/antvis/L7)
|
||||
|
||||
|
||||
```bash
|
||||
git clone https://github.com/antvis/L7 --depth=1
|
||||
```
|
||||
</div>
|
||||
|
||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。
|
||||
|
||||
[官网地址](https://l7.antv.vision/zh)
|
||||
|
||||
L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。
|
||||
|
||||
|
||||
|
||||
## 🌟 核心特性
|
||||
|
||||
🌏 数据驱动可视化展示
|
||||
|
|
@ -113,20 +118,12 @@ const pointLayer = new PointLayer()
|
|||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## :memo: 文档
|
||||
|
||||
- [开始使用](https://l7.antv.vision/en/docs/api/l7)
|
||||
- [教程](https://l7.antv.vision/en/docs/tutorial/quickstart)
|
||||
- [文档](https://l7.antv.vision/en/docs/api/l7)
|
||||
- [示例](https://l7.antv.vision/en/examples/gallery/basic)
|
||||
- [贡献](./.github/CONTRIBUTING.md)
|
||||
|
||||
## 🔗 Links
|
||||
|
||||
- [L7Plot](https://github.com/antvis/L7Plot)
|
||||
- [L7 React](https://github.com/antvis/L7-React)
|
||||
- [L7 Boundary](https://github.com/antvis/L7-boundary)
|
||||
- [L7Draw](https://github.com/antvis/L7Draw)
|
||||
- [L7Plot](https://github.com/antvis/L7Plot)
|
||||
- [LarkMap](https://github.com/antvis/LarkMap)
|
||||
- [LocationInsight](https://locationinsight.antv.antgroup.com)
|
||||
|
||||
## ✅ License
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -26,13 +26,13 @@
|
|||
"author": "antv",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "2.11.0",
|
||||
"@antv/l7-core": "2.11.0",
|
||||
"@antv/l7-layers": "2.11.0",
|
||||
"@antv/l7-maps": "2.11.0",
|
||||
"@antv/l7-scene": "2.11.0",
|
||||
"@antv/l7-source": "2.11.0",
|
||||
"@antv/l7-utils": "2.11.0",
|
||||
"@antv/l7-component": "2.11.2",
|
||||
"@antv/l7-core": "2.11.2",
|
||||
"@antv/l7-layers": "2.11.2",
|
||||
"@antv/l7-maps": "2.11.2",
|
||||
"@antv/l7-scene": "2.11.2",
|
||||
"@antv/l7-source": "2.11.2",
|
||||
"@antv/l7-utils": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
const version = '2.11.0';
|
||||
const version = '2.11.2';
|
||||
export { version };
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-layers",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "L7's collection of built-in layers",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -27,10 +27,10 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.2.9",
|
||||
"@antv/l7-core": "2.11.0",
|
||||
"@antv/l7-maps": "2.11.0",
|
||||
"@antv/l7-source": "2.11.0",
|
||||
"@antv/l7-utils": "2.11.0",
|
||||
"@antv/l7-core": "2.11.2",
|
||||
"@antv/l7-maps": "2.11.2",
|
||||
"@antv/l7-source": "2.11.2",
|
||||
"@antv/l7-utils": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/martini": "^0.2.0",
|
||||
"@turf/clone": "^6.5.0",
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ export default class PixelPickingPlugin implements ILayerPlugin {
|
|||
model.addUniforms({
|
||||
u_PickingStage: PickingStage.HIGHLIGHT,
|
||||
u_PickingColor: pickedColor,
|
||||
u_HighlightColor: highlightColorInArray.map((c) => c * 255),
|
||||
// u_HighlightColor: highlightColorInArray.map((c) => c * 255),
|
||||
u_activeMix: selectMix,
|
||||
u_CurrentSelectedId: pickedColor,
|
||||
u_SelectColor: highlightColorInArray.map((c) => c * 255),
|
||||
|
|
|
|||
|
|
@ -36,8 +36,10 @@ export function getTileFactory(layer: ILayer) {
|
|||
const { dataType } = layer.getSource().parser;
|
||||
switch(dataType) {
|
||||
case 'rgb':
|
||||
case 'customRGB':
|
||||
return RasterRGBTile;
|
||||
case 'arraybuffer':
|
||||
case 'customArrayBuffer':
|
||||
return RasterTile
|
||||
case "terrainRGB" :
|
||||
return RasterTerrainRGBTile
|
||||
|
|
|
|||
|
|
@ -82,10 +82,10 @@ export default class BaseTileLayer {
|
|||
|
||||
if (this.mapService.version === 'GAODE1.x') {
|
||||
const { visible } = this.parent.getLayerConfig();
|
||||
if (zoom < 3 && visible) {
|
||||
if (zoom < 2 && visible) {
|
||||
this.parent.updateLayerConfig({ visible: false });
|
||||
this.layerService.reRender();
|
||||
} else if (zoom >= 3 && !visible) {
|
||||
} else if (zoom >= 2 && !visible) {
|
||||
this.parent.updateLayerConfig({ visible: true });
|
||||
this.layerService.reRender();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-map",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "l7 map",
|
||||
"keywords": [],
|
||||
"author": "thinkinggis <lzx199065@gmail.com>",
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
},
|
||||
"homepage": "https://github.com/antvis/L7#readme",
|
||||
"dependencies": {
|
||||
"@antv/l7-utils": "2.11.0",
|
||||
"@antv/l7-utils": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/point-geometry": "^0.1.0",
|
||||
"@mapbox/unitbezier": "^0.0.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-maps",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -27,9 +27,9 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@antv/l7-core": "2.11.0",
|
||||
"@antv/l7-map": "2.11.0",
|
||||
"@antv/l7-utils": "2.11.0",
|
||||
"@antv/l7-core": "2.11.2",
|
||||
"@antv/l7-map": "2.11.2",
|
||||
"@antv/l7-utils": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@types/amap-js-api": "^1.4.6",
|
||||
"@types/mapbox-gl": "^1.11.2",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-mini",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,11 +25,11 @@
|
|||
"author": "antv",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "2.11.0",
|
||||
"@antv/l7-layers": "2.11.0",
|
||||
"@antv/l7-maps": "2.11.0",
|
||||
"@antv/l7-scene": "2.11.0",
|
||||
"@antv/l7-utils": "2.11.0",
|
||||
"@antv/l7-core": "2.11.2",
|
||||
"@antv/l7-layers": "2.11.2",
|
||||
"@antv/l7-maps": "2.11.2",
|
||||
"@antv/l7-scene": "2.11.2",
|
||||
"@antv/l7-utils": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-renderer",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,12 +25,12 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@antv/l7-test-utils": "2.11.0",
|
||||
"@antv/l7-test-utils": "2.11.2",
|
||||
"gl": "^5.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "2.11.0",
|
||||
"@antv/l7-utils": "2.11.0",
|
||||
"@antv/l7-core": "2.11.2",
|
||||
"@antv/l7-utils": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"l7regl": "^0.0.20",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-scene",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -23,12 +23,12 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "2.11.0",
|
||||
"@antv/l7-core": "2.11.0",
|
||||
"@antv/l7-layers": "2.11.0",
|
||||
"@antv/l7-maps": "2.11.0",
|
||||
"@antv/l7-renderer": "2.11.0",
|
||||
"@antv/l7-utils": "2.11.0",
|
||||
"@antv/l7-component": "2.11.2",
|
||||
"@antv/l7-core": "2.11.2",
|
||||
"@antv/l7-layers": "2.11.2",
|
||||
"@antv/l7-maps": "2.11.2",
|
||||
"@antv/l7-renderer": "2.11.2",
|
||||
"@antv/l7-utils": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
"reflect-metadata": "^0.1.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antv/l7-test-utils": "2.11.0"
|
||||
"@antv/l7-test-utils": "2.11.2"
|
||||
},
|
||||
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,23 @@
|
|||
import { defineConfig } from 'dumi';
|
||||
const path = require('path');
|
||||
const env = process.env.NODE_ENV;
|
||||
console.log(env)
|
||||
console.log(env);
|
||||
export default defineConfig({
|
||||
locales: [{ id: 'zh', name: '中文' }, { id: 'en', name: 'English' }],
|
||||
|
||||
copy: env ==='production' ? ['docs/CNAME'] : [],
|
||||
themeConfig: {
|
||||
title: 'L7',
|
||||
isAntVSite: false,
|
||||
internalSite: {
|
||||
url: 'https://l7.antv.antgroup.com',
|
||||
name: {
|
||||
zh: '国内镜像',
|
||||
en: 'China Mirror',
|
||||
},
|
||||
},
|
||||
description:
|
||||
'Large-scale WebGL-powered Geospatial data visualization analysis framework',
|
||||
siteUrl: 'https://l7.antv.vision',
|
||||
siteUrl: 'https://l7.antv.antgroup.com/',
|
||||
githubUrl: 'https://github.com/antvis/L7',
|
||||
keywords:
|
||||
'l7, L7, antv/l7, 地理, 空间可视化, Webgl, webgl, 地图, webgis, 3d, GIS, gis, Mapbox, deckgl, g2, g6, antv,',
|
||||
|
|
@ -22,17 +29,19 @@ export default defineConfig({
|
|||
en: 'L7 Geospatial Visualization',
|
||||
},
|
||||
description: {
|
||||
zh: '蚂蚁集团 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。',
|
||||
zh:
|
||||
'蚂蚁集团 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。',
|
||||
en: 'Geospatial Data Visualization Analysis Engine',
|
||||
},
|
||||
image: 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cCI7RaJs46AAAAAAAAAAAABkARQnAQ',
|
||||
image:
|
||||
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cCI7RaJs46AAAAAAAAAAAABkARQnAQ',
|
||||
buttons: [
|
||||
{
|
||||
text: {
|
||||
zh: '开始使用',
|
||||
en: 'Getting Started',
|
||||
},
|
||||
link: `docs/api/l7`,
|
||||
link: `/tutorial/quickstart`,
|
||||
},
|
||||
{
|
||||
text: {
|
||||
|
|
@ -44,7 +53,7 @@ export default defineConfig({
|
|||
},
|
||||
],
|
||||
},
|
||||
msfu:true,
|
||||
msfu:false,
|
||||
features: [
|
||||
{
|
||||
icon:
|
||||
|
|
@ -55,7 +64,8 @@ export default defineConfig({
|
|||
},
|
||||
description: {
|
||||
zh: '支持地图底图，渲染引擎，图层自由定制、扩展，组合',
|
||||
en: 'Support many basemap, many rendering engine, and layer free customization, extension, combination',
|
||||
en:
|
||||
'Support many basemap, many rendering engine, and layer free customization, extension, combination',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -67,7 +77,8 @@ export default defineConfig({
|
|||
},
|
||||
description: {
|
||||
zh: '以图形符号学地理设计体系理论基础，易用、易理解、专业、专注',
|
||||
en: 'Generating high quality statistical charts through a few lines of code.',
|
||||
en:
|
||||
'Generating high quality statistical charts through a few lines of code.',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -79,7 +90,8 @@ export default defineConfig({
|
|||
},
|
||||
description: {
|
||||
zh: '支持海量数据，2D、3D，动态，可交互，高性能渲染',
|
||||
en: 'Support many basemap, many rendering engine, and layer free customization, extension, combination',
|
||||
en:
|
||||
'Support many basemap, many rendering engine, and layer free customization, extension, combination',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -92,7 +104,8 @@ export default defineConfig({
|
|||
},
|
||||
description: {
|
||||
zh: '区域化网格化数据管理指挥分配场景',
|
||||
en: 'We are now working on some advanced and powerful chart features.',
|
||||
en:
|
||||
'We are now working on some advanced and powerful chart features.',
|
||||
},
|
||||
link: 'https://antv.vision/Dipper/~demos/docs-task',
|
||||
image:
|
||||
|
|
@ -106,7 +119,8 @@ export default defineConfig({
|
|||
},
|
||||
description: {
|
||||
zh: '区域化网格化数据分析场景',
|
||||
en: 'We are now working on some advanced and powerful chart features.',
|
||||
en:
|
||||
'We are now working on some advanced and powerful chart features.',
|
||||
},
|
||||
link: 'https://antv.vision/Dipper/~demos/docs-analysis',
|
||||
image:
|
||||
|
|
@ -121,10 +135,11 @@ export default defineConfig({
|
|||
},
|
||||
title: {
|
||||
zh: 'L7 从矢量到遥感，从引擎到平台，探索地理分析的远方',
|
||||
en: 'From vector to remote sensing, from engine to platform, explore the distance of geographical analysis',
|
||||
en:
|
||||
'From vector to remote sensing, from engine to platform, explore the distance of geographical analysis',
|
||||
},
|
||||
date: '2022.11.22',
|
||||
link: 'https://www.yuque.com/xiaofengcanyue/scpehq/fgcwge',
|
||||
link: 'https://www.yuque.com/antv/blog/zrz77eat2m4wb7yk',
|
||||
},
|
||||
],
|
||||
navs: [
|
||||
|
|
@ -154,59 +169,67 @@ export default defineConfig({
|
|||
],
|
||||
cases: [
|
||||
{
|
||||
logo: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-kafQrA1ky4AAAAAAAAAAAAADmJ7AQ/fmt.webp',
|
||||
logo:
|
||||
'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-kafQrA1ky4AAAAAAAAAAAAADmJ7AQ/fmt.webp',
|
||||
title: {
|
||||
zh: 'LarkMap 空间数据可视分析组件库',
|
||||
en: 'LarkMap ',
|
||||
},
|
||||
description: {
|
||||
zh: '新一代 React 地图可视分析组件库，提供丰富/高效/专业/易用的可视化组件，一站式满足地理可视化需求。',
|
||||
en: 'The new generation of React map visual analysis component library provides rich/efficient/professional/easy-to-use visual components to meet the needs of geographic visualization in a one-stop manner.',
|
||||
zh:
|
||||
'新一代 React 地图可视分析组件库，提供丰富/高效/专业/易用的可视化组件，一站式满足地理可视化需求。',
|
||||
en:
|
||||
'The new generation of React map visual analysis component library provides rich/efficient/professional/easy-to-use visual components to meet the needs of geographic visualization in a one-stop manner.',
|
||||
},
|
||||
link: `https://larkmap.antv.antgroup.com/`,
|
||||
image: 'https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*5iCQSqov5p4AAAAAAAAAAAAADmJ7AQ/fmt.webp',
|
||||
image:
|
||||
'https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*5iCQSqov5p4AAAAAAAAAAAAADmJ7AQ/fmt.webp',
|
||||
isAppLogo: true,
|
||||
},
|
||||
{
|
||||
logo: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yaEWT706NFoAAAAAAAAAAAAADmJ7AQ/original',
|
||||
logo:
|
||||
'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yaEWT706NFoAAAAAAAAAAAAADmJ7AQ/original',
|
||||
title: {
|
||||
zh: 'LocationInsight 空间数据可视分析组件库',
|
||||
en: 'LocationInsight',
|
||||
},
|
||||
description: {
|
||||
zh: '下一代地理空间数据可视分析平台，可配置出丰富的地理可视化效果提供洞察分析、地图应用搭建、开放扩展能力',
|
||||
en: 'The next generation geospatial data visual analysis platform can be configured with rich geographic visualization effects to provide insight analysis, map application construction, and open expansion capabilities',
|
||||
zh:
|
||||
'下一代地理空间数据可视分析平台，可配置出丰富的地理可视化效果提供洞察分析、地图应用搭建、开放扩展能力',
|
||||
en:
|
||||
'The next generation geospatial data visual analysis platform can be configured with rich geographic visualization effects to provide insight analysis, map application construction, and open expansion capabilities',
|
||||
},
|
||||
link: `https://larkmap.antv.antgroup.com/`,
|
||||
image: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*tR2BTIG6Bz8AAAAAAAAAAAAADmJ7AQ/original',
|
||||
image:
|
||||
'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*tR2BTIG6Bz8AAAAAAAAAAAAADmJ7AQ/original',
|
||||
isAppLogo: true,
|
||||
},
|
||||
],
|
||||
ecosystems: [
|
||||
{
|
||||
name: {
|
||||
zh: 'LarkMap 地图空间可视化组件库',
|
||||
zh: 'LarkMap',
|
||||
en: 'L7 For React',
|
||||
},
|
||||
url: 'https://larkmap.antv.antgroup.com/',
|
||||
},
|
||||
{
|
||||
name: {
|
||||
zh: 'L7 Plot 图表库',
|
||||
zh: 'L7Plot',
|
||||
en: 'L7Plot',
|
||||
},
|
||||
url: 'https://l7plot.antv.vision/',
|
||||
url: 'https://l7plot.antv.antgroup.com/',
|
||||
},
|
||||
{
|
||||
name: {
|
||||
zh: 'L7 地理围栏绘制组件库',
|
||||
zh: 'L7Draw',
|
||||
en: 'L7Draw',
|
||||
},
|
||||
url: 'http://antv.vision/L7Draw/',
|
||||
},
|
||||
{
|
||||
name: {
|
||||
zh: 'LocationInsight 地理空间数据可视分析平台',
|
||||
zh: 'LocationInsight',
|
||||
en: 'LocationInsight',
|
||||
},
|
||||
url: 'https://li.antv.antgroup.com/#/home',
|
||||
|
|
@ -380,7 +403,7 @@ export default defineConfig({
|
|||
en: 'TileLayer',
|
||||
},
|
||||
order: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
slug: 'api/other',
|
||||
title: {
|
||||
|
|
@ -592,7 +615,7 @@ export default defineConfig({
|
|||
indexName: 'antv_l7',
|
||||
},
|
||||
},
|
||||
extraBabelPlugins: env === 'development'? [
|
||||
extraBabelPlugins:[
|
||||
// 开发模式下以原始文本引入，便于调试
|
||||
[
|
||||
// import glsl as raw text
|
||||
|
|
@ -600,13 +623,12 @@ export default defineConfig({
|
|||
{ extensions: ['.glsl','.worker.js'] },
|
||||
],
|
||||
// ['transform-import-css-l7'],
|
||||
]:[],
|
||||
links: [
|
||||
],
|
||||
links: [],
|
||||
scripts: [
|
||||
'https://webapi.amap.com/maps?v=2.0&key=ff533602d57df6f8ab3b0fea226ae52f'
|
||||
'https://webapi.amap.com/maps?v=2.0&key=ff533602d57df6f8ab3b0fea226ae52f',
|
||||
],
|
||||
alias: env === 'development'? {
|
||||
alias: {
|
||||
'@antv/l7': path.resolve(__dirname, '../l7/src'),
|
||||
'@antv/l7-mini': path.resolve(__dirname, '../mini/src'),
|
||||
'@antv/l7-maps/lib/map': path.resolve(__dirname, '../maps/src/map'),
|
||||
|
|
@ -620,5 +642,5 @@ export default defineConfig({
|
|||
'@antv/l7-scene': path.resolve(__dirname, '../scene/src'),
|
||||
'@antv/l7-source': path.resolve(__dirname, '../source/src'),
|
||||
'@antv/l7-utils': path.resolve(__dirname, '../utils/src')
|
||||
}:{}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
l7.antv.vision
|
||||
|
|
@ -61,7 +61,7 @@ scene.on('loaded', () => {
|
|||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| --------- | -------------------------------------------------- | -------------------------- |
|
||||
| imageType | 截图图片的格式 | `'png'` | `'jpeg'` |
|
||||
| imageType | 截图图片的格式 | `'png'` \| `'jpeg'` |
|
||||
| onExport | 截图成功后，用于接收图片 `Base64` 字符串的回调函数 | `(base64: string) => void` |
|
||||
|
||||
<embed src="@/docs/common/control/btn-api.md"></embed>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ scene.on('loaded', () => {
|
|||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ----------- | --------------------------------- | --------------------------------- |
|
||||
| exitBtnIcon | 退出全屏按钮的图标 | `HTMLElement` | `SVGElement` |
|
||||
| exitBtnIcon | 退出全屏按钮的图标 | `HTMLElement` \| `SVGElement` |
|
||||
| exitBtnText | 退出全屏按钮的文本 | `string` |
|
||||
| exitTitle | 退出全屏按钮的文本的 `title` 属性 | `string` |
|
||||
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@ scene.on('loaded', () => {
|
|||
|
||||
## 配置
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ------ | ------------------------------------------------------------------------------------------ | ---------------------- |
|
||||
| layers | 需要被控制的 `layer` 数组，支持传入图层示例或者图层 id，不传则默认读取当前 L7 中所有的图层 | `Array<ILayer|string>` |
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ------ | ------------------------------------------------------------------------------------------ | ------------------------- |
|
||||
| layers | 需要被控制的 `layer` 数组，支持传入图层示例或者图层 id，不传则默认读取当前 L7 中所有的图层 | `Array<ILayer \| string>` |
|
||||
|
||||
<embed src="@/docs/common/control/popper-api.md"></embed>
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ scene.on('loaded', () => {
|
|||
img:
|
||||
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*GRb1TKp4HcMAAAAAAAAAAAAAARQnAQ',
|
||||
// 跳转地址
|
||||
href: 'https://l7.antv.vision/',
|
||||
href: 'https://l7.antv.antgroup.com',
|
||||
});
|
||||
scene.addControl(logo);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ scene.on('loaded', () => {
|
|||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ------------ | ----------------------- | ------------------------- |
|
||||
| zoomInText | 放大按钮的展示内容 | `Element` | `string` |
|
||||
| zoomInText | 放大按钮的展示内容 | `Element` \| `string` |
|
||||
| zoomInTitle | 放大按钮的 `title` 属性 | `string` |
|
||||
| zoomOutText | 缩小按钮的展示内容 | `Element` | `string` |
|
||||
| zoomOutText | 缩小按钮的展示内容 | `Element` \| `string` |
|
||||
| zoomOutTitle | 缩小按钮的 `title` 属性 | `string` |
|
||||
|
||||
<embed src="@/docs/common/control/api.md"></embed>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ LayerPopup 会自行对目标图层的鼠标事件进行监听，当用户点击
|
|||
## 使用
|
||||
|
||||
[示例](/examples/component/popup#layerpopup)
|
||||
[自定义内容示例](/zh/examples/component/popup/#customContent)
|
||||
|
||||
```ts
|
||||
import { Scene, LayerPopup, PointLayer } from '@antv/l7';
|
||||
|
|
@ -69,37 +70,47 @@ scene.on('loaded', () => {
|
|||
| 名称 | 说明 | 类型 | 默认值 |
|
||||
| ------- | --------------------------------------------------------------------------------------------- | ----------------------------- | --------- |
|
||||
| items | 需要展示 Popup 的图层配置数组，每个选项类型可见 [LayerPopupConfigItem](#layerpopupconfigitem) | `Array<LayerPopupConfigItem>` | `[]` |
|
||||
| trigger | 鼠标触发 Popup 展示的方式 | `'hover' | 'click'` | `'hover'` |
|
||||
| trigger | 鼠标触发 Popup 展示的方式 | `'hover' \| 'click'` | `'hover'` |
|
||||
|
||||
### LayerPopupConfigItem
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ------ | ------------------------------------------------------------------------------------------------- | --------------------- |
|
||||
| layer | 需要展示 Popup 的目标图层实例，或其的 `id` 或 `name` | `BaseLayer | string` |
|
||||
| fields | 需要展示的字段数组，支持传入字段 key 值字符串，或者针对该字段的详细配置 [LayerField](#layerfield) | `string | LayerField` |
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
|
||||
| layer | 需要展示 Popup 的目标图层实例，或其的 `id` 或 `name` | `BaseLayer` \| `string` |
|
||||
| fields | 需要展示的字段数组，支持传入字段 key 值字符串，或者针对该字段的详细配置 [LayerField](#layerfield) | `string` \| `LayerField` |
|
||||
| customContent | 自定义气泡内容，支持直接传入自定义内容或者通过回调函数返回自定义内容两种方式，与 `fields` 共存下优先读取该配置并渲染 | `ElementType \| ((feature: any) => ElementType)` |
|
||||
| title | 自定义气泡标题，支持直接传入自定义内容或者通过回调函数返回自定义内容两种方式 | `ElementType \| ((feature: any) => ElementType)` |
|
||||
|
||||
### LayerField
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ----------- | --------------------------- | --------------------------- |
|
||||
| field | 字段的 key 值字符串 | `string` |
|
||||
| formatField | 对展示的 key 字段进行格式化 | `(field: string) => string | string` |
|
||||
| formatValue | 对展示的 value 值进行格式化 | `(value: any) => any | string` |
|
||||
| getValue | 自定义获取值的方式 | `(feature: any) => any` |
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ----------- | --------------------------- | --------------------------------------------------------------- |
|
||||
| field | 字段的 key 值字符串 | `string` |
|
||||
| formatField | 对展示的 key 字段进行格式化 | `ElementType \| ((field: string, feature: any) => ElementType)` |
|
||||
| formatValue | 对展示的 value 值进行格式化 | `ElementType \| ((value: any, feature: any) => ElementType)` |
|
||||
| getValue | 自定义获取值的方式 | `(feature: any) => any` |
|
||||
|
||||
### ElementType
|
||||
|
||||
```ts
|
||||
type ElementType =
|
||||
| HTMLElement
|
||||
| HTMLElement[]
|
||||
| DocumentFragment
|
||||
| Text
|
||||
| string;
|
||||
```
|
||||
|
||||
## 方法
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ---------- | --------------------------- | ------------------------------------------------------------------- |
|
||||
| getOptions | 获取当前 Popup 配置 | `() => IPopupOption` |
|
||||
| setOptions | 更新当前 Popup 配置 | `(newOption: Partial<IPopupOption>) => this` |
|
||||
| show | 显示 Popup | `() => this` |
|
||||
| hide | 隐藏 Popup | `() => this` |
|
||||
| getIsShow | 判断当前气泡是否展示 | `() => boolean` |
|
||||
| setHTML | 设置 Popup 内容展示的 HTML | `(html: string | HTMLElement | HTMLElement[]) => this` |
|
||||
| setText | 设置 Popup 内容展示的文本 | `(text: string) => this` |
|
||||
| setLngLat | 设置 Popup 锚点所在经纬度 | `(lngLat: { lng: number; lat: number } | [number, number]) => this` |
|
||||
| panToPopup | 将地图平移至当前 Popup 位置 | `() => this` |
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ---------- | --------------------------- | -------------------------------------------------------------------- |
|
||||
| getOptions | 获取当前 Popup 配置 | `() => IPopupOption` |
|
||||
| setOptions | 更新当前 Popup 配置 | `(newOption: Partial<IPopupOption>) => this` |
|
||||
| show | 显示 Popup | `() => this` |
|
||||
| hide | 隐藏 Popup | `() => this` |
|
||||
| setLngLat | 设置 Popup 锚点所在经纬度 | `(lngLat: { lng: number; lat: number } \| [number, number]) => this` |
|
||||
| panToPopup | 将地图平移至当前 Popup 位置 | `() => this` |
|
||||
|
||||
## 事件
|
||||
|
||||
|
|
|
|||
|
|
@ -57,28 +57,39 @@ scene.on('loaded', () => {
|
|||
|
||||
## 配置
|
||||
|
||||
| 名称 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------------------------------------------------ | -------------------------------------- |------------|
|
||||
| lngLat | Popup 所在的经纬度 | `{ lng: number; lat: number }` | - |
|
||||
| text | Popup 内容展示的文本内容 | `string` | - |
|
||||
| html | Popup 内容展示的自定义 HTML，可以传 HTML 字符串，也可以传 DOM 对象或数组 | `string | HTMLElement | HTMLElement[]` | - |
|
||||
| title | Popup 标题展示的自定义 HTML，可以传 HTML 字符串，也可以传 DOM 对象或数组 | `string | HTMLElement | HTMLElement[]` | - |
|
||||
| closeOnClick | 点击地图区域时，是否关闭当前 Popup | `boolean` | `false` |
|
||||
| closeOnEsc | 点击 Esc 键时，是否关闭当前 Popup | `boolean` | `false` |
|
||||
| maxWidth | Popup 的最大宽度 | `string` | `240px` |
|
||||
| anchor | Popup 箭头位置，可以控制 Popup 相对于经纬度点的展示位置 | [AnchorType](#anchortype) | `'bottom'` |
|
||||
| offsets | Popup 相对于锚点的偏移 | `[number, number]` | `[0, 0]` |
|
||||
| autoPan | 当 Popup 展示或者位置发生变化时，地图是否要自动平移至 Popup 所在位置 | `boolean` | `false` |
|
||||
| autoClose | 当有其他 Popup 展示时，是否自动关闭当前气泡 | `boolean` | `true` |
|
||||
| followCursor | Popup 是否跟随光标移动，若设为 `true`，则 `lngLat` 配置无效 | `boolean` | `false` |
|
||||
| closeButton | 是否展示关闭 Popup 图标 | `boolean` | `true` |
|
||||
| closeButtonOffsets | 关闭 Popup 图标的相对偏移 | `[number, number]` | - |
|
||||
| stopPropagation | Popup 上的鼠标事件是否要阻止其冒泡 | `boolean` | `true` |
|
||||
| 名称 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------------------------------------------------ | ------------------------------ | ---------- |
|
||||
| lngLat | Popup 所在的经纬度 | `{ lng: number; lat: number }` | - |
|
||||
| text | Popup 内容展示的文本内容 | `string` | - |
|
||||
| html | Popup 内容展示的自定义 HTML，可以传 HTML 字符串，也可以传 DOM 对象或数组 | [ElementType](#elementtype) | - |
|
||||
| title | Popup 标题展示的自定义 HTML，可以传 HTML 字符串，也可以传 DOM 对象或数组 | [ElementType](#elementtype) | - |
|
||||
| closeOnClick | 点击地图区域时，是否关闭当前 Popup | `boolean` | `false` |
|
||||
| closeOnEsc | 点击 Esc 键时，是否关闭当前 Popup | `boolean` | `false` |
|
||||
| maxWidth | Popup 的最大宽度 | `string` | `240px` |
|
||||
| anchor | Popup 箭头位置，可以控制 Popup 相对于经纬度点的展示位置 | [AnchorType](#anchortype) | `'bottom'` |
|
||||
| offsets | Popup 相对于锚点的偏移 | `[number, number]` | `[0, 0]` |
|
||||
| autoPan | 当 Popup 展示或者位置发生变化时，地图是否要自动平移至 Popup 所在位置 | `boolean` | `false` |
|
||||
| autoClose | 当有其他 Popup 展示时，是否自动关闭当前气泡 | `boolean` | `true` |
|
||||
| followCursor | Popup 是否跟随光标移动，若设为 `true`，则 `lngLat` 配置无效 | `boolean` | `false` |
|
||||
| closeButton | 是否展示关闭 Popup 图标 | `boolean` | `true` |
|
||||
| closeButtonOffsets | 关闭 Popup 图标的相对偏移 | `[number, number]` | - |
|
||||
| stopPropagation | Popup 上的鼠标事件是否要阻止其冒泡 | `boolean` | `true` |
|
||||
|
||||
### ElementType
|
||||
|
||||
```ts
|
||||
type ElementType =
|
||||
| HTMLElement
|
||||
| HTMLElement[]
|
||||
| DocumentFragment
|
||||
| Text
|
||||
| string;
|
||||
```
|
||||
|
||||
### AnchorType
|
||||
|
||||
```ts
|
||||
export type AnchorType =
|
||||
type AnchorType =
|
||||
| 'center'
|
||||
| 'top'
|
||||
| 'top-left'
|
||||
|
|
@ -92,17 +103,18 @@ export type AnchorType =
|
|||
|
||||
## 方法
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ---------- | --------------------------- | ------------------------------------------------------------------- |
|
||||
| getOptions | 获取当前 Popup 配置 | `() => IPopupOption` |
|
||||
| setOptions | 更新当前 Popup 配置 | `(newOption: Partial<IPopupOption>) => this` |
|
||||
| show | 显示 Popup | `() => this` |
|
||||
| hide | 隐藏 Popup | `() => this` |
|
||||
| getIsShow | 判断当前气泡是否展示 | `() => boolean` |
|
||||
| setHTML | 设置 Popup 内容展示的 HTML | `(html: string | HTMLElement | HTMLElement[]) => this` |
|
||||
| setText | 设置 Popup 内容展示的文本 | `(text: string) => this` |
|
||||
| setLngLat | 设置 Popup 锚点所在经纬度 | `(lngLat: { lng: number; lat: number } | [number, number]) => this` |
|
||||
| panToPopup | 将地图平移至当前 Popup 位置 | `() => this` |
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ---------- | --------------------------- | -------------------------------------------------------------------- |
|
||||
| getOptions | 获取当前 Popup 配置 | `() => IPopupOption` |
|
||||
| setOptions | 更新当前 Popup 配置 | `(newOption: Partial<IPopupOption>) => this` |
|
||||
| show | 显示 Popup | `() => this` |
|
||||
| hide | 隐藏 Popup | `() => this` |
|
||||
| getIsShow | 判断当前气泡是否展示 | `() => boolean` |
|
||||
| setTitle | 设置 Popup 标题展示的 HTML | `(title: ElementType) => this` |
|
||||
| setHTML | 设置 Popup 内容展示的 HTML | `(html: ElementType) => this` |
|
||||
| setText | 设置 Popup 内容展示的文本 | `(text: string) => this` |
|
||||
| setLngLat | 设置 Popup 锚点所在经纬度 | `(lngLat: { lng: number; lat: number } \| [number, number]) => this` |
|
||||
| panToPopup | 将地图平移至当前 Popup 位置 | `() => this` |
|
||||
|
||||
## 事件
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
|
||||
`style` 方法用于配制图层的样式，
|
||||
- 单通道 绘制结果由是单一的数值控制，如灰度图，数值对应的颜色可以通过表示配置 `rampColors` 色带控制。
|
||||
|
||||
```js
|
||||
layer.style({
|
||||
opacity: 0.5,
|
||||
});
|
||||
```
|
||||
|
||||
### 配置
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ----------- | ------------------ | ------------------------------------------- | ------------- |
|
||||
| opacity | `number` | 图形的透明度 | `1` |
|
||||
| clampLow | `boolean` | 设置为 `true`，低于 `domain` 的数据将不显示 | `false` |
|
||||
| clampHigh | `boolean` | 设置为 `true`，高于 `domain` 的数据将不显示 | `false` |
|
||||
| domain | `[number, number]` | 数据映射区间 | `[ 0, 8000 ]` |
|
||||
| noDataValue | `number` | 不会显示的值 | `-9999999` |
|
||||
| rampColors | `IRampColors` | 值域映射颜色的色带 | `/` |
|
||||
|
||||
#### rampColors
|
||||
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
配置值域映射颜色的色带，值域的范围为 `[0 - 1]`, 对应的我们需要为每一个 `position` 位置设置一个颜色值。
|
||||
|
||||
⚠️ colors, positions 的长度要相同
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
rampColors: {
|
||||
colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'],
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
|
@ -1,14 +1,4 @@
|
|||
---
|
||||
title: Style
|
||||
order: 4
|
||||
---
|
||||
|
||||
<embed src="@/docs/common/style.md"></embed>
|
||||
|
||||
`style` 方法用于配制图层的样式，栅格图层在绘制单通道的栅格和多通道的栅格时拥有不同的 `style` 参数。
|
||||
|
||||
- 单通道 绘制结果由是单一的数值控制，如灰度图，数值对应的颜色可以通过表示配置 `rampColors` 色带控制。
|
||||
- 多通道 绘制结果由 `r`、`g`、`b` 三个通道的数值控制，波段计算返回结果直接作为 `sRGB` 的颜色。
|
||||
|
||||
```js
|
||||
layer.style({
|
||||
|
|
@ -16,7 +6,7 @@ layer.style({
|
|||
});
|
||||
```
|
||||
|
||||
### raster 单通道栅格
|
||||
### options
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ----------- | ------------------ | ------------------------------------------- | ------------- |
|
||||
|
|
@ -44,11 +34,3 @@ layer.style({
|
|||
},
|
||||
});
|
||||
```
|
||||
|
||||
### raster 多通道栅格
|
||||
|
||||
当我们使用栅格图层绘制彩色遥感影像的时候，`style` 支持参数只有 `opacity`。不再根据 `rampColors` 色带取值，而是根据 `rgb` 通道的波段数据作为颜色值。
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ------- | -------- | ------------ | ------ |
|
||||
| opacity | `number` | 图形的透明度 | `1` |
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Options
|
||||
order: 1
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/raster_layer/options.zh.md"></embed>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
title: Options
|
||||
order: 1
|
||||
---
|
||||
|
||||
<embed src="@/docs/common/style.md"></embed>
|
||||
|
||||
<embed src="@/docs/common/layer/options.md"></embed>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: RasterLayer 波段计算
|
||||
order: 3
|
||||
---
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Raster
|
||||
order: 0
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/raster_layer/raster_layer.zh.md"></embed>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: RasterLayer
|
||||
title: Raster 栅格瓦片
|
||||
order: 0
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,21 @@
|
|||
title: RasterLayer 多波段计算
|
||||
order: 2
|
||||
---
|
||||
|
||||
<embed src="@/docs/common/style.md"></embed>
|
||||
|
||||
## 简介
|
||||
|
||||
多波段数据叠加计算着色。
|
||||
|
||||
## Option
|
||||
|
||||
<embed src="@/docs/common/layer/options.md"></embed>
|
||||
|
||||
## source
|
||||
|
||||
<embed src="@/docs/api/source/raster/raster_band_calc.md"></embed>
|
||||
|
||||
## style
|
||||
|
||||
<embed src="@/docs/api/raster_layer/common/style.md"></embed>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: RasterLayer Multi band
|
||||
order: 0
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/raster_layer/raster_multi_band.zh.md"></embed>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: RasterLayer Multi band
|
||||
order: 0
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/raster_layer/raster_rgb.zh.md"></embed>
|
||||
|
|
@ -19,5 +19,10 @@ order: 1
|
|||
|
||||
## style
|
||||
|
||||
- opacity
|
||||
透明度
|
||||
### opacity 透明度
|
||||
|
||||
```js
|
||||
layer.style({
|
||||
opacity: 0.5,
|
||||
});
|
||||
```
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@ title: RasterLayer single band
|
|||
order: 0
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/raster_layer/raster_layer.zh.md"></embed>
|
||||
<embed src="@/docs/api/raster_layer/raster_single_band.zh.md"></embed>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@ order: 0
|
|||
|
||||
## 简介
|
||||
|
||||
单波段栅格数据渲染、根据栅格数据进行可视化着色
|
||||
|
||||
## Option
|
||||
|
||||
<embed src="@/docs/common/layer/options.md"></embed>
|
||||
|
||||
`RasterLayer` 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
|
||||
|
||||
## source
|
||||
|
|
@ -15,39 +21,4 @@ order: 0
|
|||
|
||||
## style
|
||||
|
||||
- 单通道 绘制结果由是单一的数值控制，如灰度图，数值对应的颜色可以通过表示配置 `rampColors` 色带控制。
|
||||
|
||||
```js
|
||||
layer.style({
|
||||
opacity: 0.5,
|
||||
});
|
||||
```
|
||||
|
||||
### options
|
||||
|
||||
| style | 类型 | 描述 | 默认值 |
|
||||
| ----------- | ------------------ | ------------------------------------------- | ------------- |
|
||||
| opacity | `number` | 图形的透明度 | `1` |
|
||||
| clampLow | `boolean` | 设置为 `true`，低于 `domain` 的数据将不显示 | `false` |
|
||||
| clampHigh | `boolean` | 设置为 `true`，高于 `domain` 的数据将不显示 | `false` |
|
||||
| domain | `[number, number]` | 数据映射区间 | `[ 0, 8000 ]` |
|
||||
| noDataValue | `number` | 不会显示的值 | `-9999999` |
|
||||
| rampColors | `IRampColors` | 值域映射颜色的色带 | `/` |
|
||||
|
||||
#### rampColors
|
||||
|
||||
- colors 颜色数组
|
||||
- positions 数据区间
|
||||
|
||||
配置值域映射颜色的色带，值域的范围为 `[0 - 1]`, 对应的我们需要为每一个 `position` 位置设置一个颜色值。
|
||||
|
||||
⚠️ colors, positions 的长度要相同
|
||||
|
||||
```javascript
|
||||
layer.style({
|
||||
rampColors: {
|
||||
colors: ['#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C'],
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
```
|
||||
<embed src="@/docs/api/raster_layer/common/style.md"></embed>
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Source
|
||||
order: 2
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/raster_layer/source.zh.md"></embed>
|
||||
|
|
@ -1,257 +0,0 @@
|
|||
---
|
||||
title: Source
|
||||
order: 2
|
||||
---
|
||||
|
||||
<embed src="@/docs/common/style.md"></embed>
|
||||
|
||||
栅格图层接受的并不是矢量的地理数据（GeoJSON），而是栅格数据。同时支持传入多种数据格式，入 `tiff`、`lerc` 等。
|
||||
|
||||
```js
|
||||
const source = new Source(data, {
|
||||
parser: {...},
|
||||
});
|
||||
```
|
||||
|
||||
### 加载未解析的栅格数据
|
||||
|
||||
我们可以直接将请求到的栅格文件的二进制数据直接传递给栅格图层使用，此时我们不仅仅可以选择加载多波段的数据，同时还可以对栅格数据进行简单的数学计算。
|
||||
|
||||
- 对多（单）波段的数据进行数学运算。
|
||||
- 绘制彩色遥感影像（真、假彩色）。
|
||||
- 需要提供解析栅格数据的标准方法。
|
||||
|
||||
```js
|
||||
// 对单波段数据进行运算
|
||||
async function getTiffData() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
|
||||
);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer;
|
||||
}
|
||||
const tiffdata = await getTiffData();
|
||||
const layer = new RasterLayer({});
|
||||
layer.source(
|
||||
[
|
||||
{
|
||||
data: tiffdata,
|
||||
bands: [0],
|
||||
},
|
||||
],
|
||||
{
|
||||
parser: {
|
||||
type: 'raster',
|
||||
format: async (data, bands) => {
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(data);
|
||||
const imageCount = await tiff.getImageCount();
|
||||
const image = await tiff.getImage(bands[0]);
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return { rasterData: values[0], width, height };
|
||||
},
|
||||
operation: ['*', ['band', 0], 0.5],
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
#### data: IBandsData[] | IBandsData
|
||||
|
||||
用户可以直接传入栅格文件的二进制数据。
|
||||
|
||||
- 支持传入多文件的数据。
|
||||
- 支持指定某个栅格文件要提取的波段。
|
||||
|
||||
```js
|
||||
interface IBandsData {
|
||||
data: ArrayBuffer; // 请求加载的栅格文件的二进制数据
|
||||
bands?: number[]; // 指定加载该栅格文件的波段
|
||||
}
|
||||
// 默认加载 0 波段的数据
|
||||
const source = new Source({ data: tiffData });
|
||||
// 指定加载 tiffData 0 波段的数据
|
||||
// 指定加载 tiffData2 0、1 波段的数据
|
||||
const source2 = new Source([
|
||||
{ data: tiffData, bands: [0] },
|
||||
{ data: tiffData2, bands: [0, 1] },
|
||||
]);
|
||||
```
|
||||
|
||||
#### parser
|
||||
|
||||
<description> _IParser_ **必选** </description>
|
||||
|
||||
为使用栅格数据的使用提供必要的参数和方法。
|
||||
|
||||
```js
|
||||
interface IParser {
|
||||
type: string;
|
||||
format: IRasterFormat;
|
||||
operation: IOperation;
|
||||
extent: number[];
|
||||
}
|
||||
```
|
||||
|
||||
##### type
|
||||
|
||||
<description> _string_ **必选** </description>
|
||||
|
||||
- 输出结果为单通道数据的时候值为 raster
|
||||
- 输出结果为多通道彩色的时候值为 rasterRgb
|
||||
|
||||
##### format: IRasterFormat
|
||||
|
||||
<description> _IFormat_ **必选** </description>
|
||||
|
||||
`format` 方法用于从传入的栅格文件二进制数据中提取波段数据。
|
||||
|
||||
- 第一个参数是栅格文件二进制数据。
|
||||
- 第二个参数是第一个参数指定的栅格文件中应该提取的波段，方法参数是我们通过 `source` 参数传递的 `data` 数值。
|
||||
- `format` 是一个 `async` 方法。
|
||||
|
||||
```js
|
||||
interface IRasterData {
|
||||
rasterData: HTMLImageElement | Uint8Array | ImageBitmap | null | undefined;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
type IRasterFormat = (
|
||||
data: ArrayBuffer,
|
||||
bands: number[],
|
||||
) => Promise<IRasterData | IRasterData[]>;
|
||||
|
||||
const source = new Source(data, {
|
||||
parser: {
|
||||
format: async (data, bands) => {
|
||||
...
|
||||
return {
|
||||
rasterData: bandData,
|
||||
width: 256;
|
||||
height: 256;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
1. `format` 方法的返回值为栅格数据（`rasterData`）以及表示大小的 `width`、`height` 参数。
|
||||
2. `format` 方法可以返回多份数据，表示从当前栅格文件中提取多份波段的数据。
|
||||
|
||||
##### operation: IOperation
|
||||
|
||||
<description> _IOperation_ **可选** </description>
|
||||
|
||||
在加载多波段数据的时候我们可以通过 `operation` 配置波段数据的运算。
|
||||
|
||||
🌟 我们可以不配置 `operation`，此时默认使用第一个栅格文件提取的第一个波段数据
|
||||
|
||||
1. `operation` 可以是一个函数，`allbands` 是我们从所有栅格文件中提取的所有波段数据的集合。
|
||||
|
||||
```js
|
||||
const parser = {
|
||||
operation: (allBands) => {
|
||||
// operation 可以是一个函数，allbands 是我们从所有栅格文件中提取的所有波段数据的集合，
|
||||
// 在设立 allbands 就是 [band0]
|
||||
// 函数的返回值是单纯的波段数据，在这里我们直接返回第一个波段的数据
|
||||
return allBands[0].rasterData;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
2. `operation` 可以是以数组形式存在的计算表达式.
|
||||
|
||||
```js
|
||||
// 下面表达式可以转述为 band1 * 0.5，表示将波段1 的值都乘上 0.5 并返回
|
||||
const parser = {
|
||||
operation: ['*', ['band', 1], 0.5],
|
||||
};
|
||||
```
|
||||
|
||||
3. `operation` 可以嵌套使用：`['+', ['*', ['band', 0], 0.2], ['band', 1]]]`，返回结果为：`band0 * 0.2 + band1`。
|
||||
|
||||
4. `operation` 可以直接指定结果：`['band', 0]`。
|
||||
|
||||
5. `operation` 支持以下的数学运算。
|
||||
|
||||
```js
|
||||
/** 数学运算 根据计算表达式进行数学运算
|
||||
* * * Math operators:
|
||||
* `['*', value1, value2]` 返回 `value1 * value2`
|
||||
* `['/', value1, value2]` 返回 `value1 / value2`
|
||||
* `['+', value1, value2]` 返回 `value1 + value2`
|
||||
* `['-', value1, value2]` 返回 `value2 - value1`
|
||||
* `['%', value1, value2]` 返回 `value1 % value2`
|
||||
* `['^', value1, value2]` 返回 `value1 ^ value2`
|
||||
* `['abs', value1]` 返回 `Math.abs(value1)`
|
||||
* `['floor', value1]` 返回 `Math.floor(value1)`
|
||||
* `['round', value1]` 返回 `Math.round(value1)`
|
||||
* `['ceil', value1]` 返回 `Math.ceil(value1)`
|
||||
* `['sin', value1]` 返回 `Math.sin(value1)`
|
||||
* `['cos', value1]` 返回 `Math.cos(value1)`
|
||||
* `['atan', value1, value2]` 返回 `n1===-1?Math.atan(n1): Math.atan2(n1, n2)`
|
||||
*/
|
||||
```
|
||||
|
||||
##### extent
|
||||
|
||||
<description> _number[]_ **必选** </description>
|
||||
|
||||
`extent` 描述的是栅格数据覆盖的地理区间，数值指定的是区域的经纬度区间（左下角和右上角）。
|
||||
|
||||
### 加载多通道（彩色）影像
|
||||
|
||||
我们在使用多波段数据的时候支持根据多波段数据绘制彩色遥感影像，如下图的假彩色影像。
|
||||
|
||||
<div>
|
||||
<div style="width:60%;float:left; margin: 10px;">
|
||||
<img width="80%" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*jO7kTpuDiOQAAAAAAAAAAAAAARQnAQ'>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### data: IBandsData[] | IBandsData
|
||||
|
||||
绘制多通道影像的时候，需要加载多波段数据
|
||||
|
||||
#### parser
|
||||
|
||||
使用栅格数据的使用提供必要的参数和方法， 具体使用和多波段栅格的 `parser` 保持一致。
|
||||
|
||||
##### type
|
||||
|
||||
<description> _string_ **必选** </description>
|
||||
|
||||
- 输出结果为多通道彩色的时候值为 `rasterRgb`。
|
||||
|
||||
##### format: IRasterFormat
|
||||
|
||||
<description> _IFormat_ **必选** </description>
|
||||
|
||||
绘制多通道影像的时候，使用通用的 `format`函数。
|
||||
|
||||
##### operation: IOperation
|
||||
|
||||
<description> _IOperation_ **必选** </description>
|
||||
|
||||
为了绘制多通道影像，我们必须要提供 `operation` 配置指定多通道数据。
|
||||
|
||||
1. 在渲染彩色多通道栅格的时候需要额外使用 parser，同时彩色栅格图层不再支持 domain、rampColor 等参数，渲染的结果直接由波段计算出的 r、g、b 通道的数值结果控制。
|
||||
|
||||
2. 彩色栅格不再兼容旧的数据传值方式（直接传入解析完的栅格数据。
|
||||
|
||||
```js
|
||||
const source = new Source(data, { // 彩色栅格和单通道栅格使用相同的规则
|
||||
parser: {
|
||||
type: 'rasterRgb', // 使用独立的 type 类型
|
||||
format: async (data, bands) {...}, // 彩色栅格和单通道栅格 format 使用相同
|
||||
// operation 为对象，分别为 rgb 三通道指定计算表达式
|
||||
// operation 必须要配置
|
||||
operation: {
|
||||
r: ['*', ['band', 1], 0.5],
|
||||
g: ['band', 1],
|
||||
b: undefined // 缺省配置表达式的通道会默认取 0 号波段的值
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Style
|
||||
order: 4
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/raster_layer/style.zh.md"></embed>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
### data
|
||||
|
||||
|
||||
### parser
|
||||
|
||||
#### format
|
||||
|
||||
`format` 方法用于从传入的栅格文件二进制数据中提取波段数据。
|
||||
|
||||
- 第一个参数是栅格文件二进制数据
|
||||
|
||||
- 第二个参数是第一个参数指定的栅格文件中应该提取的波段
|
||||
|
||||
- `format` 是一个 `async` 方法。
|
||||
|
||||
#### operation 快捷计算
|
||||
归一化指数
|
||||
|
||||
```ts
|
||||
{
|
||||
type:'nd'
|
||||
}
|
||||
```
|
||||
|
||||
#### operation 表达式
|
||||
|
||||
- 示例一
|
||||
|
||||
```ts
|
||||
// band1 * 0.5
|
||||
{
|
||||
operation: ['*', ['band', 1], 0.5],
|
||||
};
|
||||
```
|
||||
|
||||
- 示例二 嵌套使用
|
||||
|
||||
```ts
|
||||
// band0 * 0.2 + band1
|
||||
{
|
||||
operation:['+', ['*', ['band', 0], 0.2], ['band', 1]]]
|
||||
};
|
||||
```
|
||||
|
||||
- 示例三 归一化指数
|
||||
|
||||
```ts
|
||||
// 植被指数计算
|
||||
{
|
||||
operation:['/',
|
||||
['-', ['band', 1], ['band', 0]], // R > NIR
|
||||
['+', ['band', 1], ['band', 0]]
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
- operation 表达式类型
|
||||
|
||||
- *`['*', value1, value2]` 返回 `value1 * value2`
|
||||
- / `['/', value1, value2]` 返回 `value1 / value2`
|
||||
- +`['+', value1, value2]` 返回 `value1 + value2`
|
||||
- -`['-', value1, value2]` 返回 `value2 - value1`
|
||||
- % `['%', value1, value2]` 返回 `value1 % value2`
|
||||
- ^ `['^', value1, value2]` 返回 `value1 ^ value2`
|
||||
- abs`['abs', value1]` 返回 `Math.abs(value1)`
|
||||
- floor `['floor', value1]` 返回 `Math.floor(value1)`
|
||||
- round `['round', value1]` 返回 `Math.round(value1)`
|
||||
- ceil `['ceil', value1]` 返回 `Math.ceil(value1)`
|
||||
- sin `['sin', value1]` 返回 `Math.sin(value1)`
|
||||
- cos `['cos', value1]` 返回 `Math.cos(value1)`
|
||||
- atan `['atan', value1, value2]` 返回 `n1===-1?Math.atan(n1):
|
||||
|
||||
|
||||
|
||||
|
|
@ -60,17 +60,37 @@ layer.source(
|
|||
},
|
||||
)
|
||||
|
||||
```
|
||||
#### 多文件多波段
|
||||
|
||||
```ts
|
||||
|
||||
const urls = [
|
||||
{
|
||||
url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff',
|
||||
bands: [0]
|
||||
},
|
||||
{
|
||||
url: 'https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff'
|
||||
},
|
||||
...
|
||||
]
|
||||
const tileSource = new Source(urls, {...});
|
||||
```
|
||||
|
||||
### parser
|
||||
|
||||
- type: `rasterRgb`
|
||||
#### type: `rasterRgb`
|
||||
多波段数据影像合成
|
||||
- extent: 栅格的经纬度范围 [minlng, minlat,maxLng, maxLat]
|
||||
#### extent: 栅格的经纬度范围 [minlng, minlat,maxLng, maxLat]
|
||||
|
||||
#### operation 合成方式
|
||||
rgb 会自动根据最大值最小值进行拉伸处理
|
||||
|
||||
- operation 合成方式
|
||||
- type `rgb`
|
||||
- format 数据处理方法，栅格数据解析方式
|
||||
|
||||
#### format 数据处理方法，栅格数据解析方式
|
||||
|
||||
- 入参数：
|
||||
- data: source 传入参数
|
||||
- bands 波段序号
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
## data
|
||||
### data
|
||||
|
||||
data 解析后的数据，为数组
|
||||
|
||||
|
|
@ -39,7 +39,7 @@ layer.source(tiffdata.data, {
|
|||
});
|
||||
```
|
||||
|
||||
## parser
|
||||
### parser
|
||||
|
||||
- type: raster
|
||||
- extent: 栅格的经纬度范围 [minlng, minlat,maxLng, maxLat]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Raster RGB
|
||||
order: 5
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/source/raster/raster_rgb.md"></embed>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Raster RGB
|
||||
order: 5
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/source/raster/raster_rgb.md"></embed>
|
||||
|
|
@ -31,6 +31,4 @@ const layer = new PointLayer({
|
|||
const layer = new PointLayer({
|
||||
featureId: 'id',
|
||||
});
|
||||
```
|
||||
|
||||
<embed src="@/docs/common/layer/options.md"></embed>
|
||||
```
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: GeoJsonVT TileLayer
|
||||
title: GeoJsonVT 瓦片
|
||||
order: 0
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Options
|
||||
order: 1
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/tile/options.zh.md"></embed>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Raster TileLayer
|
||||
title: Raster 栅格瓦片
|
||||
order: 0
|
||||
---
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ order: 0
|
|||
| 栅格瓦片 | `RasterLayer` | `rasterTile` | `arraybuffer` | 数据栅格 |
|
||||
| 栅格瓦片 | `RasterLayer` | `rasterTile` | `rgb` | 彩色遥感影像栅格 |
|
||||
|
||||
🌟 目前只支持 `GCJ-02` 火星坐标系。
|
||||
🌟 目前只支持 3857 坐标系
|
||||
|
||||
### source(url: string, option: IOption)
|
||||
|
||||
|
|
@ -205,60 +205,6 @@ const source = new Source(data, {
|
|||
})
|
||||
```
|
||||
|
||||
1. `format` 方法的返回值为栅格数据（`rasterData`）以及表示大小的 `width`、`height` 参数。
|
||||
2. `format` 方法可以返回多份数据，表示从当前栅格文件中提取多份波段的数据。
|
||||
## style
|
||||
|
||||
##### operation: IOperation
|
||||
|
||||
<description> _IOperation_ **可选** </description>
|
||||
|
||||
在加载多波段数据的时候我们可以通过 `operation` 配置波段数据的运算。
|
||||
|
||||
🌟 我们可以不配置 `operation`，此时默认使用第一个栅格文件提取的第一个波段数据
|
||||
|
||||
1. `operation` 可以是一个函数，`allbands` 是我们从所有栅格文件中提取的所有波段数据的集合。
|
||||
|
||||
```js
|
||||
const parser = {
|
||||
operation: (allBands) => {
|
||||
// operation 可以是一个函数，allbands 是我们从所有栅格文件中提取的所有波段数据的集合，
|
||||
// 在设立 allbands 就是 [band0]
|
||||
// 函数的返回值是单纯的波段数据，在这里我们直接返回第一个波段的数据
|
||||
return allBands[0].rasterData;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
2. `operation` 可以是以数组形式存在的计算表达式.
|
||||
|
||||
```js
|
||||
// 下面表达式可以转述为 band1 * 0.5，表示将波段1 的值都乘上 0.5 并返回
|
||||
const parser = {
|
||||
operation: ['*', ['band', 1], 0.5],
|
||||
};
|
||||
```
|
||||
|
||||
3. `operation` 可以嵌套使用：`['+', ['*', ['band', 0], 0.2], ['band', 1]]]`，返回结果为：`band0 * 0.2 + band1`。
|
||||
|
||||
4. `operation` 可以直接指定结果：`['band', 0]`。
|
||||
|
||||
5. `operation` 支持以下的数学运算。
|
||||
|
||||
```js
|
||||
/** 数学运算 根据计算表达式进行数学运算
|
||||
* * * Math operators:
|
||||
* `['*', value1, value2]` 返回 `value1 * value2`
|
||||
* `['/', value1, value2]` 返回 `value1 / value2`
|
||||
* `['+', value1, value2]` 返回 `value1 + value2`
|
||||
* `['-', value1, value2]` 返回 `value2 - value1`
|
||||
* `['%', value1, value2]` 返回 `value1 % value2`
|
||||
* `['^', value1, value2]` 返回 `value1 ^ value2`
|
||||
* `['abs', value1]` 返回 `Math.abs(value1)`
|
||||
* `['floor', value1]` 返回 `Math.floor(value1)`
|
||||
* `['round', value1]` 返回 `Math.round(value1)`
|
||||
* `['ceil', value1]` 返回 `Math.ceil(value1)`
|
||||
* `['sin', value1]` 返回 `Math.sin(value1)`
|
||||
* `['cos', value1]` 返回 `Math.cos(value1)`
|
||||
* `['atan', value1, value2]` 返回 `n1===-1?Math.atan(n1): Math.atan2(n1, n2)`
|
||||
*/
|
||||
```
|
||||
<embed src="@/docs/api/raster_layer/common/style_single.md"></embed>
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Style
|
||||
order: 4
|
||||
---
|
||||
|
||||
<embed src="@/docs/api/tile/style.zh.md"></embed>
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
---
|
||||
title: Vector TileLayer
|
||||
title: Vector 矢量瓦片
|
||||
order: 0
|
||||
---
|
||||
|
||||
<embed src="@/docs/common/style.md"></embed>
|
||||
|
||||
### 简介
|
||||
|
||||
`L7` 的矢量瓦片图层复用了普通图层的数据可视化能力，支持对图层的样式进行数据映射。目前矢量瓦片支持了点、线、面、掩模等图层
|
||||
|
||||
| 分类 | Layer | parserType | 描述 |
|
||||
|
|
@ -15,7 +17,11 @@ order: 0
|
|||
| 矢量瓦片 | `MaskLayer` | parser of MaskLayer、`geojsonvt` | 矢量掩模图层 |
|
||||
| 矢量瓦片 | `TileDebugLayer` | `/` | `TileDebugLayer` 不需要执行 `source` 方法 |
|
||||
|
||||
🌟 目前只支持 `GCJ-02` 火星坐标系。
|
||||
瓦片图层其他配置项和基础图层 PointLayer、Linelayer、PolygonLayer 保持一致
|
||||
|
||||
### options
|
||||
|
||||
<embed src="@/docs/api/tile/common/options.zh.md"></embed>
|
||||
|
||||
### source(url: string, option: IOption)
|
||||
|
||||
|
|
@ -62,7 +68,7 @@ const source = new Source(url, {
|
|||
type UpdateTileStrategy = 'realtime' | 'overlap' | 'replace';
|
||||
```
|
||||
|
||||
🌟 矢量瓦片推荐复用瓦片服务。
|
||||
🌟 矢量瓦片推荐复用 Source
|
||||
|
||||
```js
|
||||
const vectorSource = new Source(
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
| 名称 | 说明 | 类型 |
|
||||
| -------- | ------------------------------------------------------- | --------------------------------- |
|
||||
| btnIcon | 按钮图标 | `HTMLElement` | `SVGElement` |
|
||||
| btnIcon | 按钮图标 | `HTMLElement` \| `SVGElement` |
|
||||
| btnText | 按钮内容文本 | `string` |
|
||||
| title | 按钮的 `title` 属性 | `string` |
|
||||
| vertical | 在 btnIcon 有值的情况下，按钮内的图标和文案是否纵向排列 | `boolean` |
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
| 名称 | 说明 | 类型 |
|
||||
| --------------- | -------------------- | ----------------------------------- |
|
||||
| popperPlacement | 气泡相对于按钮的位置 | [PopperPlacement](#PopperPlacement) |
|
||||
| popperTrigger | 气泡弹出的触发方式 | `'click'` | `'hover'` |
|
||||
| popperTrigger | 气泡弹出的触发方式 | `'click'` \| `'hover'` |
|
||||
| popperClassName | 气泡容器自定义样式名 | `string` |
|
||||
|
||||
### PopperPlacement
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## Usage
|
||||
|
||||
1. 按图表方式，[在线示例](https://l7plot.antv.vision/zh/examples/choropleth/administrative#china-map)
|
||||
1. 按图表方式，[在线示例](https://l7plot.antv.antgroup.com/zh/examples/choropleth/administrative#china-map)
|
||||
|
||||
```js
|
||||
import { Choropleth } from '@antv/l7plot';
|
||||
|
|
@ -32,4 +32,4 @@ scene.on('loaded', () => {
|
|||
|
||||
## API
|
||||
|
||||
Choropleth 具体 API 文档移步 [L7Plot 官网](https://l7plot.antv.vision/zh/docs/api/plots/choropleth)。
|
||||
Choropleth 具体 API 文档移步 [L7Plot 官网](https://l7plot.antv.antgroup.com/zh/docs/api/plots/choropleth)。
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
import * as G2 from '@antv/g2';
|
||||
import { GaodeMap, LayerPopup, PointLayer, Scene } from '@antv/l7';
|
||||
|
||||
const data: any[] = [
|
||||
{
|
||||
lng: 120.132235,
|
||||
lat: 30.250868,
|
||||
value: 34.71314604052238,
|
||||
name: '坐标点1',
|
||||
},
|
||||
{
|
||||
lng: 120.156236,
|
||||
lat: 30.260268,
|
||||
value: 96.807880210153,
|
||||
name: '坐标点2',
|
||||
},
|
||||
{
|
||||
lng: 120.163014,
|
||||
lat: 30.251297,
|
||||
value: 29.615472482876815,
|
||||
name: '坐标点3',
|
||||
},
|
||||
{
|
||||
lng: 120.15394,
|
||||
lat: 30.231489,
|
||||
value: 49.90316258911784,
|
||||
name: '坐标点4',
|
||||
},
|
||||
{
|
||||
lng: 120.154596,
|
||||
lat: 30.24065,
|
||||
value: 45.788587061188466,
|
||||
name: '坐标点5',
|
||||
},
|
||||
{
|
||||
lng: 120.150223,
|
||||
lat: 30.235078,
|
||||
value: 29.741111717098544,
|
||||
name: '坐标点6',
|
||||
},
|
||||
{
|
||||
lng: 120.143992,
|
||||
lat: 30.229411,
|
||||
value: 40.241555782182935,
|
||||
name: '坐标点7',
|
||||
},
|
||||
{
|
||||
lng: 120.136995,
|
||||
lat: 30.237439,
|
||||
value: 86.5369792415296,
|
||||
name: '坐标点8',
|
||||
},
|
||||
];
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'normal',
|
||||
center: [120.154672, 30.241095],
|
||||
zoom: 12,
|
||||
}),
|
||||
logoVisible: false,
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
const pointLayer = new PointLayer({});
|
||||
pointLayer
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.color('value', ['#FFCCC6', '#CF1421'])
|
||||
.size(10)
|
||||
.shape('circle');
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
const div = document.createElement('div');
|
||||
const chart = new G2.Chart({
|
||||
container: div,
|
||||
autoFit: true,
|
||||
width: 200,
|
||||
height: 200,
|
||||
});
|
||||
// 新建一个 view 用来单独渲染Annotation
|
||||
chart.coordinate('theta', {
|
||||
radius: 0.75,
|
||||
innerRadius: 0.5,
|
||||
});
|
||||
|
||||
chart.scale('percent', {
|
||||
formatter: (val) => {
|
||||
val = val * 100 + '%';
|
||||
return val;
|
||||
},
|
||||
});
|
||||
|
||||
chart.tooltip(false);
|
||||
|
||||
// 声明需要进行自定义图例字段： 'item'
|
||||
chart.legend(false);
|
||||
|
||||
chart
|
||||
.interval()
|
||||
.adjust('stack')
|
||||
.position('percent')
|
||||
.color('item', ['#5B8FF9', '#797979'])
|
||||
.style({
|
||||
fillOpacity: 1,
|
||||
});
|
||||
|
||||
const layerPopup = new LayerPopup({
|
||||
items: [
|
||||
{
|
||||
layer: pointLayer,
|
||||
customContent: (e) => {
|
||||
const otherValue = 100 - e.value;
|
||||
chart.data([
|
||||
{ item: '值', count: e.value, percent: e.value / 100 },
|
||||
{ item: '', count: otherValue, percent: otherValue / 100 },
|
||||
]);
|
||||
chart.render();
|
||||
return div;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
scene.addPopup(layerPopup);
|
||||
});
|
||||
|
|
@ -27,6 +27,14 @@
|
|||
"en": "LayerPopup"
|
||||
},
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*HbyzRqv6JZcAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "customContent.ts",
|
||||
"title": {
|
||||
"zh": "图层气泡 自定义内容",
|
||||
"en": "LayerPopup"
|
||||
},
|
||||
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*orwHQKugIdIAAAAAAAAAAAAADmJ7AQ/original"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
zoom: 4.19
|
||||
})
|
||||
center: [2.6125016864608597, 49.359131],
|
||||
zoom: 4.19,
|
||||
}),
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
addChart();
|
||||
|
|
@ -16,11 +16,11 @@ scene.on('loaded', () => {
|
|||
});
|
||||
function addChart() {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
|
||||
'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json',
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.nodes.forEach(function(item) {
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.nodes.forEach(function (item) {
|
||||
const el = document.createElement('div');
|
||||
const total =
|
||||
item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
|
|
@ -33,18 +33,18 @@ function addChart() {
|
|||
{
|
||||
item: 'Agriculture',
|
||||
count: item.gdp.Agriculture,
|
||||
percent: item.gdp.Agriculture / total
|
||||
percent: item.gdp.Agriculture / total,
|
||||
},
|
||||
{
|
||||
item: 'Industry',
|
||||
count: item.gdp.Industry,
|
||||
percent: item.gdp.Industry / total
|
||||
percent: item.gdp.Industry / total,
|
||||
},
|
||||
{
|
||||
item: 'Service',
|
||||
count: item.gdp.Service,
|
||||
percent: item.gdp.Service / total
|
||||
}
|
||||
percent: item.gdp.Service / total,
|
||||
},
|
||||
];
|
||||
|
||||
const chart = new G2.Chart({
|
||||
|
|
@ -52,25 +52,24 @@ function addChart() {
|
|||
width: size,
|
||||
height: size,
|
||||
render: 'svg',
|
||||
padding: 0
|
||||
padding: 0,
|
||||
});
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.data(itemData);
|
||||
chart.tooltip(false);
|
||||
chart.axis('count', {
|
||||
grid: false
|
||||
});
|
||||
|
||||
chart.axis('count', false);
|
||||
chart.axis('item', false);
|
||||
chart
|
||||
.interval()
|
||||
.position('item*count')
|
||||
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
|
||||
.opacity(1);
|
||||
.color('item', ['#5CCEA1', '#5D7092', '#5B8FF9']);
|
||||
chart.render();
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
element: el,
|
||||
}).setLnglat({
|
||||
lng: item.coordinates[0],
|
||||
lat: item.coordinates[1]
|
||||
lat: item.coordinates[1],
|
||||
});
|
||||
scene.addMarker(marker);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const scene = new Scene({
|
|||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'light',
|
||||
center: [ 2.6125016864608597, 49.359131 ],
|
||||
center: [2.6125016864608597, 49.359131],
|
||||
zoom: 4.19
|
||||
})
|
||||
});
|
||||
|
|
@ -20,7 +20,7 @@ function addChart() {
|
|||
)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
data.nodes.forEach(function(item) {
|
||||
data.nodes.forEach(function (item) {
|
||||
const el = document.createElement('div');
|
||||
const total =
|
||||
item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
|
||||
|
|
@ -47,28 +47,6 @@ function addChart() {
|
|||
}
|
||||
];
|
||||
|
||||
const sliceNumber = 0.02;
|
||||
|
||||
// 自定义 other 的图形，增加两条线
|
||||
G2.Shape.registerShape('interval', 'sliceShape', {
|
||||
draw: function draw(cfg, container) {
|
||||
const points = cfg.points;
|
||||
let path = [];
|
||||
path.push([ 'M', points[0].x, points[0].y ]);
|
||||
path.push([ 'L', points[1].x, points[1].y - sliceNumber ]);
|
||||
path.push([ 'L', points[2].x, points[2].y - sliceNumber ]);
|
||||
path.push([ 'L', points[3].x, points[3].y ]);
|
||||
path.push('Z');
|
||||
path = this.parsePath(path);
|
||||
return container.addShape('path', {
|
||||
attrs: {
|
||||
fill: cfg.color,
|
||||
path
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const chart = new G2.Chart({
|
||||
container: el,
|
||||
width: size,
|
||||
|
|
@ -76,17 +54,18 @@ function addChart() {
|
|||
render: 'svg',
|
||||
padding: 0
|
||||
});
|
||||
console.log(chart)
|
||||
chart.legend(false);
|
||||
chart.source(itemData);
|
||||
chart.data(itemData);
|
||||
chart.coord('theta', {
|
||||
innerRadius: 0.6
|
||||
});
|
||||
chart.tooltip(false);
|
||||
chart
|
||||
.intervalStack()
|
||||
.position('percent')
|
||||
.color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
|
||||
.shape('sliceShape');
|
||||
.interval()
|
||||
.adjust('stack')
|
||||
.position('percent').color('item', ['#5CCEA1', '#5D7092', '#5B8FF9'])
|
||||
.shape('sliceShape')
|
||||
chart.render();
|
||||
const marker = new Marker({
|
||||
element: el
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"private": true,
|
||||
"name": "@antv/l7-site",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "L7 sites deployed on gh-pages",
|
||||
"keywords": [
|
||||
"antv",
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
"relational data",
|
||||
"site"
|
||||
],
|
||||
"homepage": "https://L7.antv.vision",
|
||||
"homepage": "https://l7.antv.antgroup.com",
|
||||
"bugs": {
|
||||
"url": "https://github.com/antvis/L7/issues"
|
||||
},
|
||||
|
|
@ -27,19 +27,16 @@
|
|||
"site:clean": "rm -rf ./dumi/tmp && rm -rf ./dumi/tmp-production && rm -rf .umi/ && rm rf ./dist",
|
||||
"lint:fix": "prettier --write docs/api/**/*.md docs/api/*.md *.md",
|
||||
"build": "yarn site:build",
|
||||
"site:deploy": "npm run site:build && gh-pages -d public",
|
||||
"site:deploy": "npm run site:build && gh-pages -d dist",
|
||||
"site:develop": "dumi dev",
|
||||
"site:build": "dumi build",
|
||||
"start": "npm run site:develop",
|
||||
"site:publish": "gh-pages -d public"
|
||||
"site:publish": "gh-pages -d dist"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antv/dumi-theme-antv": "^0.3.0-2.10.7.12",
|
||||
"@antv/dumi-theme-antv": "^0.3.0",
|
||||
"@antv/g2": "^4.2.8",
|
||||
"@antv/l7": "2.11.0",
|
||||
"@antv/l7-draw": "^3.0.9",
|
||||
"@antv/l7-maps": "2.11.0",
|
||||
"@antv/l7-three": "2.11.0",
|
||||
"@antv/l7plot": "^0.3.3",
|
||||
"@antv/util": "^2.0.9",
|
||||
"@turf/turf": "^6.5.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
l7.antv.vision
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<html>
|
||||
<head>
|
||||
<script>
|
||||
window.location.replace('https://l7.antv.antgroup.com/')
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>L7 官网</h1>
|
||||
新官网迁移至 https://l7.antv.antgroup.com/ 访问速度更快
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-source",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.2.9",
|
||||
"@antv/l7-core": "2.11.0",
|
||||
"@antv/l7-utils": "2.11.0",
|
||||
"@antv/l7-core": "2.11.2",
|
||||
"@antv/l7-utils": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/geojson-rewind": "^0.5.2",
|
||||
"@mapbox/vector-tile": "^1.3.1",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
TilesetManagerOptions,
|
||||
} from '@antv/l7-utils';
|
||||
import { IParserData } from '../interface';
|
||||
import { getCustomData } from '../utils/tile/getCustomData';
|
||||
import {
|
||||
defaultFormat,
|
||||
getTileBuffer,
|
||||
|
|
@ -61,6 +62,15 @@ export default function rasterTile(
|
|||
cfg?.format || defaultFormat,
|
||||
cfg?.operation,
|
||||
);
|
||||
case RasterTileType.CUSTOMARRAYBUFFER:
|
||||
case RasterTileType.CUSTOMRGB:
|
||||
return getCustomData(
|
||||
tile,
|
||||
// @ts-ignore
|
||||
cfg?.getCustomData,
|
||||
cfg?.format || defaultFormat,
|
||||
cfg?.operation,
|
||||
);
|
||||
default:
|
||||
return getTileImage(data as string | string[], tileParams, tile, cfg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import { IRasterFormat, IBandsOperation } from '../../interface';
|
||||
// import { bindCancel } from './request';
|
||||
import {
|
||||
SourceTile,
|
||||
} from '@antv/l7-utils';
|
||||
import { processRasterData } from '../bandOperation/bands';
|
||||
|
||||
export const getCustomData = async (
|
||||
tile: SourceTile,
|
||||
getCustomData: (tile: { x: number, y: number, z: number }, cb: (err: any, data: any) => void) => void,
|
||||
rasterFormat: IRasterFormat,
|
||||
operation?: IBandsOperation,
|
||||
) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
getCustomData({
|
||||
x: tile.x,
|
||||
y: tile.y,
|
||||
z: tile.z
|
||||
}, (err, data) => {
|
||||
if(err){
|
||||
reject(err)
|
||||
}
|
||||
if (data) {
|
||||
processRasterData([{data,bands:[0]}], rasterFormat, operation, (err: any, img: any) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else if (img) {
|
||||
resolve(img);
|
||||
}
|
||||
},);
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -11,6 +11,7 @@ import { ITileParserCFG } from '@antv/l7-core'
|
|||
import { IRasterFormat, IBandsOperation } from '../../interface';
|
||||
import { getRasterFile } from './getRasterData';
|
||||
|
||||
|
||||
/**
|
||||
* 用于获取 raster data 的瓦片，如 tiff、lerc、dem 等
|
||||
* 支持多文件模式
|
||||
|
|
@ -35,7 +36,7 @@ export const getTileBuffer = async (
|
|||
getRasterFile(
|
||||
tile,
|
||||
requestParameters,
|
||||
(err, img) => {
|
||||
(err:any, img:any) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else if (img) {
|
||||
|
|
@ -64,25 +65,30 @@ export const getTileImage = async (
|
|||
let imageUrl:string;
|
||||
const templateUrl = Array.isArray(url) ? url[0] : url;
|
||||
if(cfg.wmtsOptions) {
|
||||
imageUrl = getWMTSURLFromTemplate(templateUrl, {
|
||||
const _getWMTSURLFromTemplate = cfg?.getURLFromTemplate || getWMTSURLFromTemplate
|
||||
imageUrl = _getWMTSURLFromTemplate(templateUrl, {
|
||||
...tileParams,
|
||||
...cfg.wmtsOptions
|
||||
})
|
||||
} else {
|
||||
imageUrl = getURLFromTemplate(
|
||||
Array.isArray(url) ? url[0] : url,
|
||||
tileParams,
|
||||
);
|
||||
const _getURLFromTemplate = cfg?.getURLFromTemplate || getURLFromTemplate
|
||||
imageUrl = _getURLFromTemplate(templateUrl, tileParams);
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = getImage({ url: imageUrl }, (err, img) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else if (img) {
|
||||
resolve(img);
|
||||
}
|
||||
});
|
||||
const xhr = getImage({
|
||||
url: imageUrl,
|
||||
type: cfg?.requestParameters?.type || 'arrayBuffer'
|
||||
},
|
||||
(err, img) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else if (img) {
|
||||
resolve(img);
|
||||
}
|
||||
},
|
||||
cfg.transformResponse
|
||||
);
|
||||
tile.xhrCancel = () => xhr.abort();
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"private": true,
|
||||
"name": "@antv/l7-test-utils",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
|
||||
"keywords": [],
|
||||
"author": "lzxue <lzx199065@gmail.com>",
|
||||
|
|
@ -39,9 +39,9 @@
|
|||
"url": "https://github.com/antvis/L7/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antv/l7-map": "2.11.0",
|
||||
"@antv/l7-maps": "2.11.0",
|
||||
"@antv/l7-scene": "2.11.0",
|
||||
"@antv/l7-map": "2.11.2",
|
||||
"@antv/l7-maps": "2.11.2",
|
||||
"@antv/l7-scene": "2.11.2",
|
||||
"gl": "^5.0.3",
|
||||
"l7regl": "^0.0.20"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-three",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "three for L7 ",
|
||||
"keywords": [
|
||||
"3D",
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
},
|
||||
"homepage": "https://github.com/antvis/L7#readme",
|
||||
"dependencies": {
|
||||
"@antv/l7": "2.11.0",
|
||||
"@antv/l7": "2.11.2",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-utils",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.2",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ function makeXMLHttpRequest(
|
|||
callback: ResponseCallback<any>,
|
||||
) {
|
||||
const xhr = new $XMLHttpRequest();
|
||||
|
||||
const url = Array.isArray(requestParameters.url) ? requestParameters.url[0] : requestParameters.url;
|
||||
xhr.open(requestParameters.method || 'GET', url, true);
|
||||
if (requestParameters.type === 'arrayBuffer') {
|
||||
|
|
@ -104,7 +105,7 @@ function makeXMLHttpRequest(
|
|||
type: xhr.getResponseHeader('Content-Type'),
|
||||
});
|
||||
callback(
|
||||
new AJAXError(xhr.status, xhr.statusText, url.toString(), body),
|
||||
new AJAXError(xhr.status, xhr.statusText, url.toString(), body)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -114,10 +115,10 @@ function makeXMLHttpRequest(
|
|||
}
|
||||
|
||||
export interface IXhrRequestResult {
|
||||
err?: Error | Error[] | null,
|
||||
data?: any | null,
|
||||
cacheControl?: string | null,
|
||||
expires?: string | null,
|
||||
err?: Error | Error[] | null;
|
||||
data?: any | null;
|
||||
cacheControl?: string | null;
|
||||
expires?: string | null;
|
||||
xhr?: any;
|
||||
}
|
||||
export function makeXMLHttpRequestPromise(
|
||||
|
|
@ -236,19 +237,30 @@ function arrayBufferToImageBitmap(
|
|||
export const getImage = (
|
||||
requestParameters: RequestParameters,
|
||||
callback: ResponseCallback<HTMLImageElement | ImageBitmap | null>,
|
||||
transformResponse?: (response: Object) => any
|
||||
) => {
|
||||
// request the image with XHR to work around caching issues
|
||||
// see https://github.com/mapbox/mapbox-gl-js/issues/1470
|
||||
return getArrayBuffer(requestParameters, (err, imgData) => {
|
||||
const optionFunc = (
|
||||
err?: Error | Error[] | null,
|
||||
imgData?: ArrayBuffer | null,
|
||||
) => {
|
||||
if (err) {
|
||||
callback(err);
|
||||
} else if (imgData) {
|
||||
const imageBitmapSupported = typeof createImageBitmap === 'function';
|
||||
const _imgData = transformResponse? transformResponse(imgData) : imgData;
|
||||
if (imageBitmapSupported) {
|
||||
arrayBufferToImageBitmap(imgData, callback);
|
||||
arrayBufferToImageBitmap(_imgData, callback);
|
||||
} else {
|
||||
arrayBufferToImage(imgData, callback);
|
||||
arrayBufferToImage(_imgData, callback);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (requestParameters.type === 'json') {
|
||||
return getJSON(requestParameters, optionFunc);
|
||||
} else {
|
||||
return getArrayBuffer(requestParameters, optionFunc);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,6 +3,13 @@ import { $window } from './mini-adapter';
|
|||
|
||||
export type ELType = HTMLElement | SVGElement;
|
||||
|
||||
export type ElementType =
|
||||
| HTMLElement
|
||||
| HTMLElement[]
|
||||
| DocumentFragment
|
||||
| Text
|
||||
| string;
|
||||
|
||||
export function getContainer(domId: string | HTMLDivElement) {
|
||||
let $dom = domId as HTMLDivElement;
|
||||
if (typeof domId === 'string') {
|
||||
|
|
@ -225,3 +232,20 @@ export function clearChildren(el: ELType) {
|
|||
export function setUnDraggable(el: ELType) {
|
||||
el.setAttribute('draggable', 'false');
|
||||
}
|
||||
|
||||
export function appendElementType(
|
||||
container: HTMLElement | DocumentFragment,
|
||||
children: ElementType,
|
||||
) {
|
||||
if (typeof children === 'string') {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = children;
|
||||
while (div.firstChild) {
|
||||
container.append(div.firstChild);
|
||||
}
|
||||
} else if (Array.isArray(children)) {
|
||||
container.append(...children);
|
||||
} else {
|
||||
container.append(children);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ git checkout -b $feat_name
|
|||
|
||||
cd ../../
|
||||
echo `pwd`
|
||||
rsync -av --exclude .dumi/tmp-production --exclude .dumi/tmp --exclude node_modules --exclude public --exclude dist ./packages/site/ ./site_temp/l7-site/
|
||||
rsync -av --exclude .cache --exclude .dumi/tmp-production --exclude .dumi/tmp --exclude node_modules --exclude public --exclude dist ./packages/site/ ./site_temp/l7-site/
|
||||
|
||||
cd ./site_temp/l7-site
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue