mirror of https://gitee.com/antv-l7/antv-l7
Feat raster (#1477)
* docs: 添加星图地球数据源 * chore: terrain rgb * chore: 官网build 命令 * chore: remove image data * chore: 重构目录 * fix: lint format
This commit is contained in:
@thinkinggis
GitHub
parent
1f1af0aeb5
commit
ab2d2de4b2
|
|
@ -1,3 +0,0 @@
|
|||
// import '@storybook/addon-actions/register';
|
||||
// import '@storybook/addon-notes/register';
|
||||
// import '@storybook/addon-storysource/register';
|
||||
27500
.storybook/antd.css
27500
.storybook/antd.css
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +0,0 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dg.ac {
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
const path = require('path');
|
||||
|
||||
// Export a function. Accept the base config as the only param.
|
||||
module.exports = {
|
||||
webpackFinal: async (config, { configType }) => {
|
||||
config.module.rules.push({
|
||||
test: /\.stories\**.svg$/,
|
||||
loader: 'svg-inline-loader'
|
||||
}
|
||||
);
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
// tslint:disable-next-line:no-submodule-imports
|
||||
import { addParameters, configure } from '@storybook/react';
|
||||
import { create } from '@storybook/theming';
|
||||
|
||||
addParameters({
|
||||
options: {
|
||||
isFullscreen: false,
|
||||
showAddonsPanel: false,
|
||||
showSearchBox: false,
|
||||
panelPosition: 'bottom',
|
||||
hierarchySeparator: /\./,
|
||||
// hierarchyRootSeparator: /\|/,
|
||||
enableShortcuts: true,
|
||||
theme: create({
|
||||
base: 'light',
|
||||
brandTitle: 'L7 for new architecture',
|
||||
brandUrl: 'https://github.com/antvis/L7',
|
||||
gridCellSize: 12,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
// automatically import all files ending in *.stories.tsx
|
||||
|
||||
// const req = require.context('../stories', true, /\.stories\.tsx$/);
|
||||
// const req = require.context('../stories/layerbuild', true, /\.stories\.tsx$/);
|
||||
// const req = require.context('../stories/Map', true, /\.stories\.tsx$/);
|
||||
const req = require.context('../stories/template', true, /\.stories\.tsx$/);
|
||||
// const req = require.context('../stories/MapPerformance', true, /\.stories\.tsx$/);
|
||||
// const req = require.context('../stories/tile', true, /\.stories\.tsx$/);
|
||||
|
||||
function loadStories() {
|
||||
req.keys().forEach(req);
|
||||
}
|
||||
|
||||
configure(loadStories, module);
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
const path = require("path");
|
||||
module.exports = ({ config }) => {
|
||||
|
||||
// config.module.rules.push({
|
||||
// test: /\.glsl$/,
|
||||
// loader: 'raw-loader'
|
||||
// });
|
||||
|
||||
// config.module.rules.push({
|
||||
// test: /\.worker\.(js|ts)$/,
|
||||
// use: {
|
||||
// loader: 'worker-loader',
|
||||
// options: { inline: true, fallback: false }
|
||||
// }
|
||||
// });
|
||||
config.module.rules =[];
|
||||
|
||||
config.module.rules.push(
|
||||
|
||||
{
|
||||
|
||||
test: /\.(ts|tsx)$/,
|
||||
loader: require.resolve('awesome-typescript-loader'),
|
||||
|
||||
});
|
||||
|
||||
config.module.rules.push(
|
||||
{
|
||||
test: /.css$/,
|
||||
use: ["style-loader", "css-loader", 'sass-loader'],
|
||||
|
||||
enforce: 'pre',
|
||||
},
|
||||
{
|
||||
test: /\.stories\.svg$/,
|
||||
loader: 'svg-inline-loader'
|
||||
}
|
||||
);
|
||||
// config.resolve.alias = {
|
||||
// '@antv/l7-district': path.resolve(__dirname, '../packages/boundary/src'),
|
||||
// }
|
||||
|
||||
config.resolve.extensions.push('.ts', '.tsx', 'css', '.js', '.glsl');
|
||||
|
||||
return config;
|
||||
};
|
||||
49
.umirc.ts
49
.umirc.ts
|
|
@ -20,6 +20,48 @@ export default defineConfig({
|
|||
ie: 11,
|
||||
},
|
||||
mode: 'site',
|
||||
navs: [
|
||||
{
|
||||
title: 'bugs',
|
||||
path: '/bugs',
|
||||
},
|
||||
{
|
||||
title: '特性',
|
||||
path: '/features',
|
||||
},
|
||||
|
||||
{
|
||||
title: '图库',
|
||||
path: '/gallery',
|
||||
},
|
||||
{
|
||||
title: '瓦片',
|
||||
path: '/tile',
|
||||
},
|
||||
{
|
||||
title: '栅格',
|
||||
path: '/raster',
|
||||
},
|
||||
{
|
||||
title: '组件',
|
||||
path: '/component',
|
||||
},
|
||||
{
|
||||
title: '绘制组件',
|
||||
path: '/draw',
|
||||
},
|
||||
{
|
||||
title: 'GitHub',
|
||||
path: 'https://github.com/antvis/L7',
|
||||
},
|
||||
],
|
||||
// menus: {
|
||||
// '/raster': [
|
||||
// {
|
||||
// title: '栅格',
|
||||
// },
|
||||
// ]
|
||||
// },
|
||||
esbuild: false,
|
||||
chainWebpack: (memo, { env, webpack, createCSSRule }) => {
|
||||
// 设置 alias
|
||||
|
|
@ -42,13 +84,6 @@ export default defineConfig({
|
|||
['transform-import-css-l7'],
|
||||
['babel-plugin-inline-import', { extensions: ['.worker.js'] }],
|
||||
],
|
||||
navs: [
|
||||
null,
|
||||
{
|
||||
title: 'GitHub',
|
||||
path: 'https://github.com/antvis/L7',
|
||||
},
|
||||
],
|
||||
externals: {
|
||||
react: 'window.React',
|
||||
'react-dom': 'window.ReactDOM',
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
---
|
||||
group:
|
||||
path: 'point'
|
||||
title: 点
|
||||
---
|
||||
### Point - update
|
||||
#### style 映射
|
||||
<code src="./demos/pointupdate.tsx"></code>
|
||||
|
|
@ -68,9 +68,6 @@ export default () => {
|
|||
],
|
||||
};
|
||||
const source = new Source(geoData);
|
||||
|
||||
// scene.on('zoom', e => console.log(e))
|
||||
|
||||
const layer = new LineLayer({ blend: 'normal' })
|
||||
.source(source)
|
||||
.size(1)
|
||||
|
|
|
|||
|
|
@ -1,88 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
async function getTiffData() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
|
||||
);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return {
|
||||
data: values[0],
|
||||
width,
|
||||
height,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
};
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
center: [121.268, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
|
||||
const tiffdata = await getTiffData();
|
||||
|
||||
const layer = new RasterLayer({});
|
||||
layer
|
||||
.source(tiffdata.data, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width: tiffdata.width,
|
||||
height: tiffdata.height,
|
||||
min: 0,
|
||||
max: 80,
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
})
|
||||
.style({
|
||||
heightRatio: 100,
|
||||
opacity: 0.8,
|
||||
domain: [0, 2000],
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#91EABC',
|
||||
'#2EA9A1',
|
||||
'#206C7C',
|
||||
].reverse(),
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
|
||||
layer.on('click', (e) => {
|
||||
console.log(e)
|
||||
})
|
||||
|
||||
scene.addLayer(layer);
|
||||
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
async function getTiffData() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
|
||||
// 'http://127.0.0.1:3333/p.tif',
|
||||
);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
center: [121.268, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
|
||||
const tiffdata = await getTiffData();
|
||||
|
||||
const layer = new RasterLayer({})
|
||||
layer.source({
|
||||
data: tiffdata,
|
||||
bands: [0]
|
||||
}, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
// width: tiffdata.width,
|
||||
// height: tiffdata.height,
|
||||
format: async (data, bands) => {
|
||||
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(data);
|
||||
const imageCount = await tiff.getImageCount();
|
||||
console.log('imageCount', imageCount)
|
||||
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return { rasterData: values[0], width, height };
|
||||
|
||||
},
|
||||
// operation: (allBands) => {
|
||||
// return allBands[0].rasterData;
|
||||
// },
|
||||
operation: ['+', ['band', 0], 1],
|
||||
min: 0,
|
||||
max: 80,
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
})
|
||||
.style({
|
||||
heightRatio: 100,
|
||||
opacity: 0.8,
|
||||
domain: [0, 2000],
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#91EABC',
|
||||
'#2EA9A1',
|
||||
'#206C7C',
|
||||
].reverse(),
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
async function getTiffData(url: string) {
|
||||
const response = await fetch(url);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
center: [110, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
//
|
||||
const url1 = 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat';
|
||||
// 全国夜光图
|
||||
const url2 = 'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff'
|
||||
const tiffdata = await getTiffData(url1);
|
||||
const tiffdata2 = await getTiffData(url2);
|
||||
// const rasterData = { data: tiffdata }
|
||||
const rasterData = [
|
||||
{ data: tiffdata },
|
||||
{ data: tiffdata2 }
|
||||
];
|
||||
|
||||
const layer = new RasterLayer({})
|
||||
layer.source(rasterData, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
format: async (data, bands) => {
|
||||
// console.log('bands', bands)
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(data);
|
||||
// const imageCount = await tiff.getImageCount();
|
||||
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return { rasterData: values[0], width, height };
|
||||
|
||||
},
|
||||
// operation: (allBands) => {
|
||||
// console.log(allBands)
|
||||
// return allBands[0].rasterData;
|
||||
// },
|
||||
operation: ['+', ['+', ['band', 0], 90], ['*', ['band', 1], 50]],
|
||||
min: 0,
|
||||
max: 80,
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
})
|
||||
.style({
|
||||
heightRatio: 100,
|
||||
opacity: 0.8,
|
||||
domain: [0, 4000],
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#333',
|
||||
'#222',
|
||||
'#000',
|
||||
].reverse(),
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
|
||||
});
|
||||
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
async function getTiffData(url: string) {
|
||||
const response = await fetch(url);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
center: [121.268, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
const url1 = 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-JRUT5u3IDcAAAAAAAAAAAAADmJ7AQ/original';
|
||||
const tiffdata = await getTiffData(url1);
|
||||
|
||||
const layer = new RasterLayer({})
|
||||
layer.source([
|
||||
{
|
||||
data: tiffdata,
|
||||
bands: [0, 1, 2, 3],
|
||||
},
|
||||
], {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
format: async (data, bands) => {
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(data);
|
||||
console.log(tiff)
|
||||
const imageCount = await tiff.getImageCount();
|
||||
console.log('imageCount', imageCount, bands)
|
||||
|
||||
|
||||
// const image = await tiff.getImage();
|
||||
// const width = image.getWidth();
|
||||
// const height = image.getHeight();
|
||||
// const value0 = await image.readRasters();
|
||||
|
||||
const image1 = await tiff.getImage(1);
|
||||
const value1 = await image1.readRasters();
|
||||
// console.log(value1)
|
||||
|
||||
// const image2 = await tiff.getImage(2);
|
||||
// const value2 = await image2.readRasters();
|
||||
// console.log(value2)
|
||||
|
||||
const value = value1;
|
||||
// console.log(value)
|
||||
return [
|
||||
// { rasterData: value0[0], width, height },
|
||||
// { rasterData: value1[0], width, height },
|
||||
// { rasterData: value2[0], width, height }
|
||||
// { rasterData: value[0], width: value.width, height: value.height },
|
||||
// { rasterData: value[1], width: value.width, height: value.height },
|
||||
{ rasterData: value[2], width: value.width, height: value.height }, // R
|
||||
{ rasterData: value[3], width: value.width, height: value.height }, // NIR
|
||||
];
|
||||
},
|
||||
// blue green red nir
|
||||
// NDVI = ABS(NIR - R) / (NIR + R) = 近红外与红光之差 / 近红外与红光之和
|
||||
operation: ['/',
|
||||
['-', ['band', 0], ['band', 1]], // R > NIR
|
||||
['+', ['band', 0], ['band', 1]]
|
||||
],
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
})
|
||||
.style({
|
||||
domain: [0, 0.25],
|
||||
rampColors: {
|
||||
colors: [ 'rgb(166,97,26)', 'rgb(223,194,125)', 'rgb(245,245,245)', 'rgb(128,205,193)', 'rgb(1,133,113)' ],
|
||||
positions: [ 0, 0.25, 0.5, 0.75, 1.0 ]
|
||||
},
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
async function getTiffData(url: string) {
|
||||
const response = await fetch(url);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
center: [121.268, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
const url1 = 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat';
|
||||
const url2 = 'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff'
|
||||
const tiffdata = await getTiffData(url1);
|
||||
const tiffdata2 = await getTiffData(url2);
|
||||
|
||||
const layer = new RasterLayer({})
|
||||
layer.source([
|
||||
{
|
||||
data: tiffdata,
|
||||
bands: [0],
|
||||
},
|
||||
{
|
||||
data: tiffdata2,
|
||||
bands: [0],
|
||||
}
|
||||
], {
|
||||
parser: {
|
||||
type: 'rasterRgb',
|
||||
format: async (data, bands) => {
|
||||
// console.log(bands, )
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(data);
|
||||
const imageCount = await tiff.getImageCount();
|
||||
console.log('imageCount', imageCount, bands)
|
||||
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return { rasterData: values[0], width, height };
|
||||
},
|
||||
// operation: (allBands) => {
|
||||
// return allBands[0].rasterData;
|
||||
// },
|
||||
// operation: ['+', ['band', 0], 1],
|
||||
operation: {
|
||||
r: ['*', ['band', 1], 1],
|
||||
g: ['*', ['band', 1], 1],
|
||||
b: ['*', ['band', 1], 1],
|
||||
},
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
})
|
||||
.style({
|
||||
// opacity: 0.8,
|
||||
channelRMax: 100,
|
||||
channelGMax: 100,
|
||||
channelBMax: 100
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
async function getTiffData(url: string) {
|
||||
const response = await fetch(url);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
center: [110, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
const canvasSize = 256;
|
||||
canvas.width = canvasSize;
|
||||
canvas.height = canvasSize;
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
const url1 = 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*sV6gSYSdpl4AAAAAAAAAAAAAARQnAQ';
|
||||
const tiffdata = await getTiffData(url1);
|
||||
|
||||
// Gray = R*0.299 + G*0.587 + B*0.114
|
||||
const grayExp = ['+',
|
||||
['*', ['band', 0], 0.299],
|
||||
[
|
||||
'+',
|
||||
['*', ['band', 1], 0.587],
|
||||
['*', ['band', 2], 0.114]
|
||||
]
|
||||
]
|
||||
const layer = new RasterLayer({})
|
||||
layer.source([
|
||||
{
|
||||
data: tiffdata,
|
||||
bands: [0],
|
||||
},
|
||||
], {
|
||||
parser: {
|
||||
type: 'rasterRgb',
|
||||
format: async (data, bands) => {
|
||||
const blob: Blob = new Blob([new Uint8Array(data)], {
|
||||
type: 'image/png',
|
||||
});
|
||||
const img = await createImageBitmap(blob);
|
||||
|
||||
ctx.clearRect(0, 0, canvasSize, canvasSize);
|
||||
ctx.drawImage(img, 0, 0, canvasSize, canvasSize);
|
||||
const imgData = ctx.getImageData(0, 0, canvasSize, canvasSize).data;
|
||||
const channelR: number[] = [];
|
||||
const channelG: number[] = [];
|
||||
const channelB: number[] = [];
|
||||
for (let i = 0; i < imgData.length; i += 4) {
|
||||
const R = imgData[i];
|
||||
const G = imgData[i + 1];
|
||||
const B = imgData[i + 2];
|
||||
|
||||
channelR.push(R);
|
||||
channelG.push(G);
|
||||
channelB.push(B);
|
||||
}
|
||||
|
||||
return [
|
||||
{ rasterData: channelR, width: canvasSize, height: canvasSize },
|
||||
{ rasterData: channelG, width: canvasSize, height: canvasSize },
|
||||
{ rasterData: channelB, width: canvasSize, height: canvasSize }
|
||||
];
|
||||
},
|
||||
// operation: (allBands) => {
|
||||
// return allBands[0].rasterData;
|
||||
// },
|
||||
// operation: ['+', ['band', 0], 1],
|
||||
operation: {
|
||||
r: ['band', 0],
|
||||
g: ['band', 1],
|
||||
b: ['band', 2],
|
||||
// r: ['*', ['band', 0], 1],
|
||||
// g: ['*', ['band', 1], 1],
|
||||
// b: ['*', ['band', 2], 1],
|
||||
// r: grayExp,
|
||||
// g: grayExp,
|
||||
// b: grayExp,
|
||||
},
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
})
|
||||
.style({
|
||||
// opacity: 0.8,
|
||||
// channelRMax: 100,
|
||||
// channelGMax: 100,
|
||||
// channelBMax: 100
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
return () => {
|
||||
scene.destroy();
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
async function getTiffData(url: string) {
|
||||
const response = await fetch(url);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
center: [121.268, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
const url1 = 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-JRUT5u3IDcAAAAAAAAAAAAADmJ7AQ/original';
|
||||
const tiffdata = await getTiffData(url1);
|
||||
|
||||
const layer = new RasterLayer({})
|
||||
layer.source([
|
||||
{
|
||||
data: tiffdata,
|
||||
},
|
||||
], {
|
||||
parser: {
|
||||
type: 'rasterRgb',
|
||||
format: async (data, bands) => {
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(data);
|
||||
const imageCount = await tiff.getImageCount();
|
||||
const image1 = await tiff.getImage();
|
||||
const value1 = await image1.readRasters();
|
||||
|
||||
const value = value1;
|
||||
return [
|
||||
|
||||
{ rasterData: value[0], width: value.width, height: value.height },
|
||||
{ rasterData: value[1], width: value.width, height: value.height },
|
||||
{ rasterData: value[2], width: value.width, height: value.height },
|
||||
{ rasterData: value[3], width: value.width, height: value.height }
|
||||
];
|
||||
},
|
||||
operation: {
|
||||
// blue green red nir
|
||||
// 标准真彩色 rgb
|
||||
// r: ['-', ['band', 2], 155],
|
||||
// g: ['-', ['band', 1], 184],
|
||||
// b: ['-', ['band', 0], 295],
|
||||
|
||||
// // 标准假彩色 4，3，2
|
||||
// r: ['-', ['band', 3], 295],
|
||||
// g: ['-', ['band', 2], 184],
|
||||
// b: ['-', ['band', 1], 295],
|
||||
|
||||
// 标准假彩色 4，3，2
|
||||
|
||||
|
||||
// r: ['*', ['/', ['band', 3], 234], 255],
|
||||
// g: ['*', ['/', ['band', 2], 296], 255],
|
||||
// b: ['*', ['/', ['band', 1], 296], 255],
|
||||
|
||||
// r: ['-', ['band', 3], 234],
|
||||
// g: ['-', ['band', 2], 296],
|
||||
// b: ['-', ['band', 1], 296],
|
||||
|
||||
// r: ['/', ['band', 3], 234],
|
||||
// g: ['/', ['band', 2], 296],
|
||||
// b: ['/', ['band', 1], 296],
|
||||
|
||||
|
||||
// r: ['/', ['band', 3], 2],
|
||||
// g: ['/', ['band', 2], 2],
|
||||
// b: ['/', ['band', 1], 2],
|
||||
|
||||
|
||||
// r: ['band', 3],
|
||||
// g: ['band', 2],
|
||||
// b: ['band', 1],
|
||||
|
||||
r: ['-', ['band', 3], 113],
|
||||
g: ['-', ['band', 2], 155],
|
||||
b: ['-', ['band', 1], 184],
|
||||
},
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
})
|
||||
.style({
|
||||
// channelRMax: 255,
|
||||
// channelGMax: 255,
|
||||
// channelBMax: 255
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
### RasterLayer - raster
|
||||
#### 普通 rasterLayer
|
||||
<code src="./demos/rasterData.tsx"></code>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
### RasterLayer - rasterFile
|
||||
#### raster file data
|
||||
加载单个栅格文件的二进制流数据，自己提供栅格波段数据的提取方法。
|
||||
<code src="./demos/rasterFile.tsx"></code>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
### RasterLayer - rasterFile2
|
||||
#### raster file data2
|
||||
加载多个栅格文件的二进制流数据，自己提供栅格波段数据的提取方法。
|
||||
<code src="./demos/rasterFile2.tsx"></code>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
### RasterLayer - raster ndvi
|
||||
#### ndvi
|
||||
<code src="./demos/rasterNDVI.tsx"></code>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
### RasterLayer - rasterRgb
|
||||
#### 普通 rgb rasterLayer
|
||||
<code src="./demos/rasterRgb.tsx"></code>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
### RasterLayer - rasterRgb2
|
||||
#### 普通 rgb2 rasterLayer
|
||||
<code src="./demos/rasterRgb2.tsx"></code>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
### RasterLayer - rasterRgb3
|
||||
#### 普通 rgb3 rasterLayer
|
||||
<code src="./demos/rasterRgb3.tsx"></code>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
async function getTiffData() {
|
||||
// const response = await fetch(
|
||||
// 'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
|
||||
// );
|
||||
const response = await fetch('http://127.0.0.1:8080/OUTPUT_clip.tif');
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
console.log(values);
|
||||
return {
|
||||
data: values[0],
|
||||
width,
|
||||
height,
|
||||
min: 0,
|
||||
max: 8000,
|
||||
};
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
center: [121.268, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
const tiffdata = await getTiffData();
|
||||
|
||||
const layer = new RasterLayer({});
|
||||
layer
|
||||
.source(tiffdata.data, {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width: tiffdata.width,
|
||||
height: tiffdata.height,
|
||||
min: 0,
|
||||
max: 80,
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
})
|
||||
.style({
|
||||
heightRatio: 100,
|
||||
opacity: 0.8,
|
||||
domain: [0, 2000],
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#91EABC',
|
||||
'#2EA9A1',
|
||||
'#206C7C',
|
||||
].reverse(),
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
|
||||
layer.on('click', (e) => {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -8,7 +8,6 @@ import * as GeoTIFF from 'geotiff';
|
|||
async function getTiffData() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
|
||||
// 'http://127.0.0.1:3333/p.tif',
|
||||
);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer;
|
||||
|
|
@ -26,46 +25,27 @@ export default () => {
|
|||
|
||||
scene.on('loaded', async () => {
|
||||
const tiffdata = await getTiffData();
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(tiffdata);
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
|
||||
const layer = new RasterLayer({});
|
||||
const layer = new RasterLayer();
|
||||
layer
|
||||
.source(
|
||||
{
|
||||
data: tiffdata,
|
||||
bands: [0],
|
||||
.source(values[0], {
|
||||
parser: {
|
||||
type: 'raster',
|
||||
width,
|
||||
height,
|
||||
extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
|
||||
},
|
||||
{
|
||||
parser: {
|
||||
type: 'raster',
|
||||
// width: tiffdata.width,
|
||||
// height: tiffdata.height,
|
||||
format: async (data, bands) => {
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(data);
|
||||
const imageCount = await tiff.getImageCount();
|
||||
console.log('imageCount', imageCount);
|
||||
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return { rasterData: values[0], width, height };
|
||||
},
|
||||
// operation: (allBands) => {
|
||||
// return allBands[0].rasterData;
|
||||
// },
|
||||
operation: ['+', ['band', 0], 1],
|
||||
min: 0,
|
||||
max: 80,
|
||||
extent: [
|
||||
73.482190241, 3.82501784112, 135.106618732, 57.6300459963,
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
.style({
|
||||
heightRatio: 100,
|
||||
opacity: 0.8,
|
||||
domain: [0, 2000],
|
||||
clampLow: false,
|
||||
clampHigh: false,
|
||||
domain: [100, 8000],
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
|
|
|
|||
|
|
@ -26,13 +26,6 @@ export default () => {
|
|||
const url1 =
|
||||
'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*XKLhRY67iPgAAAAAAAAAAAAADmJ7AQ/original';
|
||||
const tiffdata = await getTiffData(url1);
|
||||
|
||||
// const tiffdata1 = await GeoTIFF.fromUrl('https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-JRUT5u3IDcAAAAAAAAAAAAADmJ7AQ/original');
|
||||
|
||||
// const tiffdata1 = await parse_georaster(tiffdata);
|
||||
// console.log(tiffdata1)
|
||||
// console.log(await tiffdata1.getImageCount())
|
||||
// console.log(await tiffdata2.getImageCount())
|
||||
const url2 =
|
||||
'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,93 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
async function getTiffData(url: string) {
|
||||
const response = await fetch(url);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer;
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
center: [121.268, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
const url1 =
|
||||
'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat';
|
||||
const url2 =
|
||||
'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff';
|
||||
const tiffdata = await getTiffData(url1);
|
||||
const tiffdata2 = await getTiffData(url2);
|
||||
|
||||
const layer = new RasterLayer({});
|
||||
layer
|
||||
.source(
|
||||
[
|
||||
{
|
||||
data: tiffdata,
|
||||
bands: [0],
|
||||
},
|
||||
{
|
||||
data: tiffdata2,
|
||||
bands: [0],
|
||||
},
|
||||
],
|
||||
{
|
||||
parser: {
|
||||
type: 'rasterRgb',
|
||||
format: async (data, bands) => {
|
||||
// console.log(bands, )
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(data);
|
||||
const imageCount = await tiff.getImageCount();
|
||||
console.log('imageCount', imageCount, bands);
|
||||
|
||||
const image = await tiff.getImage();
|
||||
const width = image.getWidth();
|
||||
const height = image.getHeight();
|
||||
const values = await image.readRasters();
|
||||
return { rasterData: values[0], width, height };
|
||||
},
|
||||
// operation: (allBands) => {
|
||||
// return allBands[0].rasterData;
|
||||
// },
|
||||
// operation: ['+', ['band', 0], 1],
|
||||
operation: {
|
||||
r: ['*', ['band', 1], 1],
|
||||
g: ['*', ['band', 1], 1],
|
||||
b: ['*', ['band', 1], 1],
|
||||
},
|
||||
extent: [
|
||||
73.482190241, 3.82501784112, 135.106618732, 57.6300459963,
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
.style({
|
||||
// opacity: 0.8,
|
||||
channelRMax: 100,
|
||||
channelGMax: 100,
|
||||
channelBMax: 100,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { GaodeMapV2 } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
async function getTiffData(url: string) {
|
||||
const response = await fetch(url);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer;
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMapV2({
|
||||
center: [110, 30.3628],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
const canvasSize = 256;
|
||||
canvas.width = canvasSize;
|
||||
canvas.height = canvasSize;
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
const url1 =
|
||||
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*sV6gSYSdpl4AAAAAAAAAAAAAARQnAQ';
|
||||
const tiffdata = await getTiffData(url1);
|
||||
|
||||
// Gray = R*0.299 + G*0.587 + B*0.114
|
||||
const grayExp = [
|
||||
'+',
|
||||
['*', ['band', 0], 0.299],
|
||||
['+', ['*', ['band', 1], 0.587], ['*', ['band', 2], 0.114]],
|
||||
];
|
||||
const layer = new RasterLayer({});
|
||||
layer
|
||||
.source(
|
||||
[
|
||||
{
|
||||
data: tiffdata,
|
||||
bands: [0],
|
||||
},
|
||||
],
|
||||
{
|
||||
parser: {
|
||||
type: 'rasterRgb',
|
||||
format: async (data, bands) => {
|
||||
const blob: Blob = new Blob([new Uint8Array(data)], {
|
||||
type: 'image/png',
|
||||
});
|
||||
const img = await createImageBitmap(blob);
|
||||
|
||||
ctx.clearRect(0, 0, canvasSize, canvasSize);
|
||||
ctx.drawImage(img, 0, 0, canvasSize, canvasSize);
|
||||
const imgData = ctx.getImageData(
|
||||
0,
|
||||
0,
|
||||
canvasSize,
|
||||
canvasSize,
|
||||
).data;
|
||||
const channelR: number[] = [];
|
||||
const channelG: number[] = [];
|
||||
const channelB: number[] = [];
|
||||
for (let i = 0; i < imgData.length; i += 4) {
|
||||
const R = imgData[i];
|
||||
const G = imgData[i + 1];
|
||||
const B = imgData[i + 2];
|
||||
|
||||
channelR.push(R);
|
||||
channelG.push(G);
|
||||
channelB.push(B);
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
rasterData: channelR,
|
||||
width: canvasSize,
|
||||
height: canvasSize,
|
||||
},
|
||||
{
|
||||
rasterData: channelG,
|
||||
width: canvasSize,
|
||||
height: canvasSize,
|
||||
},
|
||||
{
|
||||
rasterData: channelB,
|
||||
width: canvasSize,
|
||||
height: canvasSize,
|
||||
},
|
||||
];
|
||||
},
|
||||
// operation: (allBands) => {
|
||||
// return allBands[0].rasterData;
|
||||
// },
|
||||
// operation: ['+', ['band', 0], 1],
|
||||
operation: {
|
||||
r: ['band', 0],
|
||||
g: ['band', 1],
|
||||
b: ['band', 2],
|
||||
// r: ['*', ['band', 0], 1],
|
||||
// g: ['*', ['band', 1], 1],
|
||||
// b: ['*', ['band', 2], 1],
|
||||
// r: grayExp,
|
||||
// g: grayExp,
|
||||
// b: grayExp,
|
||||
},
|
||||
extent: [
|
||||
73.482190241, 3.82501784112, 135.106618732, 57.6300459963,
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
.style({
|
||||
// opacity: 0.8,
|
||||
// channelRMax: 100,
|
||||
// channelGMax: 100,
|
||||
// channelBMax: 100
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
return () => {
|
||||
scene.destroy();
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
// @ts-ignore
|
||||
import { RasterLayer, Scene } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Map } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
import * as GeoTIFF from 'geotiff';
|
||||
|
||||
async function getTiffData(url: string) {
|
||||
const response = await fetch(url);
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return arrayBuffer;
|
||||
}
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Map({
|
||||
center: [129.84688399962705, 46.66599711239799],
|
||||
zoom: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', async () => {
|
||||
const url2 =
|
||||
'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&';
|
||||
|
||||
const layer2 = new RasterLayer({
|
||||
zIndex: 1,
|
||||
}).source(url2, {
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
tileSize: 256,
|
||||
wmtsOptions: {
|
||||
layer: 'img',
|
||||
tileMatrixset: 'w',
|
||||
format: 'tiles',
|
||||
},
|
||||
},
|
||||
});
|
||||
scene.addLayer(layer2);
|
||||
const url1 =
|
||||
'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*XKLhRY67iPgAAAAAAAAAAAAADmJ7AQ/original';
|
||||
const tiffdata = await getTiffData(url1);
|
||||
|
||||
const layer = new RasterLayer({ zIndex: 10 });
|
||||
layer
|
||||
.source(
|
||||
[
|
||||
{
|
||||
data: tiffdata,
|
||||
bands: [0, 1, 2, 3],
|
||||
},
|
||||
],
|
||||
{
|
||||
parser: {
|
||||
type: 'rasterRgb',
|
||||
format: async (data, bands) => {
|
||||
const tiff = await GeoTIFF.fromArrayBuffer(data);
|
||||
|
||||
const image1 = await tiff.getImage();
|
||||
const value1 = await image1.readRasters();
|
||||
|
||||
const value = value1;
|
||||
|
||||
return [
|
||||
{
|
||||
rasterData: value[0],
|
||||
width: value.width,
|
||||
height: value.height,
|
||||
},
|
||||
{
|
||||
rasterData: value[1],
|
||||
width: value.width,
|
||||
height: value.height,
|
||||
},
|
||||
{
|
||||
rasterData: value[2],
|
||||
width: value.width,
|
||||
height: value.height,
|
||||
},
|
||||
{
|
||||
rasterData: value[3],
|
||||
width: value.width,
|
||||
height: value.height,
|
||||
},
|
||||
];
|
||||
},
|
||||
operation: {
|
||||
r: ['-', ['band', 0], 1831],
|
||||
g: ['-', ['band', 1], 1649],
|
||||
b: ['-', ['band', 2], 1424],
|
||||
},
|
||||
extent: [
|
||||
129.80688399962705, 46.63599711239799, 129.88665024933522,
|
||||
46.695215826300725,
|
||||
],
|
||||
},
|
||||
},
|
||||
)
|
||||
.style({
|
||||
channelRMax: 2402 - 1831,
|
||||
channelGMax: 2374 - 1649,
|
||||
channelBMax: 2440 - 1424,
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
### Rarster TiFF
|
||||
<code src="./demos/rasterData.tsx"></code>
|
||||
|
|
@ -1,4 +1,2 @@
|
|||
### RasterLayer - rasterFile
|
||||
#### raster file data
|
||||
加载单个栅格文件的二进制流数据，自己提供栅格波段数据的提取方法。
|
||||
### Raster TIFF 单波段
|
||||
<code src="./demos/rasterFile.tsx"></code>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
### RasterLayer - rasterFile2
|
||||
#### raster file data2
|
||||
加载多个栅格文件的二进制流数据，自己提供栅格波段数据的提取方法。
|
||||
<code src="./demos/rasterFile2.tsx"></code>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
### RasterLayer - rasterRgb
|
||||
#### 普通 rgb rasterLayer
|
||||
<code src="./demos/rasterRgb.tsx"></code>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
### RasterLayer - rasterRgb2
|
||||
#### 普通 rgb2 rasterLayer
|
||||
<code src="./demos/rasterRgb2.tsx"></code>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
### RasterLayer - rasterRgb3
|
||||
#### 普通 rgb3 rasterLayer
|
||||
<code src="./demos/rasterRgb3.tsx"></code>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: 星球地图-地形晕渲
|
||||
order: 2
|
||||
---
|
||||
|
||||
地形晕渲 API 是通过 HTTPS 协议访问远程服务的接口，返回指定区域的地形瓦片地图。
|
||||
|
||||
<code src="./demos/dem.tsx"></code>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
// @ts-ignore
|
||||
import { Scene, RasterLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Map } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
map: new Map({
|
||||
center: [113.270854, 23.141717],
|
||||
zoom: 5,
|
||||
}),
|
||||
});
|
||||
|
||||
const url1 =
|
||||
'https://tiles{1-3}.geovisearth.com/base/v1/ter/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788';
|
||||
const url2 =
|
||||
'https://tiles{1-3}.geovisearth.com/base/v1/cat/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788';
|
||||
const layer1 = new RasterLayer({
|
||||
zIndex: 1,
|
||||
}).source(url1, {
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const layer2 = new RasterLayer({
|
||||
zIndex: 1,
|
||||
}).source(url2, {
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
},
|
||||
});
|
||||
|
||||
// const layer3 = new RasterLayer({
|
||||
// zIndex: 1,
|
||||
// }).source(url3, {
|
||||
// parser: {
|
||||
// type: 'rasterTile',
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1,
|
||||
// },
|
||||
// });
|
||||
|
||||
// const layer4 = new RasterLayer({
|
||||
// zIndex: 1,
|
||||
// }).source(url4, {
|
||||
// parser: {
|
||||
// type: 'rasterTile',
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1,
|
||||
// },
|
||||
// });
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer1);
|
||||
scene.addLayer(layer2);
|
||||
// scene.addLayer(layer3);
|
||||
// scene.addLayer(layer4);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
//@ts-ignore
|
||||
import { Scene, RasterLayer } from '@antv/l7';
|
||||
//@ts-ignore
|
||||
import { Map } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Map({
|
||||
center: [114.5591, 37.715],
|
||||
zoom: 5,
|
||||
}),
|
||||
});
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 256;
|
||||
canvas.height = 256;
|
||||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
|
||||
scene.on('loaded', () => {
|
||||
const url1 =
|
||||
'https://tiles{1-3}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788';
|
||||
|
||||
const layer1 = new RasterLayer({
|
||||
zIndex: 1,
|
||||
}).source(url1, {
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const layer = new RasterLayer({
|
||||
zIndex:10
|
||||
});
|
||||
layer
|
||||
.source(
|
||||
'https://tiles{1-3}.geovisearth.com/base/v1/terrain_rgb/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788',
|
||||
|
||||
{
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
dataType: 'arraybuffer',
|
||||
tileSize: 256,
|
||||
zoomOffset:1,
|
||||
format: async (data: any) => {
|
||||
const blob: Blob = new Blob([new Uint8Array(data)], {
|
||||
type: 'image/png',
|
||||
});
|
||||
const img = await createImageBitmap(blob);
|
||||
ctx.clearRect(0, 0, 256, 256);
|
||||
ctx.drawImage(img, 0, 0, 256, 256);
|
||||
|
||||
const shadeOptions = {
|
||||
resolution: 256,
|
||||
sunEl: 0,
|
||||
sunAz: 131,
|
||||
vert: 2
|
||||
}
|
||||
const elevationImage = ctx.getImageData(0, 0, 256, 256);
|
||||
const width = elevationImage.width;
|
||||
const height = elevationImage.height;
|
||||
const elevationData = elevationImage.data;
|
||||
const shadeData = new Uint8ClampedArray(elevationData.length);
|
||||
const dp = shadeOptions.resolution * 2;
|
||||
const maxX = width - 1;
|
||||
const maxY = height - 1;
|
||||
const pixel = [0, 0, 0, 0];
|
||||
const twoPi = 2 * Math.PI;
|
||||
const halfPi = Math.PI / 2;
|
||||
|
||||
const sunEl = (Math.PI * shadeOptions.sunEl) / 180;
|
||||
const sunAz = (Math.PI * shadeOptions.sunAz) / 180;
|
||||
|
||||
const cosSunEl = Math.cos(sunEl);
|
||||
const sinSunEl = Math.sin(sunEl);
|
||||
let pixelX,
|
||||
pixelY,
|
||||
x0,
|
||||
x1,
|
||||
y0,
|
||||
y1,
|
||||
offset,
|
||||
z0,
|
||||
z1,
|
||||
dzdx,
|
||||
dzdy,
|
||||
slope,
|
||||
aspect,
|
||||
cosIncidence,
|
||||
scaled;
|
||||
function calculateElevation(pixel) {
|
||||
return -10000 + (pixel[0] * 256 * 256 + pixel[1] * 2 * 256 + pixel[2]) * 0.1;
|
||||
|
||||
}
|
||||
|
||||
const arr2: number[] = [];
|
||||
|
||||
for (pixelY = 0; pixelY <= maxY; ++pixelY) {
|
||||
y0 = pixelY === 0 ? 0 : pixelY - 1;
|
||||
y1 = pixelY === maxY ? maxY : pixelY + 1;
|
||||
for (pixelX = 0; pixelX <= maxX; ++pixelX) {
|
||||
x0 = pixelX === 0 ? 0 : pixelX - 1;
|
||||
x1 = pixelX === maxX ? maxX : pixelX + 1;
|
||||
|
||||
// determine elevation for (x0, pixelY)
|
||||
offset = (pixelY * width + x0) * 4;
|
||||
pixel[0] = elevationData[offset];
|
||||
pixel[1] = elevationData[offset + 1];
|
||||
pixel[2] = elevationData[offset + 2];
|
||||
pixel[3] = elevationData[offset + 3];
|
||||
z0 = shadeOptions.vert * calculateElevation(pixel);
|
||||
|
||||
// determine elevation for (x1, pixelY)
|
||||
offset = (pixelY * width + x1) * 4;
|
||||
pixel[0] = elevationData[offset];
|
||||
pixel[1] = elevationData[offset + 1];
|
||||
pixel[2] = elevationData[offset + 2];
|
||||
pixel[3] = elevationData[offset + 3];
|
||||
z1 = shadeOptions.vert * calculateElevation(pixel);
|
||||
|
||||
dzdx = (z1 - z0) / dp;
|
||||
|
||||
// determine elevation for (pixelX, y0)
|
||||
offset = (y0 * width + pixelX) * 4;
|
||||
pixel[0] = elevationData[offset];
|
||||
pixel[1] = elevationData[offset + 1];
|
||||
pixel[2] = elevationData[offset + 2];
|
||||
pixel[3] = elevationData[offset + 3];
|
||||
z0 = shadeOptions.vert * calculateElevation(pixel);
|
||||
|
||||
// determine elevation for (pixelX, y1)
|
||||
offset = (y1 * width + pixelX) * 4;
|
||||
pixel[0] = elevationData[offset];
|
||||
pixel[1] = elevationData[offset + 1];
|
||||
pixel[2] = elevationData[offset + 2];
|
||||
pixel[3] = elevationData[offset + 3];
|
||||
z1 = shadeOptions.vert * calculateElevation(pixel);
|
||||
|
||||
dzdy = (z1 - z0) / dp;
|
||||
|
||||
slope = Math.atan(Math.sqrt(dzdx * dzdx + dzdy * dzdy));
|
||||
|
||||
aspect = Math.atan2(dzdy, -dzdx);
|
||||
if (aspect < 0) {
|
||||
aspect = halfPi - aspect;
|
||||
} else if (aspect > halfPi) {
|
||||
aspect = twoPi - aspect + halfPi;
|
||||
} else {
|
||||
aspect = halfPi - aspect;
|
||||
}
|
||||
|
||||
cosIncidence =
|
||||
sinSunEl * Math.cos(slope) +
|
||||
cosSunEl * Math.sin(slope) * Math.cos(sunAz - aspect);
|
||||
|
||||
offset = (pixelY * width + pixelX) * 4;
|
||||
scaled = 255 * cosIncidence;
|
||||
shadeData[offset + 1] = scaled;
|
||||
shadeData[offset + 2] = scaled;
|
||||
shadeData[offset + 3] = elevationData[offset + 3];
|
||||
|
||||
const r = shadeData[offset]
|
||||
const g = shadeData[offset + 1]
|
||||
const b = shadeData[offset + 2]
|
||||
// (0.30*R)+(0.59*G)+(0.11*B)
|
||||
arr2.push( 0.30 * r + 0.59 * g + 0.11 * b );
|
||||
}
|
||||
}
|
||||
|
||||
return {rasterData: arr2, width: width, height: height};
|
||||
},
|
||||
},
|
||||
},
|
||||
)
|
||||
.style({
|
||||
opacity: 1,
|
||||
clampLow: false,
|
||||
clampHigh: false,
|
||||
domain: [0, 255],
|
||||
rampColors: {
|
||||
colors: ['#d73027','#fc8d59','#fee08b','#d9ef8b','#91cf60','#1a9850'],
|
||||
positions: [0,0.2,0.4,0.6,0.8,1.0],
|
||||
},
|
||||
});
|
||||
scene.addLayer(layer1)
|
||||
scene.addLayer(layer)
|
||||
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
// @ts-ignore
|
||||
import { Scene, RasterLayer, MaskLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Map } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
map: new Map({
|
||||
center: [112, 30],
|
||||
// zoom: 12,
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
|
||||
const mask = new MaskLayer({
|
||||
sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city
|
||||
}).source(
|
||||
'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
|
||||
{
|
||||
parser: {
|
||||
type: 'mvt',
|
||||
tileSize: 256,
|
||||
maxZoom: 9,
|
||||
extent: [-180, -85.051129, 179, 85.051129],
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const layer = new RasterLayer({
|
||||
zIndex: 1,
|
||||
mask: true,
|
||||
}).source(
|
||||
'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788',
|
||||
{
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
tileSize: 256,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(mask);
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// @ts-ignore
|
||||
import { Scene, RasterLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Map } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
map: new Map({
|
||||
center: [113.270854, 23.141717],
|
||||
zoom: 5,
|
||||
}),
|
||||
});
|
||||
|
||||
const url1 =
|
||||
'https://tiles{1-3}.geovisearth.com/base/v1/vec/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788';
|
||||
|
||||
const layer1 = new RasterLayer({
|
||||
zIndex: 1,
|
||||
}).source(url1, {
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const layer2 = new RasterLayer({
|
||||
zIndex: 1,
|
||||
}).source(url1, {
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer1);
|
||||
scene.addLayer(layer2);
|
||||
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
// @ts-ignore
|
||||
import { Scene, RasterLayer } from '@antv/l7';
|
||||
// @ts-ignore
|
||||
import { Map } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
stencil: true,
|
||||
map: new Map({
|
||||
center: [113.270854, 23.141717],
|
||||
zoom: 5,
|
||||
}),
|
||||
});
|
||||
|
||||
const url1 =
|
||||
'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788';
|
||||
const url2 =
|
||||
'https://tiles{1-3}.geovisearth.com/base/v1/cia/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788';
|
||||
const layer1 = new RasterLayer({
|
||||
zIndex: 1,
|
||||
}).source(url1, {
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const layer2 = new RasterLayer({
|
||||
zIndex: 1,
|
||||
}).source(url2, {
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
},
|
||||
});
|
||||
|
||||
// const layer3 = new RasterLayer({
|
||||
// zIndex: 1,
|
||||
// }).source(url3, {
|
||||
// parser: {
|
||||
// type: 'rasterTile',
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1,
|
||||
// },
|
||||
// });
|
||||
|
||||
// const layer4 = new RasterLayer({
|
||||
// zIndex: 1,
|
||||
// }).source(url4, {
|
||||
// parser: {
|
||||
// type: 'rasterTile',
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1,
|
||||
// },
|
||||
// });
|
||||
|
||||
scene.on('loaded', () => {
|
||||
scene.addLayer(layer1);
|
||||
scene.addLayer(layer2);
|
||||
// scene.addLayer(layer3);
|
||||
// scene.addLayer(layer4);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
//@ts-ignore
|
||||
import { Scene, RasterLayer } from '@antv/l7';
|
||||
//@ts-ignore
|
||||
import { Map } from '@antv/l7-maps';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
const scene = new Scene({
|
||||
id: 'map2',
|
||||
map: new Map({
|
||||
center: [130, 30],
|
||||
pitch: 0,
|
||||
zoom: 1.5,
|
||||
}),
|
||||
});
|
||||
const url ='https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}@2x.webp?sku=101dlMrbPU6hW&access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY5YzJzczA2ejIzM29hNGQ3emFsMXgifQ.az9JUrQP7klCgD3W-ueILQ'
|
||||
scene.on('loaded', () => {
|
||||
const layer = new RasterLayer()
|
||||
.source(
|
||||
'https://tiles{1-3}.geovisearth.com/base/v1/terrain_rgb/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788',
|
||||
{
|
||||
parser: {
|
||||
type: 'rasterTile',
|
||||
dataType:'terrainRGB',
|
||||
tileSize: 256,
|
||||
zoomOffset: 1,
|
||||
},
|
||||
},
|
||||
)
|
||||
.style({
|
||||
clampLow: false,
|
||||
clampHigh: false,
|
||||
domain: [0, 7000],
|
||||
rampColors: {
|
||||
colors: ['#d73027','#fc8d59','#fee08b','#d9ef8b','#91cf60','#1a9850'],
|
||||
positions: [0,0.2,0.4,0.6,0.8,1.0],
|
||||
}
|
||||
});
|
||||
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
id="map2"
|
||||
style={{
|
||||
height: '500px',
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 星球地图 - Hillshade
|
||||
order: 2
|
||||
---
|
||||
<code src="./demos/hillshade.tsx"></code>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: 星球地图-卫星图-mask
|
||||
order: 2
|
||||
---
|
||||
|
||||
|
||||
<code src="./demos/mask.tsx"></code>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: 星球地图-矢量图
|
||||
order: 2
|
||||
---
|
||||
|
||||
矢量图API是通过HTTPS协议访问远程服务的接口，返回指定区域的矢量瓦片地图。其中包含了全球注记、全球境界数据。
|
||||
|
||||
<code src="./demos/normal.tsx"></code>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 星球地图 -影像
|
||||
order: 2
|
||||
---
|
||||
<code src="./demos/raster.tsx"></code>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: 星球地图 - Terrain-RGB
|
||||
order: 2
|
||||
---
|
||||
<code src="./demos/terrain.tsx"></code>
|
||||
|
|
@ -41,6 +41,7 @@ export * from './services/scene/ISceneService';
|
|||
export * from './services/shader/IShaderModuleService';
|
||||
export * from './services/asset/IIconService';
|
||||
export * from './services/asset/IFontService';
|
||||
export * from './services/asset/ITextureService';
|
||||
export * from './services/component/IControlService';
|
||||
export * from './services/component/IMarkerService';
|
||||
export * from './services/component/IPopupService';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import { IColorRamp } from '@antv/l7-utils';
|
||||
import { ITexture2D } from '../renderer/ITexture2D';
|
||||
export interface ITextureService {
|
||||
setColorTexture(texture: ITexture2D,colorRamp: IColorRamp):void;
|
||||
getColorTexture(colorRamp: IColorRamp): ITexture2D
|
||||
destroy():void;
|
||||
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import { SyncBailHook, SyncHook, AsyncSeriesBailHook, AsyncWaterfallHook} from '
|
|||
import { IColorRamp, SourceTile, TilesetManager } from '@antv/l7-utils';
|
||||
import { Container } from 'inversify';
|
||||
import Clock from '../../utils/clock';
|
||||
import { ITextureService } from '../asset/ITextureService';
|
||||
import { ISceneConfig } from '../config/IConfigService';
|
||||
import { IInteractionTarget } from '../interaction/IInteractionService';
|
||||
import { ILayerPickService, IPickingService } from '../interaction/IPickingService';
|
||||
|
|
@ -305,6 +306,7 @@ export type LayerEventType =
|
|||
export interface ILayer {
|
||||
styleAttributeService: IStyleAttributeService,
|
||||
layerPickService: ILayerPickService;
|
||||
textureService: ITextureService;
|
||||
sourceLayer?: string;
|
||||
parent: ILayer;
|
||||
id: string; // 一个场景中同一类型 Layer 可能存在多个
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ import {
|
|||
ISourceCFG,
|
||||
IStyleAttributeService,
|
||||
IStyleAttributeUpdateOptions,
|
||||
ITextureService,
|
||||
LayerEventType,
|
||||
lazyInject,
|
||||
LegendItems,
|
||||
|
|
@ -66,6 +67,7 @@ import {
|
|||
} from '../utils/multiPassRender';
|
||||
import { updateShape } from '../utils/updateShape';
|
||||
import LayerPickService from './LayerPickService';
|
||||
import TextureService from './TextureService';
|
||||
/**
|
||||
* 分配 layer id
|
||||
*/
|
||||
|
|
@ -95,6 +97,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
|||
public layerType?: string | undefined;
|
||||
public triangulation?: Triangulation | undefined;
|
||||
public layerPickService: ILayerPickService;
|
||||
public textureService: ITextureService;
|
||||
|
||||
public defaultSourceConfig: {
|
||||
data: any[];
|
||||
|
|
@ -410,6 +413,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
|||
// 初始化其他服务
|
||||
this.layerPickService = new LayerPickService(this);
|
||||
|
||||
// 颜色纹理服务
|
||||
this.textureService = new TextureService(this);
|
||||
|
||||
// 触发 init 生命周期插件
|
||||
await this.hooks.init.promise();
|
||||
this.inited = true;
|
||||
|
|
@ -984,6 +990,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
|
|||
|
||||
this.multiPassRenderer?.destroy();
|
||||
|
||||
this.textureService.destroy();
|
||||
|
||||
// 清除所有属性以及关联的 vao == 销毁所有 => model this.models.forEach((model) => model.destroy());
|
||||
this.styleAttributeService.clearAllAttributes();
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
import {
|
||||
ILayer,
|
||||
IRendererService,
|
||||
ITexture2D,
|
||||
ITextureService,
|
||||
TYPES,
|
||||
} from '@antv/l7-core';
|
||||
|
||||
import { generateColorRamp, IColorRamp } from '@antv/l7-utils';
|
||||
|
||||
export default class TextureService implements ITextureService {
|
||||
private layer: ILayer;
|
||||
private rendererService: IRendererService;
|
||||
private colorTexture: ITexture2D;
|
||||
private key: string;
|
||||
constructor(layer: ILayer) {
|
||||
this.layer = layer;
|
||||
const container = this.layer.getContainer();
|
||||
this.rendererService = container.get<IRendererService>(
|
||||
TYPES.IRendererService,
|
||||
);
|
||||
}
|
||||
public getColorTexture(colorRamp: IColorRamp) {
|
||||
// TODO 支持传入图片
|
||||
const currentkey = this.getTextureKey(colorRamp);
|
||||
if (this.key === currentkey) {
|
||||
return this.colorTexture;
|
||||
} else {
|
||||
this.createColorTexture(colorRamp);
|
||||
}
|
||||
this.key = currentkey;
|
||||
return this.colorTexture;
|
||||
}
|
||||
|
||||
public createColorTexture(colorRamp: IColorRamp) {
|
||||
const { createTexture2D } = this.rendererService;
|
||||
const imageData = generateColorRamp(colorRamp) as ImageData;
|
||||
const texture = createTexture2D({
|
||||
data: imageData.data,
|
||||
width: imageData.width,
|
||||
height: imageData.height,
|
||||
flipY: false,
|
||||
});
|
||||
this.colorTexture = texture;
|
||||
return texture;
|
||||
}
|
||||
|
||||
public setColorTexture(texture: ITexture2D, colorRamp: IColorRamp) {
|
||||
this.key = this.getTextureKey(colorRamp);
|
||||
this.colorTexture = texture;
|
||||
}
|
||||
|
||||
public destroy() {
|
||||
this.colorTexture?.destroy();
|
||||
}
|
||||
|
||||
private getTextureKey(colorRamp: IColorRamp): string {
|
||||
return `${colorRamp.colors.join('_')}_${colorRamp.positions.join('_')}`;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,24 +13,11 @@ export default class ImageLayer extends BaseLayer<IImageLayerStyleOptions> {
|
|||
const type = this.getModelType();
|
||||
const defaultConfig = {
|
||||
image: {},
|
||||
dataImage: {},
|
||||
tileDataImage: {},
|
||||
};
|
||||
return defaultConfig[type];
|
||||
}
|
||||
|
||||
public getModelType(): ImageModelType {
|
||||
const shapeAttribute =
|
||||
this.styleAttributeService.getLayerStyleAttribute('shape');
|
||||
const shape = shapeAttribute?.scale?.field as ImageModelType;
|
||||
if (shape === 'dataImage') {
|
||||
return 'dataImage';
|
||||
} else if (shape === 'image') {
|
||||
return 'image';
|
||||
} else if (shape === 'tileDataImage') {
|
||||
return 'tileDataImage';
|
||||
} else {
|
||||
return 'image';
|
||||
}
|
||||
return 'image';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,153 +0,0 @@
|
|||
import {
|
||||
AttributeType,
|
||||
gl,
|
||||
IEncodeFeature,
|
||||
IModel,
|
||||
IModelUniform,
|
||||
ITexture2D,
|
||||
} from '@antv/l7-core';
|
||||
import { generateColorRamp, getMask, IColorRamp } from '@antv/l7-utils';
|
||||
import { isEqual } from 'lodash';
|
||||
import BaseModel from '../../core/BaseModel';
|
||||
import { IImageLayerStyleOptions } from '../../core/interface';
|
||||
import { RasterImageTriangulation } from '../../core/triangulation';
|
||||
import ImageFrag from '../shaders/dataImage_frag.glsl';
|
||||
import ImageVert from '../shaders/image_vert.glsl';
|
||||
|
||||
export default class ImageDataModel extends BaseModel {
|
||||
protected texture: ITexture2D;
|
||||
protected colorTexture: ITexture2D;
|
||||
private rampColors: any;
|
||||
public getUninforms(): IModelUniform {
|
||||
const {
|
||||
opacity,
|
||||
clampLow = true,
|
||||
clampHigh = true,
|
||||
noDataValue = -9999999,
|
||||
domain = [0, 1],
|
||||
rampColors,
|
||||
|
||||
pixelConstant = 0.0,
|
||||
pixelConstantR = 256 * 256,
|
||||
pixelConstantG = 256,
|
||||
pixelConstantB = 1,
|
||||
pixelConstantRGB = 0.1,
|
||||
} = this.layer.getLayerConfig() as IImageLayerStyleOptions;
|
||||
|
||||
if (!isEqual(this.rampColors, rampColors)) {
|
||||
this.updateColorTexture();
|
||||
this.rampColors = rampColors;
|
||||
}
|
||||
return {
|
||||
u_opacity: opacity || 1,
|
||||
u_texture: this.texture,
|
||||
|
||||
u_pixelConstant: pixelConstant,
|
||||
u_pixelConstantR: pixelConstantR,
|
||||
u_pixelConstantG: pixelConstantG,
|
||||
u_pixelConstantB: pixelConstantB,
|
||||
u_pixelConstantRGB: pixelConstantRGB,
|
||||
|
||||
u_domain: domain,
|
||||
u_clampLow: clampLow,
|
||||
u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow,
|
||||
u_noDataValue: noDataValue,
|
||||
u_colorTexture: this.colorTexture,
|
||||
};
|
||||
}
|
||||
public async initModels(): Promise<IModel[]> {
|
||||
const {
|
||||
mask = false,
|
||||
maskInside = true,
|
||||
rampColorsData,
|
||||
rampColors,
|
||||
} = this.layer.getLayerConfig() as IImageLayerStyleOptions;
|
||||
|
||||
const source = this.layer.getSource();
|
||||
const { createTexture2D } = this.rendererService;
|
||||
this.texture = createTexture2D({
|
||||
height: 0,
|
||||
width: 0,
|
||||
});
|
||||
|
||||
source.data.images.then(
|
||||
(imageData: Array<HTMLImageElement | ImageBitmap>) => {
|
||||
this.texture = createTexture2D({
|
||||
data: imageData[0],
|
||||
width: imageData[0].width,
|
||||
height: imageData[0].height,
|
||||
});
|
||||
this.layerService.reRender();
|
||||
},
|
||||
);
|
||||
|
||||
const rampImageData = rampColorsData
|
||||
? rampColorsData
|
||||
: generateColorRamp(rampColors as IColorRamp);
|
||||
this.colorTexture = createTexture2D({
|
||||
data: rampImageData.data,
|
||||
width: rampImageData.width,
|
||||
height: rampImageData.height,
|
||||
flipY: false,
|
||||
});
|
||||
|
||||
const model = await this.layer
|
||||
.buildLayerModel({
|
||||
moduleName: 'RasterImage',
|
||||
vertexShader: ImageVert,
|
||||
fragmentShader: ImageFrag,
|
||||
triangulation: RasterImageTriangulation,
|
||||
primitive: gl.TRIANGLES,
|
||||
depth: { enable: false },
|
||||
blend: this.getBlend(),
|
||||
stencil: getMask(mask, maskInside),
|
||||
})
|
||||
return [model]
|
||||
}
|
||||
|
||||
public clearModels(): void {
|
||||
this.texture?.destroy();
|
||||
this.colorTexture?.destroy();
|
||||
}
|
||||
|
||||
public async buildModels():Promise<IModel[]> {
|
||||
return await this.initModels();
|
||||
}
|
||||
|
||||
protected registerBuiltinAttributes() {
|
||||
this.styleAttributeService.registerStyleAttribute({
|
||||
name: 'uv',
|
||||
type: AttributeType.Attribute,
|
||||
descriptor: {
|
||||
name: 'a_Uv',
|
||||
buffer: {
|
||||
usage: gl.DYNAMIC_DRAW,
|
||||
data: [],
|
||||
type: gl.FLOAT,
|
||||
},
|
||||
size: 2,
|
||||
update: (
|
||||
feature: IEncodeFeature,
|
||||
featureIdx: number,
|
||||
vertex: number[],
|
||||
) => {
|
||||
return [vertex[3], vertex[4]];
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private updateColorTexture() {
|
||||
const { createTexture2D } = this.rendererService;
|
||||
const {
|
||||
rampColors,
|
||||
} = this.layer.getLayerConfig() as IImageLayerStyleOptions;
|
||||
const imageData = generateColorRamp(rampColors as IColorRamp);
|
||||
this.colorTexture = createTexture2D({
|
||||
data: imageData.data,
|
||||
width: imageData.width,
|
||||
height: imageData.height,
|
||||
flipY: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -52,21 +52,19 @@ export default class ImageModel extends BaseModel {
|
|||
this.layerService.reRender();
|
||||
};
|
||||
} else {
|
||||
source.data.images.then(
|
||||
(imageData: Array<HTMLImageElement | ImageBitmap>) => {
|
||||
this.texture = createTexture2D({
|
||||
data: imageData[0],
|
||||
width: imageData[0].width,
|
||||
height: imageData[0].height,
|
||||
mag: gl.LINEAR,
|
||||
min: gl.LINEAR,
|
||||
});
|
||||
this.layerService.reRender();
|
||||
},
|
||||
);
|
||||
const imageData = await source.data.images;
|
||||
|
||||
this.texture = createTexture2D({
|
||||
data: imageData[0],
|
||||
width: imageData[0].width,
|
||||
height: imageData[0].height,
|
||||
mag: gl.LINEAR,
|
||||
min: gl.LINEAR,
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
const model = await this.layer
|
||||
const model = await this.layer
|
||||
.buildLayerModel({
|
||||
moduleName: 'rasterImage',
|
||||
vertexShader: ImageVert,
|
||||
|
|
@ -80,14 +78,14 @@ export default class ImageModel extends BaseModel {
|
|||
depth: { enable: false },
|
||||
stencil: getMask(mask, maskInside),
|
||||
})
|
||||
return [model]
|
||||
return [model]
|
||||
}
|
||||
|
||||
public clearModels(): void {
|
||||
this.texture?.destroy();
|
||||
}
|
||||
|
||||
public async buildModels():Promise<IModel[]> {
|
||||
public async buildModels(): Promise<IModel[]> {
|
||||
return await this.initModels();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
import DataImageModel from './dataImage';
|
||||
import ImageModel from './image';
|
||||
import TileDataImageModel from './tileDataImage';
|
||||
export type ImageModelType = 'image' | 'dataImage' | 'tileDataImage';
|
||||
export type ImageModelType = 'image';
|
||||
|
||||
const ImageModels: { [key in ImageModelType]: any } = {
|
||||
image: ImageModel,
|
||||
dataImage: DataImageModel,
|
||||
tileDataImage: TileDataImageModel,
|
||||
};
|
||||
|
||||
export default ImageModels;
|
||||
|
|
|
|||
|
|
@ -1,124 +0,0 @@
|
|||
import {
|
||||
AttributeType,
|
||||
gl,
|
||||
IEncodeFeature,
|
||||
IModel,
|
||||
IModelUniform,
|
||||
ITexture2D,
|
||||
} from '@antv/l7-core';
|
||||
import { getMask } from '@antv/l7-utils';
|
||||
import BaseModel from '../../core/BaseModel';
|
||||
import { IImageLayerStyleOptions } from '../../core/interface';
|
||||
import { RasterImageTriangulation } from '../../core/triangulation';
|
||||
import ImageFrag from '../shaders/dataImage_frag.glsl';
|
||||
import ImageVert from '../shaders/image_vert.glsl';
|
||||
|
||||
export default class ImageDataModel extends BaseModel {
|
||||
protected texture: ITexture2D;
|
||||
public getUninforms(): IModelUniform {
|
||||
const { createTexture2D } = this.rendererService;
|
||||
const {
|
||||
opacity,
|
||||
clampLow = true,
|
||||
clampHigh = true,
|
||||
noDataValue = -9999999,
|
||||
domain = [0, 1],
|
||||
|
||||
colorTexture = createTexture2D({
|
||||
height: 0,
|
||||
width: 0,
|
||||
}),
|
||||
pixelConstant = 0.0,
|
||||
pixelConstantR = 256 * 256,
|
||||
pixelConstantG = 256,
|
||||
pixelConstantB = 1,
|
||||
pixelConstantRGB = 0.1,
|
||||
} = this.layer.getLayerConfig() as IImageLayerStyleOptions;
|
||||
|
||||
return {
|
||||
u_opacity: opacity || 1,
|
||||
u_texture: this.texture,
|
||||
|
||||
u_pixelConstant: pixelConstant,
|
||||
u_pixelConstantR: pixelConstantR,
|
||||
u_pixelConstantG: pixelConstantG,
|
||||
u_pixelConstantB: pixelConstantB,
|
||||
u_pixelConstantRGB: pixelConstantRGB,
|
||||
|
||||
u_domain: domain,
|
||||
u_clampLow: clampLow,
|
||||
u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow,
|
||||
u_noDataValue: noDataValue,
|
||||
u_colorTexture: colorTexture,
|
||||
};
|
||||
}
|
||||
public async initModels(): Promise<IModel[]> {
|
||||
const {
|
||||
mask = false,
|
||||
maskInside = true,
|
||||
} = this.layer.getLayerConfig() as IImageLayerStyleOptions;
|
||||
|
||||
const source = this.layer.getSource();
|
||||
const { createTexture2D } = this.rendererService;
|
||||
this.texture = createTexture2D({
|
||||
height: 0,
|
||||
width: 0,
|
||||
});
|
||||
|
||||
source.data.images.then(
|
||||
(imageData: Array<HTMLImageElement | ImageBitmap>) => {
|
||||
this.texture = createTexture2D({
|
||||
data: imageData[0],
|
||||
width: imageData[0].width,
|
||||
height: imageData[0].height,
|
||||
});
|
||||
this.layerService.reRender();
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
const model = await this.layer
|
||||
.buildLayerModel({
|
||||
moduleName: 'RasterTileDataImage',
|
||||
vertexShader: ImageVert,
|
||||
fragmentShader: ImageFrag,
|
||||
triangulation: RasterImageTriangulation,
|
||||
primitive: gl.TRIANGLES,
|
||||
depth: { enable: false },
|
||||
blend: this.getBlend(),
|
||||
stencil: getMask(mask, maskInside),
|
||||
})
|
||||
return [model]
|
||||
}
|
||||
|
||||
public clearModels(): void {
|
||||
this.texture?.destroy();
|
||||
}
|
||||
|
||||
public async buildModels():Promise<IModel[]> {
|
||||
return await this.initModels();
|
||||
}
|
||||
|
||||
protected registerBuiltinAttributes() {
|
||||
this.styleAttributeService.registerStyleAttribute({
|
||||
name: 'uv',
|
||||
type: AttributeType.Attribute,
|
||||
descriptor: {
|
||||
name: 'a_Uv',
|
||||
buffer: {
|
||||
usage: gl.DYNAMIC_DRAW,
|
||||
data: [],
|
||||
type: gl.FLOAT,
|
||||
},
|
||||
size: 2,
|
||||
update: (
|
||||
feature: IEncodeFeature,
|
||||
featureIdx: number,
|
||||
vertex: number[],
|
||||
) => {
|
||||
return [vertex[3], vertex[4]];
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -11,28 +11,22 @@ uniform float u_noDataValue;
|
|||
uniform bool u_clampLow: true;
|
||||
uniform bool u_clampHigh: true;
|
||||
|
||||
uniform float u_pixelConstant;
|
||||
uniform float u_pixelConstantR;
|
||||
uniform float u_pixelConstantG;
|
||||
uniform float u_pixelConstantB;
|
||||
uniform float u_pixelConstantRGB;
|
||||
|
||||
void main() {
|
||||
vec4 baseColor = texture2D(u_texture, vec2(v_texCoord.x, v_texCoord.y));
|
||||
|
||||
float r = baseColor.r;
|
||||
float g = baseColor.g;
|
||||
float b = baseColor.b;
|
||||
|
||||
float value = u_pixelConstant + ((r * u_pixelConstantR + g * u_pixelConstantG + b * u_pixelConstantB) * u_pixelConstantRGB);
|
||||
if (value == u_noDataValue) {
|
||||
gl_FragColor = vec4(0.0, 0, 0, 0.0);
|
||||
} else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) {
|
||||
gl_FragColor = vec4(0, 0, 0, 0);
|
||||
} else {
|
||||
float value = -10000.0 + ((r * 256.0 * 256.0 + g * 256.0 + b) * 0.1);
|
||||
// if (value == u_noDataValue) {
|
||||
// gl_FragColor = vec4(0.0, 0, 0, 0.0);
|
||||
// } else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) {
|
||||
// gl_FragColor = vec4(0, 0, 0, 0);
|
||||
// } else {
|
||||
float normalisedValue =(value - u_domain[0]) / (u_domain[1] - u_domain[0]);
|
||||
vec4 color = texture2D(u_colorTexture, vec2(normalisedValue, 0));
|
||||
gl_FragColor = color;
|
||||
gl_FragColor.a = gl_FragColor.a * u_opacity ;
|
||||
}
|
||||
gl_FragColor = vec4(r,g,b, 1.0);
|
||||
// gl_FragColor = color;
|
||||
// gl_FragColor.a = gl_FragColor.a * u_opacity ;
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export default class RaterLayer extends BaseLayer<IRasterLayerStyleOptions> {
|
|||
raster: {},
|
||||
rasterRgb: {},
|
||||
raster3d: {},
|
||||
rasterTerrainRgb: {},
|
||||
};
|
||||
return defaultConfig[type];
|
||||
}
|
||||
|
|
@ -27,6 +28,8 @@ export default class RaterLayer extends BaseLayer<IRasterLayerStyleOptions> {
|
|||
return 'raster';
|
||||
case 'rasterRgb':
|
||||
return 'rasterRgb';
|
||||
case 'image':
|
||||
return 'rasterTerrainRgb';
|
||||
default:
|
||||
return 'raster';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import RasterModel from './raster';
|
||||
import RasterRgbModel from './rasterRgb';
|
||||
export type RasterModelType = 'raster' | 'raster3d' | 'rasterRgb';
|
||||
import RasterTerrainRGB from './rasterTerrainRgb';
|
||||
export type RasterModelType = 'raster' | 'raster3d' | 'rasterRgb' | 'rasterTerrainRgb';
|
||||
|
||||
const RasterModels: { [key in RasterModelType]: any } = {
|
||||
raster: RasterModel,
|
||||
rasterRgb: RasterRgbModel,
|
||||
raster3d: RasterModel,
|
||||
rasterTerrainRgb: RasterTerrainRGB
|
||||
};
|
||||
|
||||
export default RasterModels;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {
|
|||
ITexture2D,
|
||||
} from '@antv/l7-core';
|
||||
import { generateColorRamp, getMask, IColorRamp } from '@antv/l7-utils';
|
||||
import { isEqual } from 'lodash';
|
||||
import BaseModel from '../../core/BaseModel';
|
||||
import { IRasterLayerStyleOptions } from '../../core/interface';
|
||||
import { RasterImageTriangulation } from '../../core/triangulation';
|
||||
|
|
@ -25,10 +24,7 @@ export default class RasterModel extends BaseModel {
|
|||
domain = [0, 1],
|
||||
rampColors,
|
||||
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
|
||||
if (!isEqual(this.rampColors, rampColors)) {
|
||||
this.updateColorTexture();
|
||||
this.rampColors = rampColors;
|
||||
}
|
||||
this.colorTexture = this.layer.textureService.getColorTexture(rampColors);
|
||||
|
||||
return {
|
||||
u_opacity: opacity || 1,
|
||||
|
|
@ -64,8 +60,6 @@ export default class RasterModel extends BaseModel {
|
|||
const {
|
||||
mask = false,
|
||||
maskInside = true,
|
||||
rampColorsData,
|
||||
rampColors,
|
||||
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
|
||||
const source = this.layer.getSource();
|
||||
const { createTexture2D } = this.rendererService;
|
||||
|
|
@ -81,16 +75,7 @@ export default class RasterModel extends BaseModel {
|
|||
type: gl.FLOAT,
|
||||
// aniso: 4,
|
||||
});
|
||||
const imageData = rampColorsData
|
||||
? rampColorsData
|
||||
: generateColorRamp(rampColors as IColorRamp);
|
||||
this.colorTexture = createTexture2D({
|
||||
data: imageData.data,
|
||||
width: imageData.width,
|
||||
height: imageData.height,
|
||||
flipY: false,
|
||||
});
|
||||
|
||||
|
||||
const model = await this.layer
|
||||
.buildLayerModel({
|
||||
moduleName: 'rasterImageData',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
import {
|
||||
AttributeType,
|
||||
gl,
|
||||
IEncodeFeature,
|
||||
IModel,
|
||||
IModelUniform,
|
||||
ITexture2D,
|
||||
} from '@antv/l7-core';
|
||||
import { getMask } from '@antv/l7-utils';
|
||||
import BaseModel from '../../core/BaseModel';
|
||||
import { IRasterLayerStyleOptions } from '../../core/interface';
|
||||
import { RasterImageTriangulation } from '../../core/triangulation';
|
||||
import Raster_terrainFrag from '../shaders/raster_terrain_rgb_frag.glsl';
|
||||
import Raster_terrainVert from '../shaders/rater_terrain_rgb_vert.glsl';
|
||||
|
||||
export default class RasterTerrainRGB extends BaseModel {
|
||||
protected texture: ITexture2D;
|
||||
public getUninforms(): IModelUniform {
|
||||
const {
|
||||
opacity,
|
||||
clampLow = true,
|
||||
clampHigh = true,
|
||||
noDataValue = -9999999,
|
||||
domain = [0, 1],
|
||||
rampColors,
|
||||
colorTexture
|
||||
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
|
||||
let texture:ITexture2D | undefined = colorTexture;
|
||||
if(!colorTexture) {
|
||||
texture = this.layer.textureService.getColorTexture(rampColors) as ITexture2D;
|
||||
} else {
|
||||
this.layer.textureService.setColorTexture(colorTexture,rampColors)
|
||||
}
|
||||
return {
|
||||
u_opacity: opacity || 1,
|
||||
u_texture: this.texture,
|
||||
u_domain: domain,
|
||||
u_clampLow: clampLow,
|
||||
u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow,
|
||||
u_noDataValue: noDataValue,
|
||||
u_colorTexture: texture!,
|
||||
};
|
||||
}
|
||||
public async initModels(): Promise<IModel[]> {
|
||||
const {
|
||||
mask = false,
|
||||
maskInside = true,
|
||||
} = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
|
||||
|
||||
const source = this.layer.getSource();
|
||||
const { createTexture2D } = this.rendererService;
|
||||
const imageData = await source.data.images;
|
||||
this.texture = createTexture2D({
|
||||
data: imageData[0],
|
||||
width: imageData[0].width,
|
||||
height: imageData[0].height,
|
||||
});
|
||||
|
||||
const model = await this.layer
|
||||
.buildLayerModel({
|
||||
moduleName: 'RasterTileDataImage',
|
||||
vertexShader: Raster_terrainVert,
|
||||
fragmentShader: Raster_terrainFrag,
|
||||
triangulation: RasterImageTriangulation,
|
||||
primitive: gl.TRIANGLES,
|
||||
depth: { enable: false },
|
||||
blend: this.getBlend(),
|
||||
stencil: getMask(mask, maskInside),
|
||||
})
|
||||
return [model]
|
||||
}
|
||||
|
||||
public clearModels(): void {
|
||||
this.texture?.destroy();
|
||||
}
|
||||
|
||||
public async buildModels(): Promise<IModel[]> {
|
||||
return await this.initModels();
|
||||
}
|
||||
|
||||
protected registerBuiltinAttributes() {
|
||||
this.styleAttributeService.registerStyleAttribute({
|
||||
name: 'uv',
|
||||
type: AttributeType.Attribute,
|
||||
descriptor: {
|
||||
name: 'a_Uv',
|
||||
buffer: {
|
||||
usage: gl.DYNAMIC_DRAW,
|
||||
data: [],
|
||||
type: gl.FLOAT,
|
||||
},
|
||||
size: 2,
|
||||
update: (
|
||||
feature: IEncodeFeature,
|
||||
featureIdx: number,
|
||||
vertex: number[],
|
||||
) => {
|
||||
return [vertex[3], vertex[4]];
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -15,9 +15,6 @@ bool isnan_emu(float x) { return (x > 0.0 || x < 0.0) ? x != x : x != 0.0; }
|
|||
void main() {
|
||||
|
||||
float value = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y)).r;
|
||||
|
||||
|
||||
|
||||
if (value == u_noDataValue || isnan_emu(value))
|
||||
gl_FragColor = vec4(0.0, 0, 0, 0.0);
|
||||
else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1]))
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
precision mediump float;
|
||||
uniform float u_opacity: 1.0;
|
||||
|
||||
uniform sampler2D u_texture;
|
||||
uniform sampler2D u_colorTexture;
|
||||
|
||||
varying vec2 v_texCoord;
|
||||
|
||||
uniform vec2 u_domain;
|
||||
uniform float u_noDataValue;
|
||||
uniform bool u_clampLow: true;
|
||||
uniform bool u_clampHigh: true;
|
||||
|
||||
void main() {
|
||||
vec4 baseColor = texture2D(u_texture, vec2(v_texCoord.x, v_texCoord.y)) * 256.0;
|
||||
float r = baseColor.r * 256.0 * 256.0;
|
||||
float g = baseColor.g * 256.0;
|
||||
float b = baseColor.b;
|
||||
float value = (r + g + b) * 0.1 - 10000.0;
|
||||
|
||||
if (value == u_noDataValue) {
|
||||
gl_FragColor = vec4(0.0, 0, 0, 0.0);
|
||||
} else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) {
|
||||
gl_FragColor = vec4(0.0, 0, 0, 0.0);
|
||||
} else {
|
||||
float normalisedValue =(value - u_domain[0]) / (u_domain[1] - u_domain[0]);
|
||||
vec4 color = texture2D(u_colorTexture, vec2(normalisedValue, 0));
|
||||
gl_FragColor = color;
|
||||
gl_FragColor.a = gl_FragColor.a * u_opacity ;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
precision highp float;
|
||||
uniform mat4 u_ModelMatrix;
|
||||
uniform mat4 u_Mvp;
|
||||
attribute vec3 a_Position;
|
||||
attribute vec2 a_Uv;
|
||||
varying vec2 v_texCoord;
|
||||
#pragma include "projection"
|
||||
void main() {
|
||||
v_texCoord = a_Uv;
|
||||
vec4 project_pos = project_position(vec4(a_Position, 1.0));
|
||||
// gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
|
||||
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
|
||||
gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));
|
||||
} else {
|
||||
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ export default class ImageTile extends Tile {
|
|||
|
||||
const attributes = this.parent.getLayerAttributeConfig();
|
||||
const layerOptions = this.parent.getLayerConfig()
|
||||
|
||||
|
||||
const sourceOptions = this.getSourceOption();
|
||||
const layer = new ImageLayer({...layerOptions}).source(
|
||||
sourceOptions.data,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { ILayerAttributesOption } from '@antv/l7-core';
|
||||
import RasterLayer from './layers/RasterDataLayer';
|
||||
// import RasterLayer from './layers/RasterDataLayer';
|
||||
import RasterLayer from '../../raster'
|
||||
import Tile from './Tile';
|
||||
|
||||
export default class RasterTile extends Tile {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import { ILayerAttributesOption } from '@antv/l7-core';
|
||||
import RasterLayer from '../../raster'
|
||||
import Tile from './Tile';
|
||||
export default class RasterTerrainRGBTile extends Tile {
|
||||
public async initTileLayer(): Promise<void> {
|
||||
const attributes = this.parent.getLayerAttributeConfig();
|
||||
const layerOptions = this.parent.getLayerConfig()
|
||||
|
||||
const sourceOptions = this.getSourceOption();
|
||||
const layer = new RasterLayer({...layerOptions}).source(
|
||||
sourceOptions.data,
|
||||
sourceOptions.options,
|
||||
);
|
||||
|
||||
// 初始化数据映射
|
||||
attributes && Object.keys(attributes).forEach((type) => {
|
||||
const attr = type as keyof ILayerAttributesOption;
|
||||
// @ts-ignore
|
||||
layer[attr](attributes[attr]?.field, attributes[attr]?.values);
|
||||
});
|
||||
|
||||
await this.addLayer(layer);
|
||||
this.isLoaded = true;
|
||||
}
|
||||
protected getSourceOption() {
|
||||
const rawSource = this.parent.getSource();
|
||||
return {
|
||||
data: this.sourceTile.data,
|
||||
options: {
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: this.sourceTile.bounds,
|
||||
},
|
||||
transforms: rawSource.transforms,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue