mirror of https://gitee.com/antv-l7/antv-l7
fix(heatmap): 修复热力图某些设备上黑色 fix #278
This commit is contained in:
parent
62052648bc
commit
b8f58992d1
|
@ -40,9 +40,46 @@ control 配置项
|
||||||
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
|
| -------- | --------------------------------------------- | ---------- | ------------------------------- |
|
||||||
| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 |
|
| position | `bottomright、topright、 bottomleft’ topleft` | `topright` | 组件位置 |
|
||||||
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
|
| layout | `horizontal、 vertical` | `vertical` | 组件布局 支持水平和垂直两种布局 |
|
||||||
| controls | | 子组件 |
|
| controls | `controlOptions` | | 设置 UI 组件添加哪些绘制工具 |
|
||||||
| style | | | 地图绘制样式 |
|
| style | | | 地图绘制样式 |
|
||||||
|
|
||||||
|
**controlOptions**
|
||||||
|
UI 组件配置项
|
||||||
|
|
||||||
|
- point `boolean | drawOption` 绘制点工具配置
|
||||||
|
- line `boolean | drawOption` 绘制线工具配置
|
||||||
|
- polygon `boolean | drawOption` 绘制面工具配置
|
||||||
|
- circle `boolean | drawOption` 绘制圆工具配置
|
||||||
|
- rect `boolean | drawOption` 绘制矩形工具配置
|
||||||
|
- delete `boolean | drawOption` 添加删除工具
|
||||||
|
|
||||||
|
默认配置
|
||||||
|
|
||||||
|
```
|
||||||
|
{
|
||||||
|
point: true,
|
||||||
|
line: true,
|
||||||
|
polygon: true,
|
||||||
|
rect: true,
|
||||||
|
circle: true,
|
||||||
|
delete: true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
示例
|
||||||
|
|
||||||
|
```
|
||||||
|
{
|
||||||
|
point: false,
|
||||||
|
line: {
|
||||||
|
editEnable: false,
|
||||||
|
},
|
||||||
|
polygon: true,
|
||||||
|
rect: true,
|
||||||
|
circle: true,
|
||||||
|
delete: false
|
||||||
|
```
|
||||||
|
|
||||||
### 添加到地图
|
### 添加到地图
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
@ -109,6 +146,11 @@ const drawPoint = new DrawPolygon(scene);
|
||||||
drawPoint.enable();
|
drawPoint.enable();
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 配置项 DrawOption
|
||||||
|
|
||||||
|
- editEnable boolean 是否允许编辑
|
||||||
|
- selectEnable boolean 是否允许选中
|
||||||
|
|
||||||
### 方法
|
### 方法
|
||||||
|
|
||||||
#### enable
|
#### enable
|
||||||
|
@ -139,7 +181,7 @@ drawPoint.enable();
|
||||||
- normal 正常显示状态
|
- normal 正常显示状态
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
{
|
const style = {
|
||||||
active: {
|
active: {
|
||||||
point: {
|
point: {
|
||||||
type: 'PointLayer',
|
type: 'PointLayer',
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
"@types/enzyme-adapter-react-16": "^1.0.3",
|
"@types/enzyme-adapter-react-16": "^1.0.3",
|
||||||
"@types/gl": "^4.1.0",
|
"@types/gl": "^4.1.0",
|
||||||
"@types/jest": "^24.0.18",
|
"@types/jest": "^24.0.18",
|
||||||
"@types/node": "^12.12.22",
|
"@types/node": "^13.11.1",
|
||||||
"@types/storybook__react": "^4.0.2",
|
"@types/storybook__react": "^4.0.2",
|
||||||
"@types/supercluster": "^5.0.1",
|
"@types/supercluster": "^5.0.1",
|
||||||
"awesome-typescript-loader": "^5.2.1",
|
"awesome-typescript-loader": "^5.2.1",
|
||||||
|
|
|
@ -14,7 +14,9 @@ export default {
|
||||||
exclude: 'node_modules/**',
|
exclude: 'node_modules/**',
|
||||||
typescript: require('typescript')
|
typescript: require('typescript')
|
||||||
}),
|
}),
|
||||||
resolve(),
|
resolve({
|
||||||
|
preferBuiltins: false
|
||||||
|
}),
|
||||||
postcss({
|
postcss({
|
||||||
plugins: [
|
plugins: [
|
||||||
url({ url: 'inline' })
|
url({ url: 'inline' })
|
||||||
|
@ -31,6 +33,9 @@ export default {
|
||||||
}),
|
}),
|
||||||
terser()
|
terser()
|
||||||
],
|
],
|
||||||
|
external: [
|
||||||
|
'@antv/l7'
|
||||||
|
],
|
||||||
output: [
|
output: [
|
||||||
{
|
{
|
||||||
format: 'umd',
|
format: 'umd',
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: lzxue
|
* @Author: lzxue
|
||||||
* @Date: 2020-04-03 19:24:16
|
* @Date: 2020-04-03 19:24:16
|
||||||
* @Last Modified by: mikey.zhaopeng
|
* @Last Modified by: mikey.zhaopeng
|
||||||
* @Last Modified time: 2020-04-08 11:12:08
|
* @Last Modified time: 2020-04-09 19:34:41
|
||||||
*/
|
*/
|
||||||
import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7';
|
import { Control, DOM, IControlOption, PositionType, Scene } from '@antv/l7';
|
||||||
import './css/draw.less';
|
import './css/draw.less';
|
||||||
|
@ -15,6 +15,7 @@ import {
|
||||||
DrawPolygon,
|
DrawPolygon,
|
||||||
DrawRect,
|
DrawRect,
|
||||||
} from './modes';
|
} from './modes';
|
||||||
|
import { IDrawFeatureOption } from './modes/draw_feature';
|
||||||
const DrawType: {
|
const DrawType: {
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
} = {
|
} = {
|
||||||
|
@ -24,9 +25,10 @@ const DrawType: {
|
||||||
circle: DrawCircle,
|
circle: DrawCircle,
|
||||||
rect: DrawRect,
|
rect: DrawRect,
|
||||||
};
|
};
|
||||||
|
import { isObject, polygon } from '@turf/helpers';
|
||||||
import { DrawEvent, DrawModes } from './util/constant';
|
import { DrawEvent, DrawModes } from './util/constant';
|
||||||
export interface IControls {
|
export interface IControls {
|
||||||
[key: string]: boolean;
|
[key: string]: boolean | IDrawFeatureOption;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IDrawControlOption extends IControlOption {
|
export interface IDrawControlOption extends IControlOption {
|
||||||
|
@ -50,6 +52,11 @@ export class DrawControl extends Control {
|
||||||
position: PositionType.TOPLEFT,
|
position: PositionType.TOPLEFT,
|
||||||
controls: {
|
controls: {
|
||||||
point: true,
|
point: true,
|
||||||
|
line: true,
|
||||||
|
polygon: true,
|
||||||
|
rect: true,
|
||||||
|
circle: true,
|
||||||
|
delete: true,
|
||||||
},
|
},
|
||||||
name: 'draw',
|
name: 'draw',
|
||||||
};
|
};
|
||||||
|
@ -68,14 +75,15 @@ export class DrawControl extends Control {
|
||||||
public onRemove() {
|
public onRemove() {
|
||||||
for (const draw in this.draw) {
|
for (const draw in this.draw) {
|
||||||
if (this.draw[draw]) {
|
if (this.draw[draw]) {
|
||||||
this.draw[draw].destory();
|
this.draw[draw].destroy();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
private addControls(controls: IControls, container: HTMLElement) {
|
private addControls(controls: IControls, container: HTMLElement) {
|
||||||
for (const type in controls) {
|
for (const type in controls) {
|
||||||
if (DrawType[type]) {
|
if (DrawType[type] && controls[type] !== false) {
|
||||||
const draw = new DrawType[type](this.scene);
|
const drawOption = isObject(controls[type]) ? controls[type] : false;
|
||||||
|
const draw = new DrawType[type](this.scene, drawOption);
|
||||||
draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type));
|
draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type));
|
||||||
this.draw[type] = draw;
|
this.draw[type] = draw;
|
||||||
this.createButton(
|
this.createButton(
|
||||||
|
@ -84,7 +92,7 @@ export class DrawControl extends Control {
|
||||||
container,
|
container,
|
||||||
this.onButtonClick.bind(null, type),
|
this.onButtonClick.bind(null, type),
|
||||||
);
|
);
|
||||||
} else if (type === 'delete') {
|
} else if (type === 'delete' && controls[type] !== false) {
|
||||||
const draw = new DrawDelete(this.scene);
|
const draw = new DrawDelete(this.scene);
|
||||||
draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type));
|
draw.on(DrawEvent.MODE_CHANGE, this.onModeChange.bind(null, type));
|
||||||
this.createButton(
|
this.createButton(
|
||||||
|
|
|
@ -15,16 +15,12 @@ import { DrawEvent, DrawModes, unitsType } from '../util/constant';
|
||||||
import { createCircle, createPoint } from '../util/create_geometry';
|
import { createCircle, createPoint } from '../util/create_geometry';
|
||||||
import moveFeatures, { movePoint } from '../util/move_featrues';
|
import moveFeatures, { movePoint } from '../util/move_featrues';
|
||||||
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
|
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
|
||||||
export interface IDrawRectOption extends IDrawFeatureOption {
|
|
||||||
units: unitsType;
|
|
||||||
steps: number;
|
|
||||||
}
|
|
||||||
export default class DrawCircle extends DrawFeature {
|
export default class DrawCircle extends DrawFeature {
|
||||||
protected startPoint: ILngLat;
|
protected startPoint: ILngLat;
|
||||||
protected endPoint: ILngLat;
|
protected endPoint: ILngLat;
|
||||||
protected pointFeatures: Feature[];
|
protected pointFeatures: Feature[];
|
||||||
protected centerLayer: ILayer;
|
protected centerLayer: ILayer;
|
||||||
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
|
constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
|
||||||
super(scene, options);
|
super(scene, options);
|
||||||
this.type = 'circle';
|
this.type = 'circle';
|
||||||
}
|
}
|
||||||
|
@ -44,7 +40,7 @@ export default class DrawCircle extends DrawFeature {
|
||||||
this.source.setFeatureActive(feature);
|
this.source.setFeatureActive(feature);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected getDefaultOptions() {
|
protected getDefaultOptions(): Partial<IDrawFeatureOption> {
|
||||||
return {
|
return {
|
||||||
...super.getDefaultOptions(),
|
...super.getDefaultOptions(),
|
||||||
title: '绘制圆',
|
title: '绘制圆',
|
||||||
|
|
|
@ -1,16 +1,11 @@
|
||||||
import { IInteractionTarget, ILngLat, Scene } from '@antv/l7';
|
import { IInteractionTarget, ILngLat, Scene } from '@antv/l7';
|
||||||
import { Feature } from '@turf/helpers';
|
import { Feature } from '@turf/helpers';
|
||||||
import { DrawEvent } from '../util/constant';
|
import { DrawEvent } from '../util/constant';
|
||||||
|
import { IDrawFeatureOption } from './draw_feature';
|
||||||
import DrawFeature, { IDrawOption } from './draw_mode';
|
import DrawFeature, { IDrawOption } from './draw_mode';
|
||||||
export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers';
|
|
||||||
export interface IDrawCircleOption extends IDrawOption {
|
|
||||||
units: unitsType;
|
|
||||||
steps: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class DrawDelete extends DrawFeature {
|
export default class DrawDelete extends DrawFeature {
|
||||||
// 绘制完成之后显示
|
// 绘制完成之后显示
|
||||||
constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
|
constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
|
||||||
super(scene, options);
|
super(scene, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -20,7 +15,7 @@ export default class DrawDelete extends DrawFeature {
|
||||||
public disable() {
|
public disable() {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
protected getDefaultOptions() {
|
protected getDefaultOptions(): Partial<IDrawFeatureOption> {
|
||||||
return {
|
return {
|
||||||
...super.getDefaultOptions(),
|
...super.getDefaultOptions(),
|
||||||
title: '删除图形',
|
title: '删除图形',
|
||||||
|
|
|
@ -1,16 +1,12 @@
|
||||||
import { IInteractionTarget, ILngLat, Scene } from '@antv/l7';
|
import { IInteractionTarget, ILngLat, Scene } from '@antv/l7';
|
||||||
import { Feature } from '@turf/helpers';
|
import { Feature } from '@turf/helpers';
|
||||||
import { DrawEvent } from '../util/constant';
|
import { DrawEvent } from '../util/constant';
|
||||||
|
import { IDrawFeatureOption } from './draw_feature';
|
||||||
import DrawFeature, { IDrawOption } from './draw_mode';
|
import DrawFeature, { IDrawOption } from './draw_mode';
|
||||||
export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers';
|
|
||||||
export interface IDrawCircleOption extends IDrawOption {
|
|
||||||
units: unitsType;
|
|
||||||
steps: number;
|
|
||||||
}
|
|
||||||
export default class DrawEdit extends DrawFeature {
|
export default class DrawEdit extends DrawFeature {
|
||||||
private endPoint: ILngLat;
|
private endPoint: ILngLat;
|
||||||
// 绘制完成之后显示
|
// 绘制完成之后显示
|
||||||
constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
|
constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
|
||||||
super(scene, options);
|
super(scene, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -21,6 +17,7 @@ export default class DrawEdit extends DrawFeature {
|
||||||
protected onDragStart = (e: IInteractionTarget) => {
|
protected onDragStart = (e: IInteractionTarget) => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
};
|
};
|
||||||
|
|
||||||
protected getDefaultOptions() {
|
protected getDefaultOptions() {
|
||||||
return {
|
return {
|
||||||
steps: 64,
|
steps: 64,
|
||||||
|
|
|
@ -4,28 +4,31 @@ import {
|
||||||
FeatureCollection,
|
FeatureCollection,
|
||||||
featureCollection,
|
featureCollection,
|
||||||
point,
|
point,
|
||||||
|
Units,
|
||||||
|
unitsFactors,
|
||||||
} from '@turf/helpers';
|
} from '@turf/helpers';
|
||||||
import DrawRender from '../render/draw';
|
import DrawRender from '../render/draw';
|
||||||
import RenderLayer from '../render/draw_result';
|
import RenderLayer from '../render/draw_result';
|
||||||
import DrawVertexLayer from '../render/draw_vertex';
|
import DrawVertexLayer from '../render/draw_vertex';
|
||||||
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
|
import { DrawEvent, DrawModes } from '../util/constant';
|
||||||
import DrawDelete from './draw_delete';
|
import DrawDelete from './draw_delete';
|
||||||
import DrawEdit from './draw_edit';
|
import DrawEdit from './draw_edit';
|
||||||
import DrawMode, { IDrawOption } from './draw_mode';
|
import DrawMode, { IDrawOption } from './draw_mode';
|
||||||
import DrawSelected from './draw_selected';
|
import DrawSelected from './draw_selected';
|
||||||
export interface IDrawFeatureOption extends IDrawOption {
|
export interface IDrawFeatureOption extends IDrawOption {
|
||||||
units: unitsType;
|
units: Units;
|
||||||
steps: number;
|
steps: number;
|
||||||
|
editEnable: boolean;
|
||||||
|
selectEnable: boolean;
|
||||||
|
cursor: string;
|
||||||
}
|
}
|
||||||
const InitFeature = {
|
|
||||||
type: 'FeatureCollection',
|
|
||||||
features: [],
|
|
||||||
};
|
|
||||||
export default abstract class DrawFeature extends DrawMode {
|
export default abstract class DrawFeature extends DrawMode {
|
||||||
// 绘制完成之后显示
|
// 绘制完成之后显示
|
||||||
public selectMode: DrawSelected;
|
public selectMode: DrawSelected;
|
||||||
public editMode: DrawEdit;
|
public editMode: DrawEdit;
|
||||||
public deleteMode: DrawDelete;
|
public deleteMode: DrawDelete;
|
||||||
|
public editEnable: boolean;
|
||||||
|
public selectEnable: boolean;
|
||||||
|
|
||||||
protected normalLayer: RenderLayer;
|
protected normalLayer: RenderLayer;
|
||||||
protected drawLayer: DrawRender;
|
protected drawLayer: DrawRender;
|
||||||
|
@ -36,6 +39,8 @@ export default abstract class DrawFeature extends DrawMode {
|
||||||
this.drawLayer = new DrawRender(this);
|
this.drawLayer = new DrawRender(this);
|
||||||
this.drawVertexLayer = new DrawVertexLayer(this);
|
this.drawVertexLayer = new DrawVertexLayer(this);
|
||||||
this.normalLayer = new RenderLayer(this);
|
this.normalLayer = new RenderLayer(this);
|
||||||
|
this.selectEnable = this.getOption('selectEnable');
|
||||||
|
this.editEnable = this.getOption('editEnable');
|
||||||
|
|
||||||
// this.editLayer = new EditLayer(this);
|
// this.editLayer = new EditLayer(this);
|
||||||
this.selectMode = new DrawSelected(this.scene, {});
|
this.selectMode = new DrawSelected(this.scene, {});
|
||||||
|
@ -90,20 +95,22 @@ export default abstract class DrawFeature extends DrawMode {
|
||||||
}
|
}
|
||||||
|
|
||||||
public onRemove() {
|
public onRemove() {
|
||||||
this.destory();
|
this.destroy();
|
||||||
this.selectMode.destory();
|
this.selectMode.destroy();
|
||||||
this.editMode.destory();
|
this.editMode.destroy();
|
||||||
this.source.destroy();
|
this.source.destroy();
|
||||||
this.drawLayer.destroy();
|
this.drawLayer.destroy();
|
||||||
this.drawVertexLayer.destroy();
|
this.drawVertexLayer.destroy();
|
||||||
this.normalLayer.destroy();
|
this.normalLayer.destroy();
|
||||||
document.removeEventListener('keydown', this.addKeyDownEvent);
|
document.removeEventListener('keydown', this.addKeyDownEvent);
|
||||||
}
|
}
|
||||||
protected getDefaultOptions() {
|
protected getDefaultOptions(): Partial<IDrawFeatureOption> {
|
||||||
return {
|
return {
|
||||||
steps: 64,
|
steps: 64,
|
||||||
units: 'kilometres',
|
units: 'kilometers',
|
||||||
cursor: 'crosshair',
|
cursor: 'crosshair',
|
||||||
|
editEnable: true,
|
||||||
|
selectEnable: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
protected abstract onDragStart(e: IInteractionTarget): void;
|
protected abstract onDragStart(e: IInteractionTarget): void;
|
||||||
|
@ -136,6 +143,9 @@ export default abstract class DrawFeature extends DrawMode {
|
||||||
private onModeChange = (mode: DrawModes[any]) => {
|
private onModeChange = (mode: DrawModes[any]) => {
|
||||||
switch (mode) {
|
switch (mode) {
|
||||||
case DrawModes.DIRECT_SELECT:
|
case DrawModes.DIRECT_SELECT:
|
||||||
|
if (!this.editEnable) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.editMode.enable();
|
this.editMode.enable();
|
||||||
this.editMode.setEditFeature(this.currentFeature as Feature);
|
this.editMode.setEditFeature(this.currentFeature as Feature);
|
||||||
this.drawLayer.updateData(
|
this.drawLayer.updateData(
|
||||||
|
@ -150,6 +160,13 @@ export default abstract class DrawFeature extends DrawMode {
|
||||||
this.drawStatus = 'DrawEdit';
|
this.drawStatus = 'DrawEdit';
|
||||||
break;
|
break;
|
||||||
case DrawModes.SIMPLE_SELECT:
|
case DrawModes.SIMPLE_SELECT:
|
||||||
|
if (!this.selectEnable) {
|
||||||
|
this.drawLayer.hide();
|
||||||
|
this.drawVertexLayer.hide();
|
||||||
|
this.hideOtherLayer();
|
||||||
|
this.emit(DrawEvent.MODE_CHANGE, DrawModes.STATIC);
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.selectMode.setSelectedFeature(this.currentFeature as Feature);
|
this.selectMode.setSelectedFeature(this.currentFeature as Feature);
|
||||||
this.selectMode.enable();
|
this.selectMode.enable();
|
||||||
this.drawLayer.enableSelect();
|
this.drawLayer.enableSelect();
|
||||||
|
|
|
@ -15,7 +15,7 @@ export default class DrawLine extends DrawPolygon {
|
||||||
this.type = 'line';
|
this.type = 'line';
|
||||||
}
|
}
|
||||||
|
|
||||||
protected getDefaultOptions() {
|
protected getDefaultOptions(): Partial<IDrawFeatureOption> {
|
||||||
return {
|
return {
|
||||||
...super.getDefaultOptions(),
|
...super.getDefaultOptions(),
|
||||||
title: '绘制线',
|
title: '绘制线',
|
||||||
|
|
|
@ -88,11 +88,11 @@ export default abstract class DrawMode extends EventEmitter {
|
||||||
throw new Error('子类未实现该方法');
|
throw new Error('子类未实现该方法');
|
||||||
}
|
}
|
||||||
|
|
||||||
public getCurrentVertex() {
|
public getCurrentVertex(): Feature {
|
||||||
return this.currentVertex;
|
return this.currentVertex as Feature;
|
||||||
}
|
}
|
||||||
public getCurrentFeature() {
|
public getCurrentFeature(): Feature {
|
||||||
return this.currentVertex;
|
return this.currentFeature as Feature;
|
||||||
}
|
}
|
||||||
|
|
||||||
public getOption(key: string) {
|
public getOption(key: string) {
|
||||||
|
@ -119,13 +119,13 @@ export default abstract class DrawMode extends EventEmitter {
|
||||||
container.removeAttribute('style');
|
container.removeAttribute('style');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
public destory() {
|
public destroy() {
|
||||||
DrawFeatureId = 0;
|
DrawFeatureId = 0;
|
||||||
this.removeAllListeners();
|
this.removeAllListeners();
|
||||||
this.disable();
|
this.disable();
|
||||||
}
|
}
|
||||||
|
|
||||||
protected getDefaultOptions() {
|
protected getDefaultOptions(): any {
|
||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,14 +3,10 @@ import { Feature, featureCollection, point } from '@turf/helpers';
|
||||||
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
|
import { DrawEvent, DrawModes, unitsType } from '../util/constant';
|
||||||
import moveFeatures from '../util/move_featrues';
|
import moveFeatures from '../util/move_featrues';
|
||||||
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
|
import DrawFeature, { IDrawFeatureOption } from './draw_feature';
|
||||||
export interface IDrawRectOption extends IDrawFeatureOption {
|
|
||||||
units: unitsType;
|
|
||||||
steps: number;
|
|
||||||
}
|
|
||||||
export default class DrawPoint extends DrawFeature {
|
export default class DrawPoint extends DrawFeature {
|
||||||
protected pointFeatures: Feature[];
|
protected pointFeatures: Feature[];
|
||||||
|
|
||||||
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
|
constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
|
||||||
super(scene, options);
|
super(scene, options);
|
||||||
this.type = 'point';
|
this.type = 'point';
|
||||||
}
|
}
|
||||||
|
@ -20,7 +16,7 @@ export default class DrawPoint extends DrawFeature {
|
||||||
this.disable();
|
this.disable();
|
||||||
}
|
}
|
||||||
|
|
||||||
protected getDefaultOptions() {
|
protected getDefaultOptions(): Partial<IDrawFeatureOption> {
|
||||||
return {
|
return {
|
||||||
...super.getDefaultOptions(),
|
...super.getDefaultOptions(),
|
||||||
title: '绘制点',
|
title: '绘制点',
|
||||||
|
|
|
@ -49,7 +49,6 @@ export default class DrawPolygon extends DrawFeature {
|
||||||
this.drawLayer.update(featureCollection([feature]));
|
this.drawLayer.update(featureCollection([feature]));
|
||||||
this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
|
this.drawVertexLayer.update(featureCollection(properties.pointFeatures));
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
// feature.properties.pointFeatures = pointfeatures;
|
|
||||||
this.emit(DrawEvent.CREATE, this.currentFeature);
|
this.emit(DrawEvent.CREATE, this.currentFeature);
|
||||||
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
|
this.emit(DrawEvent.MODE_CHANGE, DrawModes.SIMPLE_SELECT);
|
||||||
this.points = [];
|
this.points = [];
|
||||||
|
@ -92,7 +91,7 @@ export default class DrawPolygon extends DrawFeature {
|
||||||
this.setCurrentFeature(feature);
|
this.setCurrentFeature(feature);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected getDefaultOptions() {
|
protected getDefaultOptions(): Partial<IDrawFeatureOption> {
|
||||||
return {
|
return {
|
||||||
...super.getDefaultOptions(),
|
...super.getDefaultOptions(),
|
||||||
title: '绘制多边形',
|
title: '绘制多边形',
|
||||||
|
@ -169,13 +168,13 @@ export default class DrawPolygon extends DrawFeature {
|
||||||
return feature;
|
return feature;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected editFeature(vertex: ILngLat) {
|
protected editFeature(vertex: ILngLat): void {
|
||||||
const selectVertexed = this.currentVertex as Feature<
|
const selectVertexed = this.currentVertex as Feature<
|
||||||
Geometries,
|
Geometries,
|
||||||
Properties
|
Properties
|
||||||
>;
|
>;
|
||||||
if (selectVertexed === null) {
|
if (selectVertexed === null) {
|
||||||
return featureCollection([]);
|
return;
|
||||||
} else {
|
} else {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const id = selectVertexed.properties.id * 1;
|
const id = selectVertexed.properties.id * 1;
|
||||||
|
|
|
@ -9,19 +9,15 @@ import { unitsType } from '../util/constant';
|
||||||
import { createPoint, createRect } from '../util/create_geometry';
|
import { createPoint, createRect } from '../util/create_geometry';
|
||||||
import DrawCircle from './draw_circle';
|
import DrawCircle from './draw_circle';
|
||||||
import { IDrawFeatureOption } from './draw_feature';
|
import { IDrawFeatureOption } from './draw_feature';
|
||||||
export interface IDrawRectOption extends IDrawFeatureOption {
|
|
||||||
units: unitsType;
|
|
||||||
steps: number;
|
|
||||||
}
|
|
||||||
export default class DrawRect extends DrawCircle {
|
export default class DrawRect extends DrawCircle {
|
||||||
constructor(scene: Scene, options: Partial<IDrawRectOption> = {}) {
|
constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
|
||||||
super(scene, options);
|
super(scene, options);
|
||||||
this.type = 'rect';
|
this.type = 'rect';
|
||||||
}
|
}
|
||||||
public drawFinish() {
|
public drawFinish() {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
protected getDefaultOptions() {
|
protected getDefaultOptions(): Partial<IDrawFeatureOption> {
|
||||||
return {
|
return {
|
||||||
...super.getDefaultOptions(),
|
...super.getDefaultOptions(),
|
||||||
title: '绘制矩形',
|
title: '绘制矩形',
|
||||||
|
|
|
@ -12,12 +12,8 @@ import {
|
||||||
import { Feature, featureCollection, point } from '@turf/helpers';
|
import { Feature, featureCollection, point } from '@turf/helpers';
|
||||||
import { DrawEvent, DrawModes } from '../util/constant';
|
import { DrawEvent, DrawModes } from '../util/constant';
|
||||||
import moveFeatures from '../util/move_featrues';
|
import moveFeatures from '../util/move_featrues';
|
||||||
|
import { IDrawFeatureOption } from './draw_feature';
|
||||||
import DrawFeature, { IDrawOption } from './draw_mode';
|
import DrawFeature, { IDrawOption } from './draw_mode';
|
||||||
export type unitsType = 'degrees' | 'radians' | 'miles' | 'kilometers';
|
|
||||||
export interface IDrawCircleOption extends IDrawOption {
|
|
||||||
units: unitsType;
|
|
||||||
steps: number;
|
|
||||||
}
|
|
||||||
const InitFeature = {
|
const InitFeature = {
|
||||||
type: 'FeatureCollection',
|
type: 'FeatureCollection',
|
||||||
features: [],
|
features: [],
|
||||||
|
@ -26,7 +22,7 @@ export default class DrawSelect extends DrawFeature {
|
||||||
private center: ILngLat;
|
private center: ILngLat;
|
||||||
private dragStartPoint: ILngLat;
|
private dragStartPoint: ILngLat;
|
||||||
// 绘制完成之后显示
|
// 绘制完成之后显示
|
||||||
constructor(scene: Scene, options: Partial<IDrawCircleOption> = {}) {
|
constructor(scene: Scene, options: Partial<IDrawFeatureOption> = {}) {
|
||||||
super(scene, options);
|
super(scene, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -38,10 +34,11 @@ export default class DrawSelect extends DrawFeature {
|
||||||
this.scene.setMapStatus({ dragEnable: false });
|
this.scene.setMapStatus({ dragEnable: false });
|
||||||
this.dragStartPoint = e.lngLat;
|
this.dragStartPoint = e.lngLat;
|
||||||
};
|
};
|
||||||
protected getDefaultOptions() {
|
|
||||||
|
protected getDefaultOptions(): Partial<IDrawFeatureOption> {
|
||||||
return {
|
return {
|
||||||
steps: 64,
|
steps: 64,
|
||||||
units: 'kilometres',
|
units: 'kilometers',
|
||||||
cursor: 'move',
|
cursor: 'move',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,7 +23,9 @@ export default class DrawLayer extends BaseRender {
|
||||||
const layer = this.drawLayers[0];
|
const layer = this.drawLayers[0];
|
||||||
layer.on('mouseenter', this.onMouseMove);
|
layer.on('mouseenter', this.onMouseMove);
|
||||||
layer.on('mouseout', this.onUnMouseMove);
|
layer.on('mouseout', this.onUnMouseMove);
|
||||||
layer.on('click', this.onClick);
|
if (this.draw.editEnable) {
|
||||||
|
layer.on('click', this.onClick);
|
||||||
|
}
|
||||||
layer.on('unclick', this.onUnClick);
|
layer.on('unclick', this.onUnClick);
|
||||||
this.isEnableDrag = true;
|
this.isEnableDrag = true;
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,6 +18,9 @@ export default class DrawResultLayer extends BaseRender {
|
||||||
if (this.isEnableDrag) {
|
if (this.isEnableDrag) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!this.draw.selectEnable) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
const layer = this.drawLayers[0];
|
const layer = this.drawLayers[0];
|
||||||
layer.on('click', this.onClick);
|
layer.on('click', this.onClick);
|
||||||
this.isEnableDrag = true;
|
this.isEnableDrag = true;
|
||||||
|
|
|
@ -3,6 +3,7 @@ import turfDistance from '@turf/distance';
|
||||||
import {
|
import {
|
||||||
Feature,
|
Feature,
|
||||||
featureCollection,
|
featureCollection,
|
||||||
|
FeatureCollection,
|
||||||
lineString,
|
lineString,
|
||||||
point,
|
point,
|
||||||
polygon,
|
polygon,
|
||||||
|
@ -116,7 +117,9 @@ export function createLine(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createPoint(points: Array<{ lng: number; lat: number }>) {
|
export function createPoint(
|
||||||
|
points: Array<{ lng: number; lat: number }>,
|
||||||
|
): FeatureCollection {
|
||||||
const features = points.map((p, index) =>
|
const features = points.map((p, index) =>
|
||||||
point([p.lng, p.lat], {
|
point([p.lng, p.lat], {
|
||||||
active: true,
|
active: true,
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { version } from '../src/version';
|
import { version } from '../src/version';
|
||||||
|
|
||||||
describe('version', () => {
|
describe('version', () => {
|
||||||
it('should match the `version` field of package.json', () => {
|
it('should match the `version` field of package.json', () => {
|
||||||
const expected = require('../package.json').version;
|
const expected = require('../package.json').version;
|
||||||
|
|
|
@ -93,9 +93,8 @@ export default class HeatMapModel extends BaseModel {
|
||||||
});
|
});
|
||||||
|
|
||||||
// 初始化颜色纹理
|
// 初始化颜色纹理
|
||||||
|
|
||||||
this.colorTexture = createTexture2D({
|
this.colorTexture = createTexture2D({
|
||||||
data: imageData.data,
|
data: new Uint8Array(imageData.data),
|
||||||
width: imageData.width,
|
width: imageData.width,
|
||||||
height: imageData.height,
|
height: imageData.height,
|
||||||
wrapS: gl.CLAMP_TO_EDGE,
|
wrapS: gl.CLAMP_TO_EDGE,
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
.amap-logo{
|
||||||
|
display: none !important;
|
||||||
|
}
|
|
@ -20,6 +20,7 @@ import {
|
||||||
import { DOM } from '@antv/l7-utils';
|
import { DOM } from '@antv/l7-utils';
|
||||||
import { inject, injectable } from 'inversify';
|
import { inject, injectable } from 'inversify';
|
||||||
import { IAMapEvent, IAMapInstance } from '../../typings/index';
|
import { IAMapEvent, IAMapInstance } from '../../typings/index';
|
||||||
|
import './logo.css';
|
||||||
import { MapTheme } from './theme';
|
import { MapTheme } from './theme';
|
||||||
import Viewport from './Viewport';
|
import Viewport from './Viewport';
|
||||||
let mapdivCount = 0;
|
let mapdivCount = 0;
|
||||||
|
@ -258,7 +259,6 @@ export default class AMapService
|
||||||
if (mapInstance) {
|
if (mapInstance) {
|
||||||
this.map = mapInstance as AMap.Map & IAMapInstance;
|
this.map = mapInstance as AMap.Map & IAMapInstance;
|
||||||
this.$mapContainer = this.map.getContainer();
|
this.$mapContainer = this.map.getContainer();
|
||||||
this.removeLogoControl();
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.map.on('camerachange', this.handleCameraChanged);
|
this.map.on('camerachange', this.handleCameraChanged);
|
||||||
resolve();
|
resolve();
|
||||||
|
@ -274,10 +274,6 @@ export default class AMapService
|
||||||
viewMode: '3D',
|
viewMode: '3D',
|
||||||
...rest,
|
...rest,
|
||||||
});
|
});
|
||||||
map.on('complete', () => {
|
|
||||||
this.removeLogoControl();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 监听地图相机事件
|
// 监听地图相机事件
|
||||||
map.on('camerachange', this.handleCameraChanged);
|
map.on('camerachange', this.handleCameraChanged);
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
@ -425,12 +421,4 @@ export default class AMapService
|
||||||
document.head.appendChild(script);
|
document.head.appendChild(script);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private removeLogoControl(): void {
|
|
||||||
// @ts-ignore
|
|
||||||
const logo = document.getElementsByClassName('amap-logo');
|
|
||||||
if (logo && logo[0]) {
|
|
||||||
logo[0].setAttribute('style', 'display: none !important');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,7 +23,10 @@ export default class Circle extends React.Component {
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
|
|
||||||
scene.on('loaded', () => {
|
scene.on('loaded', () => {
|
||||||
const drawRect = new DrawRect(scene);
|
const drawRect = new DrawRect(scene, {
|
||||||
|
editEnable: false,
|
||||||
|
selectEnable: false,
|
||||||
|
});
|
||||||
drawRect.enable();
|
drawRect.enable();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,78 @@
|
||||||
|
import { HeatmapLayer, Scene } from '@antv/l7';
|
||||||
|
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||||
|
// @ts-ignore
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export default class HeatMapLayerDemo extends React.Component {
|
||||||
|
// @ts-ignore
|
||||||
|
private scene: Scene;
|
||||||
|
|
||||||
|
public componentWillUnmount() {
|
||||||
|
this.scene.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
public async componentDidMount() {
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new Mapbox({
|
||||||
|
style: 'dark',
|
||||||
|
pitch: 58.5,
|
||||||
|
center: [116.49434030056, 39.868073421167621],
|
||||||
|
zoom: 13,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
fetch(
|
||||||
|
'https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json',
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((data) => {
|
||||||
|
const layer = new HeatmapLayer({})
|
||||||
|
.source(data, {
|
||||||
|
parser: {
|
||||||
|
type: 'json',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.size('count', [0, 1])
|
||||||
|
.shape('heatmap3D')
|
||||||
|
// weight映射通道
|
||||||
|
.style({
|
||||||
|
intensity: 10,
|
||||||
|
radius: 20,
|
||||||
|
opacity: 1.0,
|
||||||
|
rampColors: {
|
||||||
|
colors: [
|
||||||
|
'#2E8AE6',
|
||||||
|
'#69D1AB',
|
||||||
|
'#DAF291',
|
||||||
|
'#FFD591',
|
||||||
|
'#FF7A45',
|
||||||
|
'#CF1D49',
|
||||||
|
],
|
||||||
|
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
scene.addLayer(layer);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.scene = scene;
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
id="map"
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -7,7 +7,7 @@
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"lib": ["es6", "dom"],
|
"lib": ["es6", "dom"],
|
||||||
"types": ["reflect-metadata", "jest" ],
|
"types": ["reflect-metadata", "jest", "node"],
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
|
@ -20,7 +20,7 @@
|
||||||
"@antv/l7-*": ["packages/*/src"],
|
"@antv/l7-*": ["packages/*/src"],
|
||||||
"@antv/l7": ["packages/l7/src"],
|
"@antv/l7": ["packages/l7/src"],
|
||||||
"*": ["node_modules", "packages", "typings/*"]
|
"*": ["node_modules", "packages", "typings/*"]
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
"awesomeTypescriptLoaderOptions": {
|
"awesomeTypescriptLoaderOptions": {
|
||||||
"useBabel": true,
|
"useBabel": true,
|
||||||
|
|
|
@ -4990,10 +4990,10 @@
|
||||||
resolved "https://registry.npmjs.org/@types/node/-/node-10.17.17.tgz#7a183163a9e6ff720d86502db23ba4aade5999b8"
|
resolved "https://registry.npmjs.org/@types/node/-/node-10.17.17.tgz#7a183163a9e6ff720d86502db23ba4aade5999b8"
|
||||||
integrity sha512-gpNnRnZP3VWzzj5k3qrpRC6Rk3H/uclhAVo1aIvwzK5p5cOrs9yEyQ8H/HBsBY0u5rrWxXEiVPQ0dEB6pkjE8Q==
|
integrity sha512-gpNnRnZP3VWzzj5k3qrpRC6Rk3H/uclhAVo1aIvwzK5p5cOrs9yEyQ8H/HBsBY0u5rrWxXEiVPQ0dEB6pkjE8Q==
|
||||||
|
|
||||||
"@types/node@^12.12.22":
|
"@types/node@^13.11.1":
|
||||||
version "12.12.30"
|
version "13.11.1"
|
||||||
resolved "https://registry.npmjs.org/@types/node/-/node-12.12.30.tgz#3501e6f09b954de9c404671cefdbcc5d9d7c45f6"
|
resolved "https://registry.npmjs.org/@types/node/-/node-13.11.1.tgz#49a2a83df9d26daacead30d0ccc8762b128d53c7"
|
||||||
integrity sha512-sz9MF/zk6qVr3pAnM0BSQvYIBK44tS75QC5N+VbWSE4DjCV/pJ+UzCW/F+vVnl7TkOPcuwQureKNtSSwjBTaMg==
|
integrity sha512-eWQGP3qtxwL8FGneRrC5DwrJLGN4/dH1clNTuLfN81HCrxVtxRjygDTUoZJ5ASlDEeo0ppYFQjQIlXhtXpOn6g==
|
||||||
|
|
||||||
"@types/node@^8.5.7":
|
"@types/node@^8.5.7":
|
||||||
version "8.10.59"
|
version "8.10.59"
|
||||||
|
|
Loading…
Reference in New Issue