mirror of https://gitee.com/antv-l7/antv-l7
@thinkinggis
GitHub
commit
c60e405a5c
|
|
@ -30,7 +30,7 @@ scene.addLayer(layer);
|
|||
|
||||
设置图层名称,可根据 name 获取 layer;
|
||||
|
||||
### visable
|
||||
### visible
|
||||
|
||||
图层是否可见 {bool } default true
|
||||
|
||||
|
|
@ -102,7 +102,7 @@ layer.source(data, {
|
|||
|
||||
### scale
|
||||
|
||||
cscle('field', scaleConfig)
|
||||
scale('field', scaleConfig)
|
||||
|
||||
(field: string, scaleConfig: object)
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ scene.addLayer(layer);
|
|||
|
||||
设置图层名称,可根据 name 获取 layer;
|
||||
|
||||
### visable
|
||||
### visible
|
||||
|
||||
图层是否可见 {bool } default true
|
||||
|
||||
|
|
@ -102,7 +102,7 @@ layer.source(data, {
|
|||
|
||||
### scale
|
||||
|
||||
cscle('field', scaleConfig)
|
||||
scale('field', scaleConfig)
|
||||
|
||||
(field: string, scaleConfig: object)
|
||||
|
||||
|
|
|
|||
|
|
@ -17,8 +17,16 @@ order: 0
|
|||
|
||||
2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.8/dist/l7.js"></script>
|
||||
<head>
|
||||
<! --引入最新版的L7-->
|
||||
<script src = 'https://unpkg.com/@antv/l7'></script>
|
||||
|
||||
<! --指定版本号引入L7-->
|
||||
<script src = 'https://unpkg.com/@antv/l7@2.0.11'></script>
|
||||
|
||||
</head>
|
||||
```
|
||||
|
||||
### 添加div 标签指定地图容器
|
||||
|
|
@ -106,7 +114,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
|||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.8/dist/l7.js"></script>
|
||||
<script src="https://unpkg.com/@antv/l7"></script>
|
||||
<script>
|
||||
|
||||
const scene = new L7.Scene({
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ order: 0
|
|||
2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 ```amap``` 并且传入token
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.8/dist/l7.js"></script>
|
||||
<script src="https://unpkg.com/@antv/l7"></script>
|
||||
```
|
||||
|
||||
### 添加div 标签指定地图容器
|
||||
|
|
@ -106,7 +106,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
|||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.8/dist/l7.js"></script>
|
||||
<script src="https://unpkg.com/@antv/l7"></script>
|
||||
<script>
|
||||
|
||||
const scene = new L7.Scene({
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ order: 0
|
|||
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.8/dist/l7.js"></script>
|
||||
<script src="https://unpkg.com/@antv/l7"></script>
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -118,7 +118,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
|||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
||||
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.8/dist/l7.js"></script>
|
||||
<script src="https://unpkg.com/@antv/l7"></script>
|
||||
<script>
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ order: 0
|
|||
|
||||
|
||||
```html
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.8/dist/l7.js"></script>
|
||||
<script src="https://unpkg.com/@antv/l7"></script>
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -116,7 +116,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
|
|||
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
|
||||
|
||||
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
|
||||
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.8/dist/l7.js"></script>
|
||||
<script src="https://unpkg.com/@antv/l7"></script>
|
||||
<script>
|
||||
const scene = new L7.Scene({
|
||||
id: 'map',
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ Include the L7 JS JavaScript <head> of your HTML file.
|
|||
|
||||
```html
|
||||
<head>
|
||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.8/dist/l7.js'>
|
||||
<script src='https://unpkg.com/@antv/l7'>
|
||||
</script>
|
||||
</head>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -19,9 +19,12 @@ Include the L7 JS JavaScript <head> of your HTML file.
|
|||
|
||||
```html
|
||||
<head>
|
||||
<! --引入第三方地图JSAPI-->
|
||||
<script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.8/dist/l7.js'>
|
||||
</script>
|
||||
<! --引入最新版的L7-->
|
||||
<script src = 'https://unpkg.com/@antv/l7'></script>
|
||||
|
||||
<! --指定版本号引入L7-->
|
||||
<script src = 'https://unpkg.com/@antv/l7@2.0.11'></script>
|
||||
|
||||
</head>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"message": "chore: publish"
|
||||
}
|
||||
},
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-component",
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.11",
|
||||
"@antv/l7-utils": "^2.0.11",
|
||||
"@antv/l7-core": "^2.0.12",
|
||||
"@antv/l7-utils": "^2.0.12",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-core",
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-utils": "^2.0.11",
|
||||
"@antv/l7-utils": "^2.0.12",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/tiny-sdf": "^1.1.1",
|
||||
"ajv": "^6.10.2",
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@ export default class InteractionService extends EventEmitter
|
|||
} else {
|
||||
this.lastClickTime = nowTime;
|
||||
this.lastClickXY = [x, y];
|
||||
// @ts-ignore
|
||||
this.clickTimer = setTimeout(() => {
|
||||
type = 'click';
|
||||
this.emit(InteractionEvent.Hover, { x, y, lngLat, type });
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,11 +24,11 @@
|
|||
"author": "antv",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.0.11",
|
||||
"@antv/l7-core": "^2.0.11",
|
||||
"@antv/l7-layers": "^2.0.11",
|
||||
"@antv/l7-maps": "^2.0.11",
|
||||
"@antv/l7-scene": "^2.0.11",
|
||||
"@antv/l7-component": "^2.0.12",
|
||||
"@antv/l7-core": "^2.0.12",
|
||||
"@antv/l7-layers": "^2.0.12",
|
||||
"@antv/l7-maps": "^2.0.12",
|
||||
"@antv/l7-scene": "^2.0.12",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "9fabb78790428d2025b89fb6146fc555cb1d987d",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-layers",
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"description": "L7's collection of built-in layers",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.11",
|
||||
"@antv/l7-source": "^2.0.11",
|
||||
"@antv/l7-utils": "^2.0.11",
|
||||
"@antv/l7-core": "^2.0.12",
|
||||
"@antv/l7-source": "^2.0.12",
|
||||
"@antv/l7-utils": "^2.0.12",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/martini": "^0.1.0",
|
||||
"@turf/meta": "^6.0.2",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-maps",
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -23,8 +23,8 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.11",
|
||||
"@antv/l7-utils": "^2.0.11",
|
||||
"@antv/l7-core": "^2.0.12",
|
||||
"@antv/l7-utils": "^2.0.12",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"gl-matrix": "^3.1.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-renderer",
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
"gl": "^4.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.11",
|
||||
"@antv/l7-core": "^2.0.12",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"lodash": "^4.17.15",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-scene",
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.0.11",
|
||||
"@antv/l7-core": "^2.0.11",
|
||||
"@antv/l7-maps": "^2.0.11",
|
||||
"@antv/l7-renderer": "^2.0.11",
|
||||
"@antv/l7-utils": "^2.0.11",
|
||||
"@antv/l7-component": "^2.0.12",
|
||||
"@antv/l7-core": "^2.0.12",
|
||||
"@antv/l7-maps": "^2.0.12",
|
||||
"@antv/l7-renderer": "^2.0.12",
|
||||
"@antv/l7-utils": "^2.0.12",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"mapbox-gl": "^1.2.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-source",
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.0.11",
|
||||
"@antv/l7-utils": "^2.0.11",
|
||||
"@antv/l7-core": "^2.0.12",
|
||||
"@antv/l7-utils": "^2.0.12",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/geojson-rewind": "^0.4.0",
|
||||
"@turf/helpers": "^6.1.4",
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ export default class Source extends EventEmitter {
|
|||
}
|
||||
public getFeatureById(id: number): unknown {
|
||||
const { type = 'geojson' } = this.parser;
|
||||
if (type === 'geojson' && !this.cluster) {
|
||||
if (type === 'geojson' && !this.cluster && this.transforms.length === 0) {
|
||||
// TODO： 聚合图层返回聚合和后的数据
|
||||
return id < this.originData.features.length
|
||||
? this.originData.features[id]
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ function _getGridLayerDataFromGridHash(
|
|||
item[option.method] = Satistics.statMap[option.method](columns);
|
||||
}
|
||||
Object.assign(item, {
|
||||
_id: i + 1,
|
||||
_id: i,
|
||||
coordinates: [
|
||||
-180 + gridOffset.xOffset * lonIdx,
|
||||
-90 + gridOffset.yOffset * latIdx,
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export function pointToHexbin(data: IParserData, option: ITransform) {
|
|||
count: hex.length,
|
||||
rawData: hex,
|
||||
coordinates: [hex.x, hex.y],
|
||||
_id: index + 1,
|
||||
_id: index,
|
||||
};
|
||||
}),
|
||||
radius: pixlSize,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-utils",
|
||||
"version": "2.0.11",
|
||||
"version": "2.0.12",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Column from './components/column';
|
|||
import DashLineDemo from './components/dash';
|
||||
import DataUpdate from './components/data_update';
|
||||
import HeatMapDemo from './components/HeatMap';
|
||||
import HexagonLayerDemo from './components/hexagon';
|
||||
import LightDemo from './components/light';
|
||||
import LineLayer from './components/Line';
|
||||
import PointDemo from './components/Point';
|
||||
|
|
@ -35,5 +36,6 @@ storiesOf('图层', module)
|
|||
.add('3D弧线', () => <ArcLineDemo />)
|
||||
.add('2D弧线', () => <Arc2DLineDemo />)
|
||||
.add('热力图', () => <HeatMapDemo />)
|
||||
.add('网格热力图', () => <HexagonLayerDemo />)
|
||||
.add('栅格', () => <RasterLayerDemo />)
|
||||
.add('图片', () => <ImageLayerDemo />);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
import { HeatmapLayer, PointLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
import * as dat from 'dat.gui';
|
||||
import * as React from 'react';
|
||||
// @ts-ignore
|
||||
import data from '../data/data.json';
|
||||
export default class HexagonLayerDemo extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
private gui: dat.GUI;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
if (this.gui) {
|
||||
this.gui.destroy();
|
||||
}
|
||||
}
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
|
||||
);
|
||||
const pointsData = await response.json();
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [120.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
const pointLayer = new HeatmapLayer({})
|
||||
.source(pointsData, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'grid',
|
||||
size: 500000,
|
||||
field: 'capacity',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.shape('hexagon')
|
||||
.style({
|
||||
coverage: 0.9,
|
||||
angle: 0,
|
||||
opacity: 0.6,
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3F4BBA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#3C73DA',
|
||||
'#0F62FF',
|
||||
'#0F62FF',
|
||||
'#30B2E9',
|
||||
'#30B2E9',
|
||||
'#40C4CE',
|
||||
].reverse(),
|
||||
);
|
||||
scene.addLayer(pointLayer);
|
||||
pointLayer.on('click', (e) => {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
this.scene = scene;
|
||||
|
||||
const gui = new dat.GUI();
|
||||
this.gui = gui;
|
||||
const styleOptions = {
|
||||
textAnchor: 'center',
|
||||
strokeWidth: 1,
|
||||
};
|
||||
const rasterFolder = gui.addFolder('栅格可视化');
|
||||
rasterFolder
|
||||
.add(styleOptions, 'textAnchor', [
|
||||
'center',
|
||||
'left',
|
||||
'right',
|
||||
'top',
|
||||
'bottom',
|
||||
'top-left',
|
||||
'bottom-right',
|
||||
'bottom-left',
|
||||
'top-right',
|
||||
])
|
||||
.onChange((anchor: string) => {
|
||||
pointLayer.style({
|
||||
textAnchor: anchor,
|
||||
});
|
||||
scene.render();
|
||||
});
|
||||
// });
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue