Merge pull request from antvis/l7-draw

L7 draw
This commit is contained in:
@thinkinggis 2020-03-25 16:40:38 +08:00 committed by GitHub
commit 5a95ecf667
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 3019 additions and 245 deletions

View File

@ -1,5 +1,5 @@
---
title: Buble Map
title: Bubble Map
order: 1
---
气泡图地理区域上方会显示不同大小的圆点,圆形面积与其在数据集中的数值会成正比。

View File

@ -94,8 +94,11 @@
"rollup": "^1.27.14",
"rollup-plugin-analyzer": "^3.2.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-buble": "^0.19.8",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-terser": "^5.1.2",
"rollup-plugin-typescript": "^1.0.1",
"rollup-pluginutils": "^2.8.2",
"sass-loader": "^7.1.0",
"style-loader": "^1.0.0",
@ -180,5 +183,8 @@
"tnpm": {
"mode": "yarn"
},
"version": "0.0.0"
"version": "0.0.0",
"dependencies": {
"@turf/turf": "^5.1.6"
}
}

View File

@ -6,7 +6,7 @@ export interface IPopupOption {
closeButton: boolean;
closeOnClick: boolean;
maxWidth: string;
anchor: anchorType;
anchor: anchorType[any];
className: string;
offsets: number[];
}

View File

@ -4,6 +4,6 @@
## Usage
```
const draw = require('draw');
const draw = require('l7-draw');
```

View File

@ -0,0 +1,85 @@
import { Feature, Geometry, Properties } from '@turf/helpers';
import moveFeature from '../../src/util/move_featrues';
describe('moveFeature', () => {
const delta = {
lng: 1,
lat: 1,
};
const pointFeature: Feature<Geometry, Properties> = {
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [130, 47],
},
};
const polyon: Feature<Geometry, Properties> = {
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[49.5703125, 45.583289756006316],
[71.3671875, 45.583289756006316],
[71.3671875, 57.136239319177434],
[49.5703125, 57.136239319177434],
[49.5703125, 45.583289756006316],
],
],
},
};
const line: Feature<Geometry, Properties> = {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[54.31640625, 62.91523303947614],
[71.015625, 62.59334083012024],
[70.48828125, 58.07787626787517],
[77.16796875, 54.36775852406841],
[83.3203125, 58.26328705248601],
[83.3203125, 66.37275500247455],
[94.74609375, 66.65297740055279],
[94.74609375, 62.512317938386914],
],
},
};
it('move Point', () => {
const res = moveFeature([pointFeature], delta) as Array<
Feature<Geometry, Properties>
>;
expect(res[0].geometry.coordinates).toEqual([131, 48]);
});
it('move BBox', () => {
const res = moveFeature([polyon], delta) as Array<
Feature<Geometry, Properties>
>;
expect(res[0].geometry.coordinates).toEqual([
[
[50.5703125, 46.583289756006316],
[72.3671875, 46.583289756006316],
[72.3671875, 58.136239319177434],
[50.5703125, 58.136239319177434],
[50.5703125, 46.583289756006316],
],
]);
});
it('move line', () => {
const res = moveFeature([line], delta) as Array<
Feature<Geometry, Properties>
>;
expect(res[0].geometry.coordinates).toEqual([
[55.31640625, 63.91523303947614],
[72.015625, 63.59334083012024],
[71.48828125, 59.07787626787517],
[78.16796875, 55.36775852406841],
[84.3203125, 59.26328705248601],
[84.3203125, 67.37275500247455],
[95.74609375, 67.65297740055279],
[95.74609375, 63.512317938386914],
]);
});
});

View File

