mirror of https://gitee.com/antv-l7/antv-l7
feat: 完善 CanvasLayer 动画、增加 CanvasLayer demo
This commit is contained in:
parent
257aaad56d
commit
a32cd05914
|
@ -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 = () => {
|
||||
|
|
|
@ -137,6 +137,7 @@ export interface ICanvasLayerStyleOptions {
|
|||
zIndex: number;
|
||||
update: CanvasUpdateType | string;
|
||||
drawingOnCanvas: (option: IDrawingOnCanvas) => void;
|
||||
animateOption: IAnimateOption
|
||||
}
|
||||
|
||||
export interface IHeatMapLayerStyleOptions {
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue