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

feat: 新增枚举类型的色带 (#1283) 

Co-authored-by: shihui <yiqianyao.yqy@alibaba-inc.com>
This commit is contained in:
YiQianYao 2022-08-11 11:19:09 +08:00 committed by GitHub
parent 26e503ed27
commit 089d172324
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 106 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dev-demos/features/point/linearline.md Normal file
View File

@ -0,0 +1,2 @@
### Linear Line
<code src="./linearline.tsx"></code>

80
dev-demos/features/point/linearline.tsx Normal file
View File

@ -0,0 +1,80 @@
import { PointLayer, LineLayer, Scene, RasterLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [105, 30.258134],
zoom: 5,
}),
});
const geoData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
testOpacity: 0.8,
},
geometry: {
type: 'Polygon',
coordinates: [
[
[99.228515625, 37.43997405227057],
[99.228515625, 35.02999636902566],
[101.337890625, 32.99023555965106],
[99.052734375, 30.29701788337205],
[100.72265625, 27.994401411046148],
[99.49218749999999, 26.352497858154024],
[100.634765625, 23.725011735951796],
],
[
[108.544921875, 37.71859032558816],
[110.74218749999999, 34.66935854524543],
[110.21484375, 32.76880048488168],
[112.412109375, 32.84267363195431],
[112.1484375, 30.751277776257812],
[114.08203125, 31.42866311735861],
],
],
},
},
],
};
const layer = new LineLayer({})
.source(geoData)
.size(10)
.shape('linearline')
.style({
rampColors: {
colors: [
'#FF4818',
'#F7B74A',
'#FFF598',
'#91EABC',
'#2EA9A1',
'#206C7C',
],
weights: [0.1, 0.1, 0.1, 0.1, 0.1, 0.5]
},
});
scene.on('loaded', () => {
scene.addLayer(layer);
})
}, [])
return (
<div
id="map"
style={{
height:'500px',
position: 'relative'
}}
/>
);
}

37
packages/utils/src/color.ts
View File

@ -3,6 +3,7 @@ import { $window, isMini } from './mini-adapter';
export interface IColorRamp {
positions: number[];
colors: string[];
weights?: number[];
}
export function isColor(str: any) {
@ -57,21 +58,31 @@ export function generateColorRamp(
let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
canvas.width = 256;
canvas.height = 1;
const gradient = ctx.createLinearGradient(0, 0, 256, 1);
let data = null;
const min = colorRamp.positions[0];
const max = colorRamp.positions[colorRamp.positions.length - 1];
for (let i = 0; i < colorRamp.colors.length; ++i) {
const value = (colorRamp.positions[i] - min) / (max - min);
gradient.addColorStop(value, colorRamp.colors[i]);
}
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 256, 1);
// data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data);
// return !isMini
// ? new ImageData(data, 256, 1)
// : { data, width: 256, height: 1 };
if (colorRamp.weights) {
// draw enum color
let count = 0;
colorRamp.weights.map((w, index) => {
const color = colorRamp.colors[index] || 'rgba(0, 0, 0, 0)';
const stop = count + w;
ctx.fillStyle = color;
ctx.fillRect(count * 256, 0, stop * 256, 1);
count = stop;
});
} else {
// draw linear color
const gradient = ctx.createLinearGradient(0, 0, 256, 1);
const min = colorRamp.positions[0];
const max = colorRamp.positions[colorRamp.positions.length - 1];
for (let i = 0; i < colorRamp.colors.length; ++i) {
const value = (colorRamp.positions[i] - min) / (max - min);
gradient.addColorStop(value, colorRamp.colors[i]);
}
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 256, 1);
}
if (!isMini) {
data = ctx.getImageData(0, 0, 256, 1).data;