@ -1,12 +1,13 @@
{
"name": "@antv/l7-draw",
"version": "2.1.5",
"description": "Now Im 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",
"description": "L7 Draw moudules",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
"license": "ISC",
"main": "lib/index.js",
"module": "es/index.js",
"unpkg": "dist/l7-draw.js",
"types": "es/index.d.ts",
"sideEffects": true,
"files": [
@ -33,7 +34,11 @@
},
"dependencies": {
"@antv/l7": "^2.1.5",
"@babel/runtime": "^7.7.7"
"@babel/runtime": "^7.7.7",
"@turf/circle": "^6.0.1",
"@turf/distance": "^6.0.1",
"@turf/helpers": "^6.1.4",
"lodash": "^4.6.2"
},
"bugs": {
"url": "https://github.com/antvis/L7/issues"

View File

@ -19,13 +19,9 @@ export default {
],
output: [
{
format: 'cjs',
file: pkg.main,
sourcemap: true
},
{
format: 'es',
file: pkg.module,
format: 'umd',
name: 'L7-Draw',
file: pkg.unpkg,
sourcemap: true
}
]

View File

@ -1 +1 @@
export { default as DrawSource } from './source';
export * from './modes/index';

View File

@ -1,22 +1,109 @@
import { ILayer } from '@antv/l7';
import DrawFeature from './draw_feature';
import {
IInteractionTarget,
ILayer,
ILngLat,
IPopup,
LineLayer,
PointLayer,
PolygonLayer,
Popup,
Scene,
} from '@antv/l7';
import { Feature, FeatureCollection, point } from '@turf/helpers';
import selectRender from '../render/selected';
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import { createCircle } from '../util/create_geometry';
import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
export interface IDrawRectOption extends IDrawFeatureOption {
units: unitsType;
steps: number;
}
let CircleFeatureId = 0;
export default class DrawCircle extends DrawFeature {
private center: [number, number];
private drawCircleLayer: ILayer;
protected onDragStart() {
// @ts-ignore
this.scene.map.dragdrag.disable();
private startPoint: ILngLat;
private endPoint: ILngLat;
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
super(scene, options);
this.selectLayer = new selectRender(this);
}
protected onDragging() {
return;
protected onDragStart = (e: IInteractionTarget) => {
this.startPoint = e.lngLat;
this.setCursor('grabbing');
this.initCenterLayer();
this.initDrawFillLayer();
this.centerLayer.setData([this.startPoint]);
};
protected onDragging = (e: IInteractionTarget) => {
this.endPoint = e.lngLat;
const feature = this.createFeature();
this.updateDrawFillLayer(feature);
};
protected onDragEnd = () => {
this.emit(DrawEvent.CREATE, this.currentFeature);
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
this.disable();
};
protected moveFeature(delta: ILngLat): Feature {
const newFeature = moveFeatures([this.currentFeature as Feature], delta)[0];
const properties = newFeature.properties as {
startPoint: [number, number];
endPoint: [number, number];
};
const { startPoint, endPoint } = properties;
properties.startPoint = movePoint(startPoint, delta);
properties.endPoint = movePoint(endPoint, delta);
newFeature.properties = properties;
this.startPoint = {
lat: startPoint[1],
lng: startPoint[0],
};
this.endPoint = {
lat: endPoint[1],
lng: endPoint[0],
};
return newFeature;
}
protected onDragEnd() {
return;
protected createFeature(): FeatureCollection {
const feature = createCircle(
[this.startPoint.lng, this.startPoint.lat],
[this.endPoint.lng, this.endPoint.lat],
{
units: this.getOption('units'),
steps: this.getOption('steps'),
id: `${CircleFeatureId++}`,
},
);
this.setCurrentFeature(feature as Feature);
return {
type: 'FeatureCollection',
features: [feature],
};
}
protected onClick() {
return;
protected editFeature(endPoint: ILngLat): FeatureCollection {
this.endPoint = endPoint;
return this.createFeature();
}
private initCenterLayer() {
const centerStyle = this.getStyle('active_point');
const layer = new PointLayer()
.source([this.startPoint], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.color(centerStyle.color)
.size(centerStyle.size)
.style(centerStyle.style);
this.scene.addLayer(layer);
this.centerLayer = layer;
}
}

View File

@ -0,0 +1,54 @@
import { IInteractionTarget, ILayer, ILngLat, Popup, Scene } from '@antv/l7';
import turfCircle from '@turf/circle';
import turfDistance from '@turf/distance';
import { Feature, featureCollection, point } from '@turf/helpers';
import EditRender from '../render/edit';
import { DrawEvent } from '../util/constant';
import DrawFeature, { IDrawOption } from './draw_mode';
export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers';
export interface IDrawCircleOption extends IDrawOption {
units: unitsType;
steps: number;
}
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
export default class DrawEdit extends DrawFeature {
private center: ILngLat;
private endPoint: ILngLat;
// 绘制完成之后显示
private editLayer: EditRender;
constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
super(scene, options);
}
public setEditFeature(feature: Feature) {
this.currentFeature = feature;
}
protected onDragStart = (e: IInteractionTarget) => {
// @ts-ignore
};
protected getDefaultOptions() {
return {
steps: 64,
units: 'kilometres',
cursor: 'move',
};
}
protected onDragging = (e: IInteractionTarget) => {
this.endPoint = e.lngLat;
this.emit(DrawEvent.Edit, this.endPoint);
return;
};
protected onDragEnd = () => {
this.emit(DrawEvent.UPDATE, null);
this.disable();
};
protected onClick = () => {
return null;
};
}

View File

@ -1,40 +1,204 @@
import { Scene } from '@antv/l7';
import { Feature, FeatureCollection } from '@turf/helpers';
import DrawSource from '../source';
import {
IInteractionTarget,
ILayer,
ILngLat,
IPopup,
LineLayer,
PointLayer,
PolygonLayer,
Popup,
Scene,
} from '@antv/l7';
import turfCircle from '@turf/circle';
import turfDistance from '@turf/distance';
import {
Feature,
FeatureCollection,
featureCollection,
point,
} from '@turf/helpers';
import EditLayer from '../render/edit';
import RenderLayer from '../render/render';
import SelectLayer from '../render/selected';
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import DrawEdit from './draw_edit';
import DrawMode, { IDrawOption } from './draw_mode';
import DrawSelected from './draw_selected';
let CircleFeatureId = 0;
export interface IDrawOption {
data: FeatureCollection;
export interface IDrawFeatureOption extends IDrawOption {
units: unitsType;
steps: number;
}
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
export default abstract class DrawFeature extends DrawMode {
// 绘制完成之后显示
public selectMode: DrawSelected;
public editMode: DrawEdit;
protected renderLayer: RenderLayer;
protected selectLayer: SelectLayer;
protected editLayer: EditLayer;
protected centerLayer: ILayer;
export type DrawStatus = 'Drawing' | 'Selected' | 'Edit' | 'Finish';
export default abstract class DrawFeature {
private source: DrawSource;
private scene: Scene;
constructor(scene: Scene, options: IDrawOption) {
const { data } = options;
this.scene = scene;
this.source = new DrawSource(data);
// 编辑过程中显示
protected drawLayer: ILayer;
protected drawLineLayer: ILayer;
constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
super(scene, options);
this.renderLayer = new RenderLayer(this);
this.selectLayer = new SelectLayer(this);
this.editLayer = new EditLayer(this);
this.selectMode = new DrawSelected(this.scene, {});
this.editMode = new DrawEdit(this.scene, {});
this.selectMode.on(DrawEvent.UPDATE, this.onDrawUpdate);
this.selectMode.on(DrawEvent.Move, this.onDrawMove);
this.editMode.on(DrawEvent.MODE_CHANGE, this.onModeChange);
this.editMode.on(DrawEvent.UPDATE, this.onDrawUpdate);
this.editMode.on(DrawEvent.Edit, this.onDrawEdit);
this.selectMode.on(DrawEvent.MODE_CHANGE, this.onModeChange);
this.on(DrawEvent.CREATE, this.onDrawCreate);
this.on(DrawEvent.MODE_CHANGE, this.onModeChange);
}
public enable() {
this.scene.on('dragstart', this.onDragStart);
this.scene.on('drag', this.onDragging);
this.scene.on('dragend', this.onDragEnd);
this.scene.on('click', this.onClick);
protected getDefaultOptions() {
return {
steps: 64,
units: 'kilometres',
cursor: 'crosshair',
};
}
protected abstract onDragStart(e: IInteractionTarget): void;
protected abstract onDragging(e: IInteractionTarget): void;
protected abstract onDragEnd(e: IInteractionTarget): void;
protected abstract createFeature(e: ILngLat): FeatureCollection;
protected abstract moveFeature(e: ILngLat): Feature;
protected abstract editFeature(e: any): FeatureCollection;
protected ondrawLayerClick = () => {
if (this.currentFeature === null) {
return;
}
this.currentFeature = null;
this.renderLayer.updateData();
this.centerLayer.setData([]);
this.drawLayer.setData(InitFeature);
this.drawLineLayer.setData(InitFeature);
return;
};
protected initDrawFillLayer() {
const style = this.getStyle('active_fill');
const linestyle = this.getStyle('active_line');
this.drawLayer = new PolygonLayer()
.source(InitFeature)
.color(style.color)
.shape('fill')
.style(style.style);
this.drawLineLayer = new PolygonLayer()
.source(InitFeature)
.color(linestyle.color)
.size(linestyle.size)
.shape('line')
.style(linestyle.style);
this.scene.addLayer(this.drawLayer);
this.scene.addLayer(this.drawLineLayer);
}
public disable() {
this.scene.off('dragstart', this.onDragStart);
this.scene.off('drag', this.onDragging);
this.scene.off('dragend', this.onDragEnd);
this.scene.off('click', this.onClick);
protected updateDrawFillLayer(currentData: any) {
this.drawLayer.setData(currentData);
this.drawLineLayer.setData(currentData);
}
protected abstract onDragStart(): any;
private removeDrawLayer() {
this.scene.removeLayer(this.drawLayer);
this.scene.removeLayer(this.drawLineLayer);
this.scene.removeLayer(this.centerLayer);
}
protected abstract onDragging(): any;
private createCircleData(center: ILngLat, endPoint: ILngLat) {
const radius = turfDistance(
point([center.lng, center.lat]),
point([endPoint.lng, endPoint.lat]),
this.getOption('units'),
);
const feature = turfCircle([center.lng, center.lat], radius, {
units: this.getOption('units'),
steps: this.getOption('steps'),
properties: {
id: `${CircleFeatureId++}`,
active: true,
radius,
center,
endPoint,
},
});
this.currentFeature = feature as Feature;
return featureCollection([feature]);
}
protected abstract onDragEnd(): any;
private addDrawPopup(lnglat: ILngLat, dis: number) {
const popup = new Popup({
anchor: 'left',
closeButton: false,
})
.setLnglat(lnglat)
.setText(`半径:${dis.toFixed(2)}千米`);
this.scene.addPopup(popup);
this.popup = popup;
}
protected abstract onClick(): any;
private onModeChange = (mode: DrawModes[any]) => {
switch (mode) {
case DrawModes.DIRECT_SELECT:
this.selectLayer.hide();
this.editMode.setEditFeature(this.currentFeature as Feature);
this.editLayer.updateData(
featureCollection([this.currentFeature as Feature]),
);
this.editLayer.show();
break;
case DrawModes.SIMPLE_SELECT:
this.renderLayer.updateData();
this.selectMode.setSelectedFeature(this.currentFeature as Feature);
this.selectLayer.updateData(
featureCollection([this.currentFeature as Feature]),
);
this.selectLayer.show();
break;
case DrawModes.STATIC:
this.source.setFeatureUnActive(this.currentFeature as Feature);
this.renderLayer.updateData();
break;
}
};
private onDrawCreate = (feature: Feature) => {
this.source.addFeature(feature);
if (this.popup) {
this.popup.remove();
}
this.removeDrawLayer();
};
private onDrawUpdate = (feature: Feature) => {
this.source.updateFeature(this.currentFeature as Feature);
};
private onDrawMove = (delta: ILngLat) => {
const feature = this.moveFeature(delta);
this.currentFeature = feature;
this.selectLayer.updateData(featureCollection([feature]));
};
private onDrawEdit = (endpoint: ILngLat) => {
const feature = this.editFeature(endpoint);
this.currentFeature = feature.features[0];
this.editLayer.updateData(feature);
};
}

View File

@ -0,0 +1,99 @@
import { IInteractionTarget, IPopup, Scene } from '@antv/l7';
import { Feature, FeatureCollection } from '@turf/helpers';
import { EventEmitter } from 'eventemitter3';
import { merge, throttle } from 'lodash';
import DrawSource from '../source';
import LayerStyles from '../util/layerstyle';
export interface IDrawOption {
data: FeatureCollection;
style: any;
}
export type DrawStatus =
| 'Drawing'
| 'DrawSelected'
| 'DrawEdit'
| 'DrawFinish'
| 'EditFinish';
export default abstract class DrawMode extends EventEmitter {
public source: DrawSource;
public scene: Scene;
protected options: {
[key: string]: any;
} = {
style: LayerStyles,
};
protected drawStatus: DrawStatus = 'Drawing';
protected currentFeature: Feature | null;
protected isEnable: boolean = false;
protected popup: IPopup;
constructor(scene: Scene, options: Partial<IDrawOption> = {}) {
super();
const { data } = options;
this.scene = scene;
this.source = new DrawSource(data);
this.options = merge(this.options, this.getDefaultOptions(), options);
}
public enable() {
if (this.isEnable) {
return;
}
// @ts-ignore
this.scene.map.dragPan.disable();
this.scene.on('dragstart', this.onDragStart);
this.scene.on('dragging', this.onDragging);
this.scene.on('dragend', this.onDragEnd);
this.setCursor(this.getOption('cursor'));
this.isEnable = true;
}
public disable() {
if (!this.isEnable) {
return;
}
this.scene.off('dragstart', this.onDragStart);
this.scene.off('dragging', this.onDragging);
this.scene.off('dragend', this.onDragEnd);
// this.scene.off('click', this.onClick);
this.resetCursor();
// @ts-ignore
this.scene.map.dragPan.enable();
this.isEnable = false;
}
public setCurrentFeature(feature: Feature) {
this.currentFeature = feature;
this.source.setFeatureActive(feature);
}
public getOption(key: string) {
return this.options[key];
}
public getStyle(id: string) {
return this.getOption('style')[id];
}
public setCursor(cursor: string) {
const container = this.scene.getContainer();
if (container) {
container.style.cursor = cursor;
}
}
public resetCursor() {
const container = this.scene.getContainer();
if (container) {
container.style.cursor = 'default';
}
}
protected getDefaultOptions() {
return {};
}
protected abstract onDragStart(e: IInteractionTarget): void;
protected abstract onDragging(e: IInteractionTarget): void;
protected abstract onDragEnd(e: IInteractionTarget): void;
}

View File

View File

@ -0,0 +1,103 @@
import {
IInteractionTarget,
ILayer,
ILngLat,
IPopup,
LineLayer,
PointLayer,
PolygonLayer,
Popup,
Scene,
} from '@antv/l7';
import { Feature, FeatureCollection, point } from '@turf/helpers';
import selectRender from '../render/selected';
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
import { creatRect } from '../util/create_geometry';
import moveFeatures, { movePoint, moveRing } from '../util/move_featrues';
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
export interface IDrawRectOption extends IDrawFeatureOption {
units: unitsType;
steps: number;
}
export default class DrawRect extends DrawFeature {
private startPoint: ILngLat;
private endPoint: ILngLat;
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
super(scene, options);
this.selectLayer = new selectRender(this);
}
protected onDragStart = (e: IInteractionTarget) => {
this.startPoint = e.lngLat;
this.setCursor('grabbing');
this.initCenterLayer();
this.initDrawFillLayer();
this.centerLayer.setData([this.startPoint]);
};
protected onDragging = (e: IInteractionTarget) => {
this.endPoint = e.lngLat;
const feature = this.createFeature();
this.updateDrawFillLayer(feature);
};
protected onDragEnd = () => {
this.emit(DrawEvent.CREATE, this.currentFeature);
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
this.disable();
};
protected moveFeature(delta: ILngLat): Feature {
const newFeature = moveFeatures([this.currentFeature as Feature], delta)[0];
const properties = newFeature.properties as {
startPoint: [number, number];
endPoint: [number, number];
};
const { startPoint, endPoint } = properties;
properties.startPoint = movePoint(startPoint, delta);
properties.endPoint = movePoint(endPoint, delta);
newFeature.properties = properties;
this.startPoint = {
lat: startPoint[1],
lng: startPoint[0],
};
this.endPoint = {
lat: endPoint[1],
lng: endPoint[0],
};
return newFeature;
}
protected createFeature(): FeatureCollection {
const feature = creatRect(
[this.startPoint.lng, this.startPoint.lat],
[this.endPoint.lng, this.endPoint.lat],
);
this.setCurrentFeature(feature as Feature);
return {
type: 'FeatureCollection',
features: [feature],
};
}
protected editFeature(endPoint: ILngLat): FeatureCollection {
this.endPoint = endPoint;
return this.createFeature();
}
private initCenterLayer() {
const centerStyle = this.getStyle('active_point');
const layer = new PointLayer()
.source([this.startPoint], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.color(centerStyle.color)
.size(centerStyle.size)
.style(centerStyle.style);
this.scene.addLayer(layer);
this.centerLayer = layer;
}
}

View File

@ -0,0 +1,115 @@
import {
IInteractionTarget,
ILayer,
ILngLat,
IPopup,
LineLayer,
PointLayer,
PolygonLayer,
Popup,
Scene,
} from '@antv/l7';
import turfCircle from '@turf/circle';
import turfDistance from '@turf/distance';
import { Feature, featureCollection, point } from '@turf/helpers';
import EditRender from '../render/selected';
import { DrawEvent, DrawModes } from '../util/constant';
import moveFeatures from '../util/move_featrues';
import DrawFeature, { IDrawOption } from './draw_mode';
export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers';
export interface IDrawCircleOption extends IDrawOption {
units: unitsType;
steps: number;
}
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
export default class DrawSelect extends DrawFeature {
private center: ILngLat;
private dragStartPoint: ILngLat;
// 绘制完成之后显示
private editLayer: EditRender;
constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
super(scene, options);
// this.editLayer = new EditRender(this);
}
public setSelectedFeature(feature: Feature) {
this.currentFeature = feature;
// this.editLayer.updateData({
// type: 'FeatureCollection',
// features: [feature],
// });
// this.editLayer.show();
}
protected onDragStart = (e: IInteractionTarget) => {
// @ts-ignore
this.scene.map.dragPan.disable();
this.dragStartPoint = e.lngLat;
};
protected getDefaultOptions() {
return {
steps: 64,
units: 'kilometres',
cursor: 'move',
};
}
protected onDragging = (e: IInteractionTarget) => {
const delta = {
lng: e.lngLat.lng - this.dragStartPoint.lng,
lat: e.lngLat.lat - this.dragStartPoint.lat,
};
this.emit(DrawEvent.Move, delta);
this.dragStartPoint = e.lngLat;
return;
};
protected onDragEnd = () => {
this.emit(DrawEvent.UPDATE, this.currentFeature);
};
protected onClick = () => {
return null;
};
private createCircleData(center: ILngLat, endPoint: ILngLat) {
const radius = turfDistance(
point([center.lng, center.lat]),
point([endPoint.lng, endPoint.lat]),
this.getOption('units'),
);
const feature = turfCircle([center.lng, center.lat], radius, {
units: this.getOption('units'),
steps: this.getOption('steps'),
properties: {
id: `${this.currentFeature?.properties?.id}`,
active: true,
radius,
center,
endPoint,
},
});
this.currentFeature = feature as Feature;
return featureCollection([feature]);
}
private moveCircle(feature: Feature, delta: ILngLat) {
const preCenter = feature?.properties?.center as ILngLat;
const preEndPoint = feature?.properties?.endPoint as ILngLat;
const newCenter = {
lng: preCenter.lng + delta.lng,
lat: preCenter.lat + delta.lat,
};
const newEndPoint = {
lng: preEndPoint.lng + delta.lng,
lat: preEndPoint.lat + delta.lat,
};
const newCircle = this.createCircleData(newCenter, newEndPoint);
// this.centerLayer.setData([newCenter]);
this.editLayer.updateData(newCircle);
}
}

View File

@ -0,0 +1,3 @@
import DrawCircle from './draw_circle';
import DrawRect from './draw_rect';
export { DrawCircle, DrawRect };

View File

View File

@ -0,0 +1,82 @@
import {
IInteractionTarget,
ILayer,
ILngLat,
IPopup,
LineLayer,
PointLayer,
PolygonLayer,
Popup,
Scene,
} from '@antv/l7';
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
import Draw from '../modes/draw_mode';
import { DrawEvent, DrawModes } from '../util/constant';
export default class DrawLayer {
private polygonLayer: ILayer;
private lineLayer: ILayer;
private draw: Draw;
constructor(draw: Draw) {
this.draw = draw;
this.init();
}
public init() {
const style = this.draw.getStyle('normal_fill');
const linestyle = this.draw.getStyle('normal_line');
this.polygonLayer = new PolygonLayer({
zIndex: 0,
})
.source(InitFeature)
.filter('active', (active) => {
return !active;
})
.shape('fill')
.active(true)
.color(style.color)
.style(style.style);
this.lineLayer = new LineLayer({
zIndex: 1,
})
.source(InitFeature)
.shape('line')
.filter('active', (active) => {
return !active;
})
.size(linestyle.size)
.color(linestyle.color)
.style(linestyle.style);
this.draw.scene.addLayer(this.polygonLayer);
this.draw.scene.addLayer(this.lineLayer);
this.addLayerEvent();
}
public updateData() {
this.lineLayer.setData(this.draw.source.data);
this.polygonLayer.setData(this.draw.source.data);
}
public destroy() {
this.draw.scene.removeLayer(this.lineLayer);
this.draw.scene.removeLayer(this.polygonLayer);
}
public show() {
this.lineLayer.show();
this.polygonLayer.show();
}
public hide() {
this.lineLayer.hide();
this.polygonLayer.hide();
}
private addLayerEvent() {
this.polygonLayer.on('click', (e) => {
this.draw.setCurrentFeature(e.feature);
this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
});
}
}

View File

@ -0,0 +1,145 @@
import {
IInteractionTarget,
ILayer,
ILngLat,
IPopup,
LineLayer,
PointLayer,
PolygonLayer,
Popup,
Scene,
} from '@antv/l7';
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
import { Feature } from '@turf/helpers';
import Draw from '../modes/draw_feature';
import { DrawEvent, DrawModes } from '../util/constant';
export default class EditRenderLayer {
private polygonLayer: ILayer;
private lineLayer: ILayer;
private centerLayer: ILayer;
private endPointLayer: ILayer;
private draw: Draw;
private currentFeature: Feature;
constructor(draw: Draw) {
this.draw = draw;
this.init();
}
public init() {
const style = this.draw.getStyle('active_fill');
const linestyle = this.draw.getStyle('active_line');
const centerStyle = this.draw.getStyle('active_point');
this.polygonLayer = new PolygonLayer()
.source(InitFeature)
.shape('fill')
.color(style.color)
.style(style.style);
this.lineLayer = new LineLayer()
.source(InitFeature)
.shape('line')
.size(linestyle.size)
.color(linestyle.color)
.style(linestyle.style);
this.centerLayer = new PointLayer({
zIndex: 3,
blend: 'normal',
})
.source([], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.color(centerStyle.color)
.size(centerStyle.size)
.style(centerStyle.style);
this.endPointLayer = new PointLayer({
zIndex: 4,
blend: 'normal',
})
.source([], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.color(centerStyle.color)
.size(centerStyle.size)
.style(centerStyle.style);
this.draw.scene.addLayer(this.polygonLayer);
this.draw.scene.addLayer(this.lineLayer);
this.draw.scene.addLayer(this.centerLayer);
this.draw.scene.addLayer(this.endPointLayer);
}
public updateData(data: any) {
if (this.currentFeature === undefined) {
this.addLayerEvent();
}
this.currentFeature = data.features[0];
this.lineLayer.setData(data);
this.polygonLayer.setData(data);
const properties = data.features[0].properties;
if (properties.startPoint) {
this.centerLayer.setData([
{
lng: properties.startPoint[0],
lat: properties.startPoint[1],
},
]);
}
if (properties.endPoint) {
this.endPointLayer.setData([
{
lng: properties.endPoint[0],
lat: properties.endPoint[1],
},
]);
}
}
public destroy() {
this.draw.scene.removeLayer(this.lineLayer);
this.draw.scene.removeLayer(this.polygonLayer);
this.draw.scene.removeLayer(this.centerLayer);
this.draw.scene.removeLayer(this.endPointLayer);
}
public show() {
this.lineLayer.show();
this.polygonLayer.show();
this.centerLayer.show();
this.endPointLayer.show();
}
public hide() {
this.lineLayer.hide();
this.polygonLayer.hide();
this.centerLayer.hide();
this.endPointLayer.hide();
}
private addLayerEvent() {
this.endPointLayer.on('mousemove', (e) => {
this.draw.setCursor('move');
this.draw.editMode.enable();
});
this.endPointLayer.on('unmousemove', (e) => {
this.draw.resetCursor();
this.draw.editMode.disable();
});
this.polygonLayer.on('unclick', (e) => {
// 取消选中 回到初始态
this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
this.draw.editMode.disable();
this.hide();
});
}
}

View File

@ -0,0 +1,82 @@
import {
IInteractionTarget,
ILayer,
ILngLat,
IPopup,
LineLayer,
PointLayer,
PolygonLayer,
Popup,
Scene,
} from '@antv/l7';
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
import Draw from '../modes/draw_mode';
import { DrawEvent, DrawModes } from '../util/constant';
export default class RenderLayer {
private polygonLayer: ILayer;
private lineLayer: ILayer;
private draw: Draw;
constructor(draw: Draw) {
this.draw = draw;
this.init();
}
public init() {
const style = this.draw.getStyle('normal_fill');
const linestyle = this.draw.getStyle('normal_line');
this.polygonLayer = new PolygonLayer({
zIndex: 0,
})
.source(InitFeature)
.filter('active', (active) => {
return !active;
})
.shape('fill')
.active(true)
.color(style.color)
.style(style.style);
this.lineLayer = new LineLayer({
zIndex: 1,
})
.source(InitFeature)
.shape('line')
.filter('active', (active) => {
return !active;
})
.size(linestyle.size)
.color(linestyle.color)
.style(linestyle.style);
this.draw.scene.addLayer(this.polygonLayer);
this.draw.scene.addLayer(this.lineLayer);
this.addLayerEvent();
}
public updateData() {
this.lineLayer.setData(this.draw.source.data);
this.polygonLayer.setData(this.draw.source.data);
}
public destroy() {
this.draw.scene.removeLayer(this.lineLayer);
this.draw.scene.removeLayer(this.polygonLayer);
}
public show() {
this.lineLayer.show();
this.polygonLayer.show();
}
public hide() {
this.lineLayer.hide();
this.polygonLayer.hide();
}
private addLayerEvent() {
this.polygonLayer.on('click', (e) => {
this.draw.setCurrentFeature(e.feature);
this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
});
}
}

View File

@ -0,0 +1,149 @@
import {
IInteractionTarget,
ILayer,
ILngLat,
IPopup,
LineLayer,
PointLayer,
PolygonLayer,
Popup,
Scene,
} from '@antv/l7';
const InitFeature = {
type: 'FeatureCollection',
features: [],
};
import { Feature } from '@turf/helpers';
import Draw from '../modes/draw_feature';
import { DrawEvent, DrawModes } from '../util/constant';
export default class EditRenderLayer {
private polygonLayer: ILayer;
private lineLayer: ILayer;
private centerLayer: ILayer;
private endPointLayer: ILayer;
private draw: Draw;
private currentFeature: Feature;
constructor(draw: Draw) {
this.draw = draw;
this.init();
}
public init() {
const style = this.draw.getStyle('active_fill');
const linestyle = this.draw.getStyle('active_line');
const centerStyle = this.draw.getStyle('active_point');
this.polygonLayer = new PolygonLayer()
.source(InitFeature)
.shape('fill')
.color(style.color)
.style(style.style);
this.lineLayer = new LineLayer()
.source(InitFeature)
.shape('line')
.size(linestyle.size)
.color(linestyle.color)
.style(linestyle.style);
this.centerLayer = new PointLayer({
zIndex: 3,
blend: 'normal',
})
.source([], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.color(centerStyle.color)
.size(centerStyle.size)
.style(centerStyle.style);
this.endPointLayer = new PointLayer({
zIndex: 4,
blend: 'normal',
})
.source([], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.color(centerStyle.color)
.size(centerStyle.size)
.style(centerStyle.style);
this.draw.scene.addLayer(this.polygonLayer);
this.draw.scene.addLayer(this.lineLayer);
this.draw.scene.addLayer(this.centerLayer);
}
public updateData(data: any) {
if (this.currentFeature === undefined) {
this.addLayerEvent();
}
this.currentFeature = data.features[0];
this.lineLayer.setData(data);
this.polygonLayer.setData(data);
const properties = data.features[0].properties;
if (properties.startPoint) {
this.centerLayer.setData([
{
lng: properties.startPoint[0],
lat: properties.startPoint[1],
},
]);
}
if (properties.endPoint) {
this.endPointLayer.setData([
{
lng: properties.endPoint[0],
lat: properties.endPoint[1],
},
]);
}
}
public destroy() {
this.draw.scene.removeLayer(this.lineLayer);
this.draw.scene.removeLayer(this.polygonLayer);
// this.draw.scene.removeLayer(this.centerLayer);
}
public show() {
this.lineLayer.show();
this.polygonLayer.show();
// this.centerLayer.show();
}
public hide() {
this.lineLayer.hide();
this.polygonLayer.hide();
// this.centerLayer.hide();
}
private addLayerEvent() {
this.polygonLayer.on('mousemove', (e) => {
this.draw.setCursor('move');
this.draw.selectMode.enable();
});
this.polygonLayer.on('unmousemove', (e) => {
this.draw.resetCursor();
this.draw.selectMode.disable();
});
this.polygonLayer.on('click', (e) => {
// 进入编辑态
this.draw.selectMode.disable();
this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.DIRECT_SELECT);
this.hide();
});
this.polygonLayer.on('unclick', (e) => {
// 取消选中 回到初始态
this.draw.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
this.draw.selectMode.disable();
this.hide();
});
}
}

View File

@ -1,6 +1,6 @@
import { Feature, FeatureCollection } from '@turf/helpers';
export default class DrawSource {
private data: FeatureCollection;
public data: FeatureCollection;
constructor(data?: FeatureCollection) {
this.data = data || this.getDefaultData();
}
@ -22,6 +22,18 @@ export default class DrawSource {
this.data.features.splice(index, 1);
}
}
public setFeatureActive(feature: Feature) {
const fe = this.getFeature(feature?.properties?.id);
if (fe && fe.properties) {
fe.properties.active = true;
}
}
public setFeatureUnActive(feature: Feature) {
const fe = this.getFeature(feature?.properties?.id);
if (fe && fe.properties) {
fe.properties.active = false;
}
}
public updateFeature(feature: Feature) {
this.removeFeature(feature);
this.addFeature(feature);

View File

@ -0,0 +1,38 @@
export enum DrawEvent {
CREATE = 'draw.create',
DELETE = 'draw.delete',
Move = 'draw.move',
Edit = 'draw.edit',
UPDATE = 'draw.update',
SELECTION_CHANGE = 'draw.selectionchange',
MODE_CHANGE = 'draw.modechange',
ACTIONABLE = 'draw.actionable',
RENDER = 'draw.render',
COMBINE_FEATURES = 'draw.combine',
UNCOMBINE_FEATURES = 'draw.uncombine',
}
export enum DrawModes {
DRAW_Circle = 'draw_circle',
DRAW_Rect = 'draw_react',
DRAW_LINE_STRING = 'draw_line_string',
DRAW_POLYGON = 'draw_polygon',
DRAW_POINT = 'draw_point',
SIMPLE_SELECT = 'simple_select',
DIRECT_SELECT = 'direct_select',
STATIC = 'static',
}
export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers';
export enum FeatureType {
FEATURE = 'Feature',
POLYGON = 'Polygon',
LINE_STRING = 'LineString',
POINT = 'Point',
FEATURE_COLLECTION = 'FeatureCollection',
MULTI_PREFIX = 'Multi',
MULTI_POINT = 'MultiPoint',
MULTI_LINE_STRING = 'MultiLineString',
MULTI_POLYGON = 'MultiPolygon',
}

View File

@ -0,0 +1,60 @@
import turfCircle from '@turf/circle';
import turfDistance from '@turf/distance';
import { Feature, featureCollection, point } from '@turf/helpers';
import { unitsType } from './constant';
export function createCircle(
center: [number, number],
endPoint: [number, number],
options: {
units: unitsType;
steps: number;
id: string;
},
): Feature {
const radius = turfDistance(point(center), point(endPoint), options);
const feature = turfCircle(center, radius, {
units: options.units,
steps: options.steps,
properties: {
id: options.id,
active: true,
radius,
startPoint: center,
endPoint,
path: [center, endPoint],
},
});
return feature as Feature;
}
export function creatRect(
startPoint: [number, number],
endPoint: [number, number],
): Feature {
const minX = Math.min(startPoint[0], endPoint[0]);
const minY = Math.min(startPoint[1], endPoint[1]);
const maxX = Math.max(startPoint[0], endPoint[0]);
const maxY = Math.max(startPoint[1], endPoint[1]);
const feature = {
type: 'Feature',
properties: {
active: true,
startPoint,
endPoint,
},
geometry: {
type: 'Polygon',
coordinates: [
[
[minX, minY],
[minX, maxY],
[maxX, maxY],
[maxX, minY],
[minX, minY],
],
],
},
};
return feature as Feature;
}

View File

@ -0,0 +1,69 @@
const LayerStyles = {
// 正常显示样式
normal_fill: {
type: 'PolygonLayer',
shape: 'fill',
color: '#3bb2d0',
style: {
opacity: 0.1,
},
},
// xai'm'z
active_fill: {
type: 'PolygonLayer',
shape: 'fill',
color: '#fbb03b',
style: {
opacity: 0.1,
},
},
normal_point: {
type: 'PointLayer',
shape: 'circle',
color: '#3bb2d0',
size: 3,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
mid_point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 3,
style: {},
},
active_point: {
type: 'PointLayer',
shape: 'circle',
color: '#fbb03b',
size: 5,
style: {
stroke: '#fff',
strokeWidth: 2,
},
},
normal_line: {
type: 'LineLayer',
shape: 'line',
size: 1,
color: '#3bb2d0',
style: {
opacity: 1,
},
},
active_line: {
type: 'LineLayer',
shape: 'line',
color: '#fbb03b',
size: 1,
style: {
opacity: 1,
lineType: 'dash',
dashArray: [2, 2],
},
},
};
export default LayerStyles;

View File

@ -0,0 +1,52 @@
import { Feature, Geometry, Properties } from '@turf/helpers';
import { FeatureType } from './constant';
interface IDelta {
lng: number;
lat: number;
}
type RingType = Array<[number, number]>;
export default function(features: Feature[], delta: IDelta) {
features.forEach((feature) => {
const geometry = feature.geometry as Geometry;
let nextCoord;
const { type, coordinates } = geometry;
switch (type) {
case FeatureType.POINT:
nextCoord = movePoint(coordinates as [number, number], delta);
break;
case FeatureType.LINE_STRING:
case FeatureType.MULTI_POINT:
nextCoord = moveRing(coordinates as RingType, delta);
break;
case FeatureType.POLYGON:
case FeatureType.MULTI_LINE_STRING:
nextCoord = moveMultiPolygon(coordinates as RingType[], delta);
break;
case FeatureType.MULTI_POLYGON:
nextCoord = (coordinates as RingType[][]).map((mult) =>
moveMultiPolygon(mult as RingType[], delta),
);
break;
}
if (nextCoord) {
geometry.coordinates = nextCoord;
}
});
return features;
}
export function movePoint(
coord: [number, number],
delta: IDelta,
): [number, number] {
return [coord[0] + delta.lng, coord[1] + delta.lat];
}
export function moveRing(coords: RingType, delta: IDelta) {
return coords.map((coord) => movePoint(coord, delta));
}
export function moveMultiPolygon(mult: RingType[], delta: IDelta) {
return mult.map((ring) => moveRing(ring, delta));
}

View File

@ -51,11 +51,13 @@ export default class DataMappingPlugin implements ILayerPlugin {
filterData = dataArray.filter((record: IParseDataItem) => {
return this.applyAttributeMapping(filter, record)[0];
});
filter.needRemapping = false;
}
if (attributesToRemapping.length) {
// 过滤数据
if (filter?.needRemapping) {
layer.setEncodedData(this.mapping(attributes, filterData));
filter.needRemapping = false;
} else {
layer.setEncodedData(
this.mapping(

View File

@ -30,7 +30,7 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
normal: {
blend: 'additive',
},
fill: {},
fill: { blend: 'normal' },
extrude: {},
image: {},
icon: {},

View File

@ -57,6 +57,8 @@ void main() {
float opacity_t = smoothstep(0.0, antialiased_blur, outer_df);
if(u_stroke_width <0.01 ) {
gl_FragColor = v_color * opacity_t;
gl_FragColor.a = gl_FragColor.a * u_opacity;
gl_FragColor = filterColor(gl_FragColor);
return;
}
float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(

View File

@ -5,8 +5,10 @@
"main": "lib/index.js",
"module": "es/index.js",
"types": "es/index.d.ts",
"unpkg": "dist/l7-maps.js",
"sideEffects": false,
"files": [
"dist",
"lib",
"es",
"typings/index.d.ts",

View File

@ -0,0 +1,29 @@
import pkg from './package.json';
import typescript from 'rollup-plugin-typescript';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import buble from 'rollup-plugin-buble';
export default {
input: './src/index.ts',
plugins: [
typescript({
exclude: 'node_modules/**',
typescript: require('typescript')
}),
resolve(),
commonjs(),
buble({
transforms: { generator: false }
})
],
output: [
{
format: 'umd',
name: 'L7-Maps',
file: pkg.unpkg,
sourcemap: true
}
]
};

View File

@ -3,6 +3,6 @@ export const MapTheme: {
} = {
dark: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true',
light: 'amap://styles/1fd9f8ef9751298f11f5c56968312c70?isPublic=true',
normal: 'amap://styles/12db649ba3493333b098127ed892c0cb?isPublic=true',
normal: 'amap://styles/normal',
blank: 'amap://styles/07c17002b38775b32a7a76c66cf90e99?isPublic=true',
};

View File

@ -1,11 +1,10 @@
# `react`
> TODO: description
> L7
## Usage
```
const react = require('react');
import { Scene } from '@antv/l7-react';
// TODO: DEMONSTRATE API
```

View File

@ -264,6 +264,9 @@ class Scene
this.mapService.panTo(pixel);
}
public getContainer() {
return this.mapService.getContainer();
}
public setZoom(zoom: number): void {
this.mapService.setZoom(zoom);
}

View File

@ -9,7 +9,7 @@ export enum anchorType {
'RIGHT' = 'right',
}
export const anchorTranslate = {
export const anchorTranslate: { [key: string]: string } = {
center: 'translate(-50%,-50%)',
top: 'translate(-50%,0)',
'top-left': 'translate(0,0)',

View File

@ -40,7 +40,7 @@ function sum(x: number[]) {
}
// Initializing the sum as the first number in the array
let sumNum = x[0];
let sumNum = x[0] * 1;
// Keeping track of the floating-point error correction
let correction = 0;
@ -71,16 +71,45 @@ function mean(x: number[]) {
return sum(x) / x.length;
}
export { sum, max, min, mean };
function mode(x: any[]) {
if (x.length === 0) {
throw new Error('mean requires at least one data point');
}
if (x.length < 3) {
return x[0];
}
x.sort();
let last = x[0];
let value = NaN;
let maxSeen = 0;
let seenThis = 1;
for (let i = 1; i < x.length + 1; i++) {
if (x[i] !== last) {
if (seenThis > maxSeen) {
maxSeen = seenThis;
value = last;
}
seenThis = 1;
last = x[i];
} else {
seenThis++;
}
}
return value;
}
export { sum, max, min, mean, mode };
export const statMap: { [key: string]: any } = {
min,
max,
mean,
sum,
mode,
};
export function getColumn(data: IItemData[], columnName: string) {
return data.map((item: IItemData) => {
return item[columnName] * 1;
return item[columnName];
});
}

View File

@ -0,0 +1,45 @@
import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
import { DrawCircle } from '@antv/l7-draw';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Circle extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'light',
center: [113.775374, 28.31067],
zoom: 12,
}),
});
this.scene = scene;
scene.on('loaded', () => {
const drawCircle = new DrawCircle(scene);
drawCircle.enable();
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

View File

@ -55,7 +55,7 @@ export default class MultiPolygon extends React.Component {
scene.addLayer(circleLayer);
scene.on('dragstart', (e: any) => {
// @ts-ignore
scene.map.dragdrag.disable();
scene.map.drag.disable();
startPoint = e.lngLat;
const layer = new PointLayer()
.source([startPoint], {

View File

@ -1,43 +1,9 @@
import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
import { DrawRect } from '@antv/l7-draw';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
const createGeoJSONRect = (
point1: [number, number],
point2: [number, number],
) => {
const minX = Math.min(point1[0], point2[0]);
const minY = Math.min(point1[1], point2[1]);
const maxX = Math.max(point1[0], point2[0]);
const maxY = Math.max(point1[1], point2[1]);
return {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[minX, minY],
[minX, maxY],
[maxX, maxY],
[maxX, minY],
[minX, minY],
],
],
},
},
],
},
};
};
export default class MultiPolygon extends React.Component {
private gui: dat.GUI;
private $stats: Node;
import * as React from 'react';
export default class Circle extends React.Component {
private scene: Scene;
public componentWillUnmount() {
@ -49,63 +15,16 @@ export default class MultiPolygon extends React.Component {
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'normal',
center: [121.775374, 31.31067],
zoom: 15,
style: 'light',
center: [113.775374, 28.31067],
zoom: 12,
}),
});
this.scene = scene;
scene.on('loaded', () => {
let startPoint = {};
const circleLayer = new PolygonLayer()
.source({
type: 'FeatureCollection',
features: [],
})
.color('#fbb03b')
.shape('fill')
.style({
opacity: 0.6,
});
scene.addLayer(circleLayer);
scene.on('panstart', (e: any) => {
// @ts-ignore
scene.map.dragPan.disable();
startPoint = e.lngLat;
const layer = new PointLayer()
.source([startPoint], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.color('#fbb03b')
.size(5)
.style({
stroke: '#fff',
strokeWidth: 2,
});
scene.addLayer(layer);
});
scene.on('panmove', (e: any) => {
// @ts-ignore
const start = [startPoint.lng, startPoint.lat];
const circleData = createGeoJSONRect(start as [number, number], [
e.lngLat.lng,
e.lngLat.lat,
]);
circleLayer.setData(circleData.data);
// const popup = new Popup().setText(`${dis}`).setLnglat(e.lngLat);
// scene.addPopup(popup);
});
scene.on('panend', (e: any) => {
// @ts-ignore
scene.map.dragPan.enable();
});
const drawRect = new DrawRect(scene);
drawRect.enable();
});
}

View File

@ -1,10 +1,12 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import Circle from './Components/Circle';
import DrawCircle from './Components/DrawCircle';
import DrawPolygon from './Components/DrawPolygon';
import DrawRect from './Components/DrawRect';
storiesOf('绘制', module)
.add('圆', () => <Circle />, {})
.add('绘制圆', () => <DrawCircle />, {})
.add('四边形', () => <DrawRect />, {})
.add('绘制面', () => <DrawPolygon />, {});

View File

@ -2,8 +2,6 @@ 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;
@ -16,87 +14,58 @@ export default class HexagonLayerDemo extends React.Component {
}
}
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 GaodeMap({
center: [120.19382669582967, 30.258134],
map: new Mapbox({
pitch: 0,
style: 'light',
zoom: 3,
style: 'blank',
center: [140.067171, 36.26186],
zoom: 0,
maxZoom: 0,
}),
});
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.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/3dadb1f5-8f54-4449-8206-72db6e142c40.json',
)
.then((res) => res.json())
.then((data) => {
const pointLayer = new HeatmapLayer({
autoFit: true,
})
.source(data, {
transforms: [
{
type: 'hexagon',
size: 500000,
field: 'name',
method: 'mode',
},
],
})
.shape('hexagon') // 支持 circle, hexagon,triangle
.color('mode', [
'#ffffe5',
'#fff7bc',
'#fee391',
'#fec44f',
'#fe9929',
'#ec7014',
'#cc4c02',
'#993404',
'#662506',
])
.active(false)
.style({
coverage: 0.7,
// angle: 0.5,
opacity: 1.0,
});
scene.addLayer(pointLayer);
console.log(pointLayer.getSource());
this.scene = scene;
});
scene.render();
});
// });
});
}
public render() {

1391
yarn.lock

File diff suppressed because it is too large Load Diff