* feat: 重新兼容ie11

* style: lint style
This commit is contained in:
YiQianYao 2022-03-16 10:24:40 +08:00 committed by GitHub
parent 490b3fcd94
commit 2a82fbf5b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 45 deletions

View File

@ -29,7 +29,7 @@
"@antv/l7-core": "^2.8.4",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"l7regl": "^0.0.17",
"l7regl": "^0.0.20",
"lodash": "^4.17.15",
"reflect-metadata": "^0.1.13"
},

View File

@ -67,9 +67,25 @@ export function generateColorRamp(
}
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 };
// data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data);
// return !isMini
// ? new ImageData(data, 256, 1)
// : { data, width: 256, height: 1 };
if (!isMini) {
data = ctx.getImageData(0, 0, 256, 1).data;
// 使用 createImageData 替代 new ImageData、兼容 IE11
const imageData = ctx.createImageData(256, 1);
for (let i = 0; i < imageData.data.length; i += 4) {
imageData.data[i + 0] = data[i + 0];
imageData.data[i + 1] = data[i + 1];
imageData.data[i + 2] = data[i + 2];
imageData.data[i + 3] = data[i + 3];
}
return imageData;
} else {
data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data);
return { data, width: 256, height: 1 };
}
}

View File

@ -18,57 +18,53 @@ export default class ScaleComponent extends React.Component {
// scene.setBgColor('#000');
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
// 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
'https://gw.alipayobjects.com/os/bmw-prod/5dbc5dbf-76f1-47e6-b9e3-d2a1b7581f93.json',
// 'https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/choropleth-data/country/100000_country_province.json'
)
.then((res) => res.json())
.then((data) => {
let layer = new PolygonLayer({ blend: 'normal' }) // autoFit: true
.source(data)
// .size('name', [0, 10000, 50000, 30000, 100000])
.size(1)
// .color('name1', [
// '#2E8AE6',
// '#69D1AB',
// '#DAF291',
// '#FFD591',
// '#FF7A45',
// '#CF1D49',
// ])
.color('#000')
// .shape('fill')
.shape('line')
.size('name', [0, 10000, 50000, 30000, 100000])
.color('name', [
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49',
])
// .color('#000')
.shape('fill')
// .shape('line')
// .select(true)
.style({
opacity: 0.8,
// opacityLinear: {
// enable: true,
// dir: 'in', // in - out
// },
});
layer.setBottomColor('#f00');
// let layer2 = new PolygonLayer({ blend: 'normal' })
// .source(data)
// .size(1)
// .color('name', [
// '#2E8AE6',
// '#69D1AB',
// '#DAF291',
// '#FFD591',
// '#FF7A45',
// '#CF1D49',
// ])
// .shape('line')
// .select(true)
// .style({
// opacity: 1.0,
// });
scene.addLayer(layer);
// scene.addLayer(layer2);
});
// layer.setBottomColor('#f00');
// let layer2 = new PolygonLayer({ blend: 'normal' })
// .source(data)
// .size(1)
// .color('name', [
// '#2E8AE6',
// '#69D1AB',
// '#DAF291',
// '#FFD591',
// '#FF7A45',
// '#CF1D49',
// ])
// .shape('line')
// .select(true)
// .style({
// opacity: 1.0,
// });
// scene.addLayer(layer2);
});
}

3
typings.d.ts vendored
View File

@ -1,3 +1,4 @@
declare module '@antv/l7';
declare module '@antv/l7-core';
declare module '@antv/l7-layers';
declare module '@antv/l7-layers';
declare module 'l7regl';