From a32cd05914efd9d45fe6b4d2244a0e88c9075760 Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Fri, 18 Mar 2022 14:59:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=20CanvasLayer=20?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E3=80=81=E5=A2=9E=E5=8A=A0=20CanvasLayer=20d?= =?UTF-8?q?emo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/layers/src/canvas/models/canvas.ts | 8 + packages/layers/src/core/interface.ts | 1 + stories/Object/components/canvas.tsx | 172 +++++++++++++++----- 3 files changed, 139 insertions(+), 42 deletions(-) diff --git a/packages/layers/src/canvas/models/canvas.ts b/packages/layers/src/canvas/models/canvas.ts index 955eeb1421..e5d53b4fd2 100644 --- a/packages/layers/src/canvas/models/canvas.ts +++ b/packages/layers/src/canvas/models/canvas.ts @@ -1,3 +1,6 @@ +import { + IModelUniform, +} from '@antv/l7-core'; import BaseModel from '../../core/BaseModel'; import { CanvasUpdateType, @@ -10,10 +13,12 @@ export default class CanvaModel extends BaseModel { protected canvas: HTMLCanvasElement; protected ctx: CanvasRenderingContext2D; protected prevSize: [number, number]; + public renderUpdate = () => { const { zIndex = 10, update = CanvasUpdateType.AWAYS, + animateOption = { enable: false, duration: 20 } } = this.layer.getLayerConfig() as ICanvasLayerStyleOptions; if (+this.canvas.style.zIndex === zIndex) { this.canvas.style.zIndex = zIndex + ''; @@ -23,6 +28,9 @@ export default class CanvaModel extends BaseModel { this.unBindListener(); this.bindListener(); } + if(this.updateMode === CanvasUpdateType.AWAYS && animateOption.enable) { + this.renderCanvas(); + } }; public unBindListener = () => { diff --git a/packages/layers/src/core/interface.ts b/packages/layers/src/core/interface.ts index f2bea205f4..c05c36f104 100644 --- a/packages/layers/src/core/interface.ts +++ b/packages/layers/src/core/interface.ts @@ -137,6 +137,7 @@ export interface ICanvasLayerStyleOptions { zIndex: number; update: CanvasUpdateType | string; drawingOnCanvas: (option: IDrawingOnCanvas) => void; + animateOption: IAnimateOption } export interface IHeatMapLayerStyleOptions { diff --git a/stories/Object/components/canvas.tsx b/stories/Object/components/canvas.tsx index 278958678c..d21aad881a 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 { GaodeMap, Mapbox } from '@antv/l7-maps'; +import { GaodeMapV2, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; - +let x = 0 export default class Demo extends React.Component { // @ts-ignore private scene: Scene; @@ -10,15 +10,118 @@ export default class Demo extends React.Component { this.scene.destroy(); } + /** + * draw water ball + */ + public draw(option: any) { + const {size, ctx, mapService} = option + const [width, height] = size; + + let radius = 30, rectWidth = radius * 2 * window.devicePixelRatio; + const rectHeight = rectWidth; + + + ctx.clearRect(0, 0, width, height); + + const points = [ + { + lng: 108.544921875, + lat: 30.977609093348686, + level: 85, + color: "rgba( 220,20,60, 0.4)" + }, + { + lng: 110.654296875, + lat: 31.090574094954192, + level: 75, + color: "rgba( 255,140,0, 0.4)" + }, + { + lng: 112.5, + lat: 29.80251790576445, + level: 65, + color: "rgba(255,165,0, 0.4)" + }, + { + lng: 114.78515624999999, + lat: 30.44867367928756, + level: 40, + color: "rgba(30,144,255, 0.4)" + }, + { + lng: 116.49902343749999, + lat: 29.84064389983441, + level: 50, + color: "rgba(30,144,255, 0.4)" + }, + { + lng: 118.21289062499999, + lat: 31.16580958786196, + level: 20, + color: "rgba( 127,255,0, 0.4)" + }, + { + lng: 119.091796875, + lat: 32.509761735919426, + level: 50, + color: "rgba(30,144,255, 0.4)" + }, + { + lng: 121.0693359374999, + lat: 31.80289258670676, + level: 45, + color: "rgba(30,144,255, 0.4)" + } + ] + ctx.fillStyle = '#fff'; + ctx.font = "14px YouYuan"; + ctx.textAlign="center"; + ctx.textBaseline="middle"; + + points.map((point) => { + 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.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.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() { const scene = new Scene({ id: 'map', - map: new GaodeMap({ - // map: new Mapbox({ + map: new GaodeMapV2({ pitch: 0, - // style: 'dark', - center: [96.99215001469588, 29.281597225674773], - zoom: 2.194613775109773, + style: 'amap://styles/8aa66692b2a7790b101f88dd35b89bb5', + center: [115, 30], + zoom: 5.5 }), }); this.scene = scene; @@ -33,45 +136,30 @@ export default class Demo extends React.Component { zIndex: 10, update: 'aways', // update: 'dragend', - drawingOnCanvas: ({ ctx, mapService, size }) => { - const [width, height] = size; - - ctx.clearRect(0, 0, width, height); - ctx.fillStyle = 'rgba(0, 200, 0, 0.2)'; - data.features.map((feature: any) => { - let pixelCenter = mapService.lngLatToContainer( - feature.geometry.coordinates, - ); - pixelCenter.x *= window.devicePixelRatio; - pixelCenter.y *= window.devicePixelRatio; - if ( - pixelCenter.x < 0 || - pixelCenter.y < 0 || - pixelCenter.x > width || - pixelCenter.y > height - ) - return; - ctx.beginPath(); - ctx.arc( - pixelCenter.x, - pixelCenter.y, - feature.properties.capacity / 200, - 0, - Math.PI * 2, - ); - ctx.fill(); - ctx.closePath(); - }); - }, + drawingOnCanvas: this.draw, + }) + .animate({ + enable: true, }); scene.addLayer(layer); - setTimeout(() => { - console.log('reSet'); + + setInterval(() => { + x += 0.1 layer.style({ - update: 'dragend', - }); + + drawingOnCanvas: this.draw + }) scene.render(); - }, 3000); + }, 30) + + + // setTimeout(() => { + // console.log('reSet'); + // layer.style({ + // update: 'dragend', + // }); + // scene.render(); + // }, 3000); }); }); }