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

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

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

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

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