diff --git a/packages/layers/src/canvas/models/canvas.ts b/packages/layers/src/canvas/models/canvas.ts index e5d53b4fd2..33d3500b6d 100644 --- a/packages/layers/src/canvas/models/canvas.ts +++ b/packages/layers/src/canvas/models/canvas.ts @@ -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(); } }; diff --git a/packages/layers/src/core/interface.ts b/packages/layers/src/core/interface.ts index c05c36f104..da24a8c063 100644 --- a/packages/layers/src/core/interface.ts +++ b/packages/layers/src/core/interface.ts @@ -137,7 +137,7 @@ export interface ICanvasLayerStyleOptions { zIndex: number; update: CanvasUpdateType | string; drawingOnCanvas: (option: IDrawingOnCanvas) => void; - animateOption: IAnimateOption + animateOption: IAnimateOption; } export interface IHeatMapLayerStyleOptions { diff --git a/stories/Object/components/canvas.tsx b/stories/Object/components/canvas.tsx index d21aad881a..0114931123 100644 --- a/stories/Object/components/canvas.tsx +++ b/stories/Object/components/canvas.tsx @@ -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');