Merge branch 'master' of github.com:antvis/L7

This commit is contained in:
thinkinggis 2021-04-25 16:34:08 +08:00
commit c44689c7e2
41 changed files with 381 additions and 28711 deletions

1
.gitignore vendored
View File

@ -81,3 +81,4 @@ packages/l7/package_bak.json
stories/Test
packages/draw/node_modules/@turf
packages/district/src/data
yarn.lock

View File

@ -1,5 +1,5 @@
# L7
.
[![travis ci](https://travis-ci.com/antvis/L7.svg?branch=master)](https://travis-ci.com/antvis/L7) [![](https://flat.badgen.net/npm/v/@antv/l7?icon=npm)](https://www.npmjs.com/package/@antv/l7) ![最近提交](https://badgen.net/github/last-commit/antvis/L7)
Large-scale WebGL-powered Geospatial data visualization analysis framework.
@ -86,6 +86,12 @@ scene.addLayer(pointLayer);
- [Examples](https://l7.antv.vision/en/examples/gallery/basic)
- [Contributor documentation](./.github/CONTRIBUTING.md)
## 🔗 Links
- [L7 React](https://github.com/antvis/L7-React)
- [L7 Boundary](https://github.com/antvis/L7-boundary)
- [L7 draw](https://github.com/antvis/L7-draw)
## ✅ License
[MIT license](./LICENSE).

View File

@ -120,6 +120,12 @@ scene.addLayer(pointLayer);
- [示例](https://l7.antv.vision/en/examples/gallery/basic)
- [贡献](./.github/CONTRIBUTING.md)
## 🔗 Links
- [L7 React](https://github.com/antvis/L7-React)
- [L7 Boundary](https://github.com/antvis/L7-boundary)
- [L7 draw](https://github.com/antvis/L7-draw)
## ✅ License
[MIT license](./LICENSE).

View File

@ -19,7 +19,7 @@ module.exports = api => {
[
'@babel/plugin-proposal-decorators',
{
legacy: true
legacy: true,
}
],
[

View File

@ -15,7 +15,7 @@ L7 目前支持 Control
## 构造函数
#### option
### option
position: `string` 控件位置支持是个方位

View File

@ -12,6 +12,7 @@ order: 0
Popup
```javascript
const option = {};
const popup = new L7.Popup(option);
```

View File

@ -12,10 +12,11 @@ order: 0
Popup
```javascript
const option = {};
const popup = new L7.Popup(option);
```
#### option
### option
- closeButton
- closeOnClick

View File

@ -542,6 +542,7 @@ layer.setSelect(id);
```javascript
layer.on('click', (ev) => {}); // 鼠标左键点击图层事件
layer.on('mouseenter', (ev) => {}); // 鼠标进入图层要素
layer.on('mousemove', (ev) => {}); // 鼠标在图层上移动时触发
layer.on('mouseout', (ev) => {}); // 鼠标移出图层要素时触发
layer.on('mouseup', (ev) => {}); // 鼠标在图层上单击抬起时触发

View File

@ -2,4 +2,4 @@
title: LineLayer
order: 0
---
`markdown:docs/api/layer/line_layer/linelayer.zh.md`
`markdown:docs/api/layer/line_layer/linelayer.en.md`

View File

@ -2,4 +2,4 @@
title: 数据
order: 2
---
`markdown:docs/tutorial/data.zh.md`
`markdown:docs/tutorial/data.en.md`

View File

@ -2,4 +2,4 @@
title: 离线使用
order: 0
---
`markdown:docs/tutorial/map/offline.zh.md`
`markdown:docs/tutorial/map/offline.en.md`

View File

@ -55,7 +55,7 @@ const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 35.210526315789465,
style: 'dark',
mapStyle: 'dark',
center: [ 104.288144, 31.239692 ],
zoom: 4.4
})

View File

@ -61,7 +61,7 @@ const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 35.210526315789465,
style: 'dark',
mapStyle: 'dark',
center: [ 104.288144, 31.239692 ],
zoom: 4.4
})

View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.3.9",
"version": "2.3.10",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

View File

@ -7,10 +7,10 @@
},
"devDependencies": {
"@antv/g2": "^3.5.9",
"@antv/gatsby-theme-antv": "^1.1.1",
"@antv/l7-district": "^2.2.46",
"@antv/l7-draw": "^2.3.40",
"@antv/l7-react": "^2.2.37",
"@antv/gatsby-theme-antv": "^1.0.6",
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-decorators": "^7.6.0",
@ -23,13 +23,14 @@
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@babel/standalone": "^7.13.15",
"@commitlint/cli": "^8.1.0",
"@commitlint/config-conventional": "^8.1.0",
"@rollup/plugin-alias": "2.2.0",
"@rollup/plugin-commonjs": "11.0.2",
"@rollup/plugin-json": "^4.0.0",
"@rollup/plugin-node-resolve": "^6.0.0",
"@storybook/react": "^5.1.9",
"@storybook/react": "^6.2.2",
"@turf/turf": "^5.1.6",
"@types/dat.gui": "^0.7.1",
"@types/enzyme": "^3.1.14",
@ -37,7 +38,7 @@
"@types/gl": "^4.1.0",
"@types/jest": "^25.2.1",
"@types/node": "13.11.1",
"@types/storybook__react": "^4.0.2",
"@types/storybook__react": "^5.2.1",
"@types/supercluster": "^5.0.1",
"antd": "^4.12.3",
"awesome-typescript-loader": "^5.2.1",
@ -70,7 +71,7 @@
"eslint": "^6.6.0",
"eslint-config-egg": "^7.5.1",
"eslint-plugin-html": "^6.0.0",
"gatsby": "^2.19.15",
"gatsby": "2.25.0",
"gatsby-plugin-google-analytics": "^2.1.27",
"gatsby-remark-prettier": "^1.0.0",
"geotiff": "1.0.0-beta.10",
@ -131,7 +132,7 @@
},
"scripts": {
"start": "yarn run site:clean && yarn run site:develop",
"site:develop": "cross-env BABEL_ENV=site gatsby develop --open -H 0.0.0.0",
"site:develop": "cross-env BABEL_ENV=site GATSBY_LOGGER=ink gatsby develop --open --host 127.0.0.1",
"site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths",
"site:clean": "gatsby clean",
"site:deploy": "yarn run site:build && gh-pages -d public",
@ -145,7 +146,7 @@
"fix": "run-p -c 'lint:ts-* --fix'",
"lint:css": "stylelint 'packages/**/*.js{,x}'",
"lint:ts-prod": "tslint --fix --config tslint.prod.json 'packages/**/*.ts{,x}'",
"lint:ts-test": "tslint --fix --config tslint.test.json 'packages/**/*.{spec,story}.ts{,x}'",
"lint:ts-test": "tslint --fix --config tslint.json 'packages/**/*.{spec,story}.ts{,x}'",
"lint:ts": "run-p -c lint:ts-*",
"lint": "run-p -c lint:*",
"commit": "git-cz",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.3.9",
"version": "2.3.10",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "2.3.9",
"@antv/l7-utils": "2.3.9",
"@antv/l7-core": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.3.9",
"version": "2.3.10",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,7 +24,7 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "2.3.9",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"@mapbox/tiny-sdf": "^1.1.1",
"ajv": "^6.10.2",

View File

@ -51,7 +51,7 @@ export interface IMapService<RawMap = {}> {
// get map params
getType(): string;
getZoom(): number;
getCenter(): ILngLat;
getCenter(option?: ICameraOptions): ILngLat;
getPitch(): number;
getRotation(): number;
getBounds(): Bounds;
@ -66,7 +66,7 @@ export interface IMapService<RawMap = {}> {
panBy(pixel: Point): void;
fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void;
setZoomAndCenter(zoom: number, center: Point): void;
setCenter(center: [number, number]): void;
setCenter(center: [number, number], option?: ICameraOptions): void;
setPitch(pitch: number): void;
setZoom(zoom: number): void;
setMapStyle(style: any): void;
@ -181,3 +181,14 @@ export interface IMapCamera {
// 偏移原点,例如 P20 坐标系下
offsetOrigin: [number, number];
}
export interface ICameraOptions {
padding:
| number
| [number, number, number, number]
| {
top?: number;
bottom?: number;
right?: number;
left?: number;
};
}

View File

@ -30,3 +30,8 @@ void setPickingColor(vec3 pickingColor) {
float setPickingSize(float x) {
return u_PickingStage == PICKING_ENCODE ? x + u_PickingBuffer : x;
}
float setPickingOrder(float z) {
bool selected = bool(v_PickingResult.a);
return selected ? z + 1. : 0.;
}

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.3.9",
"version": "2.3.10",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,12 +25,12 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "2.3.9",
"@antv/l7-core": "2.3.9",
"@antv/l7-layers": "2.3.9",
"@antv/l7-maps": "2.3.9",
"@antv/l7-scene": "2.3.9",
"@antv/l7-utils": "2.3.9",
"@antv/l7-component": "^2.3.10",
"@antv/l7-core": "^2.3.10",
"@antv/l7-layers": "^2.3.10",
"@antv/l7-maps": "^2.3.10",
"@antv/l7-scene": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7"
},
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.3.9",
"version": "2.3.10",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,9 +24,10 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "2.3.9",
"@antv/l7-source": "2.3.9",
"@antv/l7-utils": "2.3.9",
"@antv/l7-core": "^2.3.10",
"@antv/l7-layers": "^2.3.10",
"@antv/l7-source": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

View File

@ -13,12 +13,12 @@ export default class DataSourcePlugin implements ILayerPlugin {
this.updateClusterData(layer);
});
// 检测数据否需要更新
// 检测数据否需要更新
layer.hooks.beforeRenderData.tap('DataSourcePlugin', () => {
const neeUpdate1 = this.updateClusterData(layer);
const neeUpdate2 = layer.dataState.dataSourceNeedUpdate;
const neeUpdateCluster = this.updateClusterData(layer);
const dataSourceNeedUpdate = layer.dataState.dataSourceNeedUpdate;
layer.dataState.dataSourceNeedUpdate = false;
return neeUpdate1 || neeUpdate2;
return neeUpdateCluster || dataSourceNeedUpdate;
});
}
@ -27,7 +27,13 @@ export default class DataSourcePlugin implements ILayerPlugin {
const cluster = source.cluster;
const { zoom = 0, maxZoom = 16 } = source.clusterOptions;
const newZoom = this.mapService.getZoom() - 1;
if (cluster && Math.abs(zoom - newZoom) > 1 && maxZoom > zoom) {
const dataSourceNeedUpdate = layer.dataState.dataSourceNeedUpdate;
// 如果 dataSource 有更新,跳过 zoom 的判断,直接更新一次
if (
cluster &&
(dataSourceNeedUpdate || Math.abs(zoom - newZoom) > 1) &&
maxZoom > zoom
) {
source.updateClusterData(Math.floor(newZoom));
return true;
}

View File

@ -30,7 +30,9 @@ void main() {
vec2 offset = project_pixel(extrude * (newSize + u_stroke_width) + u_offsets);
vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
// TODO: billboard
// anti-alias
@ -40,4 +42,7 @@ void main() {
v_data = vec4(extrude, antialiasblur,shape_type);
setPickingColor(a_PickingColor);
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
}

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.3.9",
"version": "2.3.10",
"description": "l7 map",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -37,7 +37,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-utils": "2.3.9",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.3.9",
"version": "2.3.10",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -27,9 +27,9 @@
"license": "ISC",
"dependencies": {
"@amap/amap-jsapi-loader": "^0.0.3",
"@antv/l7-core": "2.3.9",
"@antv/l7-map": "2.3.9",
"@antv/l7-utils": "2.3.9",
"@antv/l7-core": "^2.3.10",
"@antv/l7-map": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

View File

@ -5,6 +5,7 @@ import AMapLoader from '@amap/amap-jsapi-loader';
import {
Bounds,
CoordinateSystem,
ICameraOptions,
ICoordinateSystemService,
IGlobalConfigService,
ILngLat,
@ -23,6 +24,7 @@ import { DOM } from '@antv/l7-utils';
import { mat4, vec2, vec3 } from 'gl-matrix';
import { inject, injectable } from 'inversify';
import { IAMapEvent, IAMapInstance } from '../../typings/index';
import { toPaddingOptions } from '../utils';
import './logo.css';
import { MapTheme } from './theme';
import Viewport from './Viewport';
@ -135,15 +137,45 @@ export default class AMapService
return this.map.setZoom(zoom);
}
public getCenter(): ILngLat {
public getCenter(options?: ICameraOptions): ILngLat {
if (options?.padding) {
const originCenter = this.getCenter();
const [w, h] = this.getSize();
const padding = toPaddingOptions(options.padding);
const px = this.lngLatToPixel([originCenter.lng, originCenter.lat]);
const offsetPx = [
(padding.right - padding.left) / 2,
(padding.bottom - padding.top) / 2,
];
const newCenter = this.pixelToLngLat([
px.x - offsetPx[0],
px.y - offsetPx[1],
]);
return newCenter;
}
const center = this.map.getCenter();
return {
lng: center.getLng(),
lat: center.getLat(),
};
}
public setCenter(lnglat: [number, number]): void {
this.map.setCenter(lnglat);
public setCenter(lnglat: [number, number], options?: ICameraOptions): void {
if (options?.padding) {
const padding = toPaddingOptions(options.padding);
const px = this.lngLatToPixel(lnglat);
const offsetPx = [
(padding.right - padding.left) / 2,
(padding.bottom - padding.top) / 2,
];
const newCenter = this.pixelToLngLat([
px.x + offsetPx[0],
px.y + offsetPx[1],
]);
this.map.setCenter([newCenter.lng, newCenter.lat]);
} else {
this.map.setCenter(lnglat);
}
}
public getPitch(): number {
return this.map.getPitch();

View File

@ -0,0 +1,49 @@
export type IPadding =
| number
| [number, number, number, number]
| {
top?: number;
bottom?: number;
right?: number;
left?: number;
};
export function toPaddingOptions(padding: IPadding = {}) {
const defaultPadding = {
top: 0,
right: 0,
bottom: 0,
left: 0,
};
if (typeof padding === 'number') {
return {
top: padding,
right: padding,
bottom: padding,
left: padding,
};
}
if (Array.isArray(padding)) {
if (padding.length === 4) {
return {
top: padding[0],
right: padding[1],
bottom: padding[2],
left: padding[3],
};
}
if (padding.length === 2) {
return {
top: padding[0],
right: padding[1],
bottom: padding[0],
left: padding[1],
};
}
}
return {
...defaultPadding,
...padding,
};
}

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.3.9",
"version": "2.3.10",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "2.3.9",
"@antv/l7-core": "^2.3.10",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"lodash": "^4.17.15",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.3.9",
"version": "2.3.10",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,11 +23,12 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "2.3.9",
"@antv/l7-core": "2.3.9",
"@antv/l7-maps": "2.3.9",
"@antv/l7-renderer": "2.3.9",
"@antv/l7-utils": "2.3.9",
"@antv/l7-component": "^2.3.10",
"@antv/l7-core": "^2.3.10",
"@antv/l7-layers": "^2.3.10",
"@antv/l7-maps": "^2.3.10",
"@antv/l7-renderer": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

View File

@ -1,4 +1,11 @@
import { Bounds, ILngLat, IPoint, IStatusOptions, Point } from '@antv/l7-core';
import {
Bounds,
ICameraOptions,
ILngLat,
IPoint,
IStatusOptions,
Point,
} from '@antv/l7-core';
export default interface IMapController {
/**
@ -9,7 +16,7 @@ export default interface IMapController {
/**
*
*/
getCenter(): ILngLat;
getCenter(options?: ICameraOptions): ILngLat;
/**
*
@ -64,7 +71,7 @@ export default interface IMapController {
// control with raw map
setRotation(rotation: number): void;
setZoomAndCenter(zoom: number, center: Point): void;
setCenter(center: [number, number]): void;
setCenter(center: [number, number], options?: ICameraOptions): void;
setPitch(pitch: number): void;
setZoom(zoom: number): void;
setMapStyle(style: any): void;

View File

@ -3,6 +3,7 @@ import {
Bounds,
createLayerContainer,
createSceneContainer,
ICameraOptions,
IControl,
IControlService,
IFontService,
@ -254,12 +255,12 @@ class Scene
return this.mapService.getZoom();
}
public getCenter(): ILngLat {
return this.mapService.getCenter();
public getCenter(options?: ICameraOptions): ILngLat {
return this.mapService.getCenter(options);
}
public setCenter(center: [number, number]) {
return this.mapService.setCenter(center);
public setCenter(center: [number, number], options?: ICameraOptions) {
return this.mapService.setCenter(center, options);
}
public getPitch(): number {

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.3.9",
"version": "2.3.10",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,8 +26,8 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "2.3.9",
"@antv/l7-utils": "2.3.9",
"@antv/l7-core": "^2.3.10",
"@antv/l7-utils": "^2.3.10",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

View File

@ -11,7 +11,11 @@ import {
lazyInject,
TYPES,
} from '@antv/l7-core';
import { bBoxToBounds, extent, padBounds } from '@antv/l7-utils';
import {
bBoxToBounds,
extent,
padBounds,
} from '@antv/l7-utils';
import {
BBox,
Feature,
@ -54,6 +58,8 @@ export default class Source extends EventEmitter {
zoom: -99,
method: 'count',
};
// 是否有效范围
private invalidExtent: boolean = false;
// 原始数据
private originData: any;
@ -89,16 +95,15 @@ export default class Source extends EventEmitter {
this.emit('update');
}
public getClusters(zoom: number): any {
return this.clusterIndex.getClusters(this.extent, zoom);
return this.clusterIndex.getClusters(this.caculClusterExtent(2), zoom);
}
public getClustersLeaves(id: number): any {
return this.clusterIndex.getLeaves(id, Infinity);
}
public updateClusterData(zoom: number): void {
const { method = 'sum', field } = this.clusterOptions;
const newBounds = padBounds(bBoxToBounds(this.extent), 2);
let data = this.clusterIndex.getClusters(
newBounds[0].concat(newBounds[1]),
this.caculClusterExtent(2),
Math.floor(zoom),
);
this.clusterOptions.zoom = zoom;
@ -169,6 +174,19 @@ export default class Source extends EventEmitter {
this.data = null;
}
private caculClusterExtent(bufferRatio: number): any {
let newBounds = [
[-Infinity, -Infinity],
[Infinity, Infinity],
];
if (!this.invalidExtent) {
newBounds = padBounds(bBoxToBounds(this.extent), bufferRatio);
}
return newBounds[0].concat(newBounds[1]);
}
private initCfg(option?: ISourceCFG) {
this.cfg = mergeWith(this.cfg, option, mergeCustomizer);
const cfg = this.cfg;
@ -196,6 +214,8 @@ export default class Source extends EventEmitter {
this.data = sourceParser(this.originData, parser);
// 计算范围
this.extent = extent(this.data.dataArray);
this.invalidExtent = this.extent[0]===this.extent[2] || this.extent[1]===this.extent[3]
}
/**
*

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-three",
"version": "2.3.9",
"version": "2.3.10",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,7 +44,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7": "2.3.9",
"@antv/l7": "^2.3.10",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"rollup": "^2.3.3",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.3.9",
"version": "2.3.10",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

View File

@ -19,7 +19,7 @@ export default class Point3D extends React.Component {
style: 'light',
center: [-121.24357, 37.58264],
pitch: 0,
zoom: 10.45,
zoom: 6.45,
}),
});
scene.on('loaded', () => {
@ -29,7 +29,7 @@ export default class Point3D extends React.Component {
.then((res) => res.text())
.then((data) => {
const pointLayer = new PointLayer({})
.source(data, {
.source(data.slice(0, 1000), {
parser: {
type: 'csv',
x: 'Longitude',
@ -37,8 +37,8 @@ export default class Point3D extends React.Component {
},
})
.shape('circle')
.size(8)
.active({
.size(16)
.select({
color: 'red',
})
.color('Magnitude', [
@ -59,34 +59,7 @@ export default class Point3D extends React.Component {
stroke: '#fff',
});
const textLayer = new PointLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'Longitude',
y: 'Latitude',
},
})
.shape('EventID', 'text')
.size(8)
.color('red')
.style({
opacity: 1,
strokeWidth: 0,
stroke: '#fff',
});
scene.addLayer(pointLayer);
scene.addLayer(textLayer);
pointLayer.on('click', (e) => {
const res = pointLayer.boxSelect(
[e.x - 10, e.y - 10, e.x + 10, e.y + 10],
(fe) => {
console.log(fe);
},
);
});
this.scene = scene;
});
});

View File

@ -0,0 +1,142 @@
// @ts-ignore
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class GaodeMapComponent extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [121.107846, 30.267069],
pitch: 0,
style: 'normal',
zoom: 11,
animateEnable: false,
}),
});
const layer = new PointLayer()
.source(
[
{
lng: 121.107846,
lat: 30.267069,
},
],
{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
},
)
.shape('circle')
.color('blue')
.size(10)
.style({
stroke: '#fff',
storkeWidth: 2,
});
scene.addLayer(layer);
scene.render();
this.scene = scene;
scene.on('loaded', () => {
const padding = {
top: 50,
right: 0,
bottom: 200,
left: 800,
};
// const px = scene.lngLatToPixel([center.lng, center.lat]);
// const offsetPx = [
// (padding.right - padding.left) / 2,
// (padding.bottom - padding.top) / 2,
// ];
scene.setCenter([121.107846, 30.267069], { padding });
// const newCenter = scene.pixelToLngLat([
// px.x + offsetPx[0],
// px.y + offsetPx[1],
// ]);
// @ts-ignore
// scene.setCenter();
// get originCenter
// const originCenter = scene.getCenter();
// const originPx = scene.lngLatToPixel([
// originCenter.lng,
// originCenter.lat,
// ]);
// const offsetPx2 = [
// (-padding.right + padding.left) / 2,
// (-padding.bottom + padding.top) / 2,
// ];
// const newCenter2 = scene.pixelToLngLat([
// originPx.x - offsetPx[0],
// originPx.y - offsetPx[1],
// ]);
// lngLatToContainer
// 获取当前地图像素坐标
// console.log(originCenter, center, newCenter2);
// console.log(w,h);
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
<div
style={{
position: 'absolute',
bottom: '0px',
zIndex: 10,
background: '#fff',
height: '200px',
width: '100%',
}}
/>
<div
style={{
position: 'absolute',
top: '0px',
zIndex: 10,
background: '#f00',
height: '50px',
width: '100%',
}}
/>
<div
style={{
position: 'absolute',
left: '0px',
zIndex: 10,
background: '#ff0',
height: '100%',
width: '800px',
}}
/>
</>
);
}
}

View File

@ -0,0 +1,6 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import MapCenter from './components/mapCenter';
// @ts-ignore
storiesOf('地图方法', module).add('地图中心点', () => <MapCenter />);

View File

@ -1,9 +0,0 @@
{
"extends": ["./tslint.json"],
"rules": {
"no-implicit-dependencies": [false, "dev"]
},
"linterOptions": {
"exclude": ["**/*.d.ts", "**/data/*.ts"]
}
}

28597
yarn.lock

File diff suppressed because it is too large Load Diff