p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style: lint style

This commit is contained in:
2912401452 2022-03-18 15:00:07 +08:00
parent a32cd05914
commit 7f87ad8dff
3 changed files with 73 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/layers/src/canvas/models/canvas.ts
View File

@ -1,6 +1,4 @@
import {
IModelUniform,
} from '@antv/l7-core';
import { IModelUniform } from '@antv/l7-core';
import BaseModel from '../../core/BaseModel';
import {
CanvasUpdateType,
@ -18,7 +16,7 @@ export default class CanvaModel extends BaseModel {
const {
zIndex = 10,
update = CanvasUpdateType.AWAYS,
animateOption = { enable: false, duration: 20 }
animateOption = { enable: false, duration: 20 },
} = this.layer.getLayerConfig() as ICanvasLayerStyleOptions;
if (+this.canvas.style.zIndex === zIndex) {
this.canvas.style.zIndex = zIndex + '';
@ -28,7 +26,7 @@ export default class CanvaModel extends BaseModel {
this.unBindListener();
this.bindListener();
}
if(this.updateMode === CanvasUpdateType.AWAYS && animateOption.enable) {
if (this.updateMode === CanvasUpdateType.AWAYS && animateOption.enable) {
this.renderCanvas();
}
};

2
packages/layers/src/core/interface.ts
View File

@ -137,7 +137,7 @@ export interface ICanvasLayerStyleOptions {
zIndex: number;
update: CanvasUpdateType | string;
drawingOnCanvas: (option: IDrawingOnCanvas) => void;
animateOption: IAnimateOption
animateOption: IAnimateOption;
}
export interface IHeatMapLayerStyleOptions {

136
stories/Object/components/canvas.tsx
View File

@ -1,7 +1,7 @@
import { CanvasLayer, Scene, IMapService } from '@antv/l7';
import { GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
let x = 0
let x = 0;
export default class Demo extends React.Component {
// @ts-ignore
private scene: Scene;
@ -14,104 +14,107 @@ export default class Demo extends React.Component {
* draw water ball
*/
public draw(option: any) {
const {size, ctx, mapService} = option
const { size, ctx, mapService } = option;
const [width, height] = size;
let radius = 30, rectWidth = radius * 2 * window.devicePixelRatio;
let radius = 30,
rectWidth = radius * 2 * window.devicePixelRatio;
const rectHeight = rectWidth;
ctx.clearRect(0, 0, width, height);
const points = [
{
lng: 108.544921875,
lng: 108.544921875,
lat: 30.977609093348686,
level: 85,
color: "rgba( 220,20,60, 0.4)"
color: 'rgba( 220,20,60, 0.4)',
},
{
lng: 110.654296875,
lng: 110.654296875,
lat: 31.090574094954192,
level: 75,
color: "rgba( 255,140,0, 0.4)"
color: 'rgba( 255,140,0, 0.4)',
},
{
lng: 112.5,
lng: 112.5,
lat: 29.80251790576445,
level: 65,
color: "rgba(255,165,0, 0.4)"
color: 'rgba(255,165,0, 0.4)',
},
{
lng: 114.78515624999999,
lng: 114.78515624999999,
lat: 30.44867367928756,
level: 40,
color: "rgba(30,144,255, 0.4)"
color: 'rgba(30,144,255, 0.4)',
},
{
lng: 116.49902343749999,
lng: 116.49902343749999,
lat: 29.84064389983441,
level: 50,
color: "rgba(30,144,255, 0.4)"
color: 'rgba(30,144,255, 0.4)',
},
{
lng: 118.21289062499999,
lng: 118.21289062499999,
lat: 31.16580958786196,
level: 20,
color: "rgba( 127,255,0, 0.4)"
color: 'rgba( 127,255,0, 0.4)',
},
{
lng: 119.091796875,
lng: 119.091796875,
lat: 32.509761735919426,
level: 50,
color: "rgba(30,144,255, 0.4)"
color: 'rgba(30,144,255, 0.4)',
},
{
lng: 121.0693359374999,
lng: 121.0693359374999,
lat: 31.80289258670676,
level: 45,
color: "rgba(30,144,255, 0.4)"
}
]
color: 'rgba(30,144,255, 0.4)',
},
];
ctx.fillStyle = '#fff';
ctx.font = "14px YouYuan";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.font = '14px YouYuan';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
points.map((point) => {
let pixelCenter = mapService.lngLatToContainer([point.lng, point.lat])
let pixelCenter = mapService.lngLatToContainer([point.lng, point.lat]);
let rectStartX = pixelCenter.x - radius;
const rectStartY = pixelCenter.y - radius;
ctx.save()
ctx.fillText(point.level + "%", pixelCenter.x, pixelCenter.y);
ctx.save();
ctx.beginPath()
ctx.arc(pixelCenter.x, pixelCenter.y, radius, 0, Math.PI*2)
ctx.fillStyle="rgba(135,206,250,0.2)"
ctx.closePath()
ctx.fillText(point.level + '%', pixelCenter.x, pixelCenter.y);
ctx.beginPath();
ctx.arc(pixelCenter.x, pixelCenter.y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(135,206,250,0.2)';
ctx.closePath();
ctx.fill();
ctx.clip();
ctx.beginPath()
ctx.fillStyle=point.color;
ctx.moveTo(rectStartX, pixelCenter.y)
let waterheight = rectStartY + ((100 - point.level)/100) * rectHeight
for(let i = 0;i <= rectWidth;i += 10) {
ctx.lineTo(rectStartX + i, waterheight + Math.sin(Math.PI*2 * (i / rectWidth) + x) * 3 + 1)
ctx.beginPath();
ctx.fillStyle = point.color;
ctx.moveTo(rectStartX, pixelCenter.y);
let waterheight = rectStartY + ((100 - point.level) / 100) * rectHeight;
for (let i = 0; i <= rectWidth; i += 10) {
ctx.lineTo(
rectStartX + i,
waterheight + Math.sin(Math.PI * 2 * (i / rectWidth) + x) * 3 + 1,
);
}
ctx.lineTo(pixelCenter.x + radius, pixelCenter.y + radius)
ctx.lineTo(rectStartX, pixelCenter.y + radius)
ctx.lineTo(rectStartX, pixelCenter.y)
ctx.closePath()
ctx.fill()
ctx.lineTo(pixelCenter.x + radius, pixelCenter.y + radius);
ctx.lineTo(rectStartX, pixelCenter.y + radius);
ctx.lineTo(rectStartX, pixelCenter.y);
ctx.closePath();
ctx.fill();
ctx.restore();
})
});
}
public async componentDidMount() {
@ -121,7 +124,7 @@ export default class Demo extends React.Component {
pitch: 0,
style: 'amap://styles/8aa66692b2a7790b101f88dd35b89bb5',
center: [115, 30],
zoom: 5.5
zoom: 5.5,
}),
});
this.scene = scene;
@ -132,26 +135,25 @@ export default class Demo extends React.Component {
)
.then((res) => res.json())
.then((data) => {
const layer = new CanvasLayer({}).style({
zIndex: 10,
update: 'aways',
// update: 'dragend',
drawingOnCanvas: this.draw,
})
.animate({
enable: true,
});
scene.addLayer(layer);
setInterval(() => {
x += 0.1
layer.style({
drawingOnCanvas: this.draw
const layer = new CanvasLayer({})
.style({
zIndex: 10,
update: 'aways',
// update: 'dragend',
drawingOnCanvas: this.draw,
})
.animate({
enable: true,
});
scene.addLayer(layer);
setInterval(() => {
x += 0.1;
layer.style({
drawingOnCanvas: this.draw,
});
scene.render();
}, 30)
}, 30);
// setTimeout(() => {
// console.log('reSet');