743 lines
26 KiB
JavaScript
743 lines
26 KiB
JavaScript
const { Cesium } = window;
|
||
|
||
|
||
|
||
export default class LayerMgr {
|
||
constructor() {
|
||
// this.viewer = viewer
|
||
}
|
||
|
||
//加载模型
|
||
getGltf(viewer) {
|
||
viewer.entities.add({
|
||
position: Cesium.Cartesian3.fromDegrees(114.97, 31.47,250),
|
||
model: {
|
||
uri: `${process.env.PUBLIC_URL}/models/dam/scene.gltf` ,
|
||
scale: 10,
|
||
runAnimations: false
|
||
},
|
||
});
|
||
}
|
||
getWater(viewer) {
|
||
const positions = [
|
||
114.96554141845703, 31.487516479492188,
|
||
114.993221862792957, 31.487516479492188,
|
||
114.993221862792957, 31.4622646484375,
|
||
114.96554141845703, 31.4622646484375,
|
||
]
|
||
let initialHeight = 120
|
||
const geometry = new Cesium.PolygonGeometry({
|
||
polygonHierarchy: new Cesium.PolygonHierarchy(
|
||
Cesium.Cartesian3.fromDegreesArray(positions)
|
||
),
|
||
extrudedHeight: initialHeight,
|
||
perPositionHeight:false,
|
||
});
|
||
const waterPrimitive = new Cesium.Primitive({
|
||
geometryInstances: new Cesium.GeometryInstance({ geometry }),
|
||
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
||
aboveGround: true,
|
||
material: new Cesium.Material({
|
||
fabric: {
|
||
type: 'Water',
|
||
uniforms: {
|
||
normalMap: Cesium.buildModuleUrl(
|
||
`${process.env.PUBLIC_URL}/models/waternormals.jpg`
|
||
),
|
||
frequency: 1000.0,
|
||
animationSpeed: 0.01,
|
||
amplitude: 10,
|
||
},
|
||
},
|
||
}),
|
||
}),
|
||
show: true,
|
||
// releaseGeometryInstances: false
|
||
});
|
||
viewer.scene.primitives.add(waterPrimitive);
|
||
// 自动抬升
|
||
let height = 0;
|
||
setInterval(() => {
|
||
if (height < 0.4) {
|
||
height += 0.001;
|
||
// height += 0.02;
|
||
// waterPrimitive.extrudedHeight = height; // 触发setter
|
||
var currentModelMatrix = Cesium.Matrix4.clone(waterPrimitive.modelMatrix);
|
||
// 定义平移向量（例如，沿x轴平移100单位）
|
||
var translation = new Cesium.Cartesian3(-height*0.7, height, height*0.8);
|
||
// 创建一个平移矩阵
|
||
var translationMatrix = Cesium.Matrix4.fromTranslation(translation);
|
||
// 计算新的modelMatrix（将平移矩阵应用到当前模型矩阵上）
|
||
var newModelMatrix = Cesium.Matrix4.multiply(translationMatrix, currentModelMatrix, new Cesium.Matrix4());
|
||
waterPrimitive.modelMatrix = newModelMatrix;
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
getWater2(viewer) {
|
||
// const waterSurface = viewer.entities.add({
|
||
// rectangle: {
|
||
// coordinates: Cesium.Rectangle.fromDegrees(114.9, 31.4, 115.9, 32.4),
|
||
// material: new Cesium.WaterMaterial({
|
||
// normalMapUrl: `${process.env.PUBLIC_URL}/models/waternormals.jpg`, // 水波纹法线贴图
|
||
// frequency: 1000.0, // 波纹密度
|
||
// animationSpeed: 0.05, // 波动速度
|
||
// amplitude: 5.0 // 波高
|
||
// }),
|
||
// height: 130.0 // 水面高度（可动态调整）
|
||
// }
|
||
// });
|
||
|
||
}
|
||
|
||
async getQxsy(viewer) {
|
||
try {
|
||
let tileset = await Cesium.Cesium3DTileset.fromUrl(
|
||
// 'http://res3d.oss-cn-shenzhen.aliyuncs.com/macheng/xiaoyutan/Scene/3DTILE.json',
|
||
'https://map1.oss-cn-shenzhen.aliyuncs.com/tsg/tiles/tileset.json',
|
||
{
|
||
maximumScreenSpaceError: 20, //精细程度越小越精细
|
||
maximumMemoryUsage: 1000, //不可设置太高，目标机子空闲内存值以内，防止浏览器过于卡
|
||
}
|
||
|
||
);
|
||
viewer.scene.primitives.add(tileset);
|
||
|
||
|
||
const offsetHeight = 10
|
||
const boundingSphere = tileset.boundingSphere
|
||
const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
|
||
const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)
|
||
const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, offsetHeight)
|
||
const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
|
||
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
|
||
// viewer.flyTo(tileset)
|
||
} catch (error) {
|
||
console.error(`Error creating tileset: ${error}`);
|
||
}
|
||
|
||
|
||
|
||
// fetch(`${process.env.PUBLIC_URL}/data/geojson/macheng/boua.geojson`)
|
||
// .then(resp => resp.json())
|
||
// .then(data => {
|
||
// let features = data.features;
|
||
// let positionArray = [];
|
||
// // 获取区域的经纬度坐标
|
||
// for (let i = 0; i < features[0].geometry.coordinates[0].length; i++) {
|
||
// let coor = features[0].geometry.coordinates[0][i];
|
||
// positionArray.push(coor[0]);
|
||
// positionArray.push(coor[1]);
|
||
// }
|
||
|
||
// // 遮罩
|
||
// let polygonEntity = new Cesium.Entity({
|
||
// polygon: {
|
||
// hierarchy: {
|
||
// // 添加外部区域为1/4半圆，设置为180会报错 [0, 0, 0, 90, 179, 90, 179, 0]
|
||
// positions: Cesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 150, 89, 150, 0]),
|
||
// // 中心挖空的“洞”
|
||
// holes: [{
|
||
// positions: Cesium.Cartesian3.fromDegreesArray(positionArray)
|
||
// }]
|
||
// },
|
||
// material: Cesium.Color.BLACK.withAlpha(0.7) //new Cesium.Color(236,242,249, 1)
|
||
// }
|
||
// });
|
||
|
||
// // 边界线
|
||
// let lineEntity = new Cesium.Entity({
|
||
// polyline: {
|
||
// positions: Cesium.Cartesian3.fromDegreesArray(positionArray),
|
||
// width: 7,
|
||
// material: Cesium.Color.fromCssColorString('#7AE3C8'),//边界线颜色//Cesium.Color.YELLOW //new Cesium.Color(122,227,200, 1)
|
||
// clampToGround: true,
|
||
// zIndex: 10
|
||
// }
|
||
// });
|
||
|
||
// viewer.entities.add(polygonEntity);
|
||
// viewer.entities.add(lineEntity);
|
||
// //viewer.flyTo(lineEntity);
|
||
// });
|
||
|
||
|
||
|
||
// tileset.readyPromise.then(function () {
|
||
// viewer.zoomTo(
|
||
// tileset,
|
||
// new Cesium.HeadingPitchRange(
|
||
// 0,
|
||
// -0.7,
|
||
// 2500
|
||
// // tileset.boundingSphere.radius * 10
|
||
// )
|
||
// );
|
||
// });
|
||
|
||
//设置倾斜摄影Z轴高度
|
||
// tileset.readyPromise.then(function (tileset) {
|
||
// const offsetHeight = 15
|
||
// const boundingSphere = tileset.boundingSphere
|
||
// const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center)
|
||
// const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0)
|
||
// const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, offsetHeight)
|
||
// const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
|
||
// tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
|
||
// // viewer.flyTo(tileset)
|
||
// })
|
||
}
|
||
|
||
async getDem(viewer) {
|
||
const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(
|
||
// "/shzh/mapres/terrain",
|
||
// `${process.env.PUBLIC_URL}/terrain`,
|
||
// "http://192.168.66.51:42225/distribution/terrain/5vjnbauc3frn",
|
||
"https://map1.oss-cn-shenzhen.aliyuncs.com/tsg/terrain2",
|
||
{
|
||
requestVertexNormals: true
|
||
})
|
||
viewer.terrainProvider = terrainProvider
|
||
}
|
||
|
||
async getWxyx(viewer) {
|
||
const tiandiKey = "efc861f25f96dc6e5f884f0403ebfefd"; //天地图key，官网申请
|
||
const baseUrl = "https://{s}.tianditu.gov.cn";//'https://t{0-7}.tianditu.gov.cn';
|
||
|
||
const imageryProvider = new Cesium.UrlTemplateImageryProvider({
|
||
//url: `http://res3dstatic{s}.cloudowr.cn/${localStorage.getItem('address')}/dom2/{z}/{x}/{y}.png`,
|
||
url: baseUrl + '/DataServer?T=img_w&x={x}&y={y}&l={z}&tk='+tiandiKey,
|
||
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
|
||
//minimumLevel:10,
|
||
maximumLevel: 17,
|
||
})
|
||
|
||
viewer.imageryLayers.addImageryProvider(imageryProvider);
|
||
|
||
}
|
||
|
||
getRlt(viewer) {
|
||
function getColorRamp() {
|
||
const ramp = document.createElement("canvas");
|
||
ramp.width = 100;
|
||
ramp.height = 1;
|
||
const ctx = ramp.getContext("2d");
|
||
|
||
let values;
|
||
values = [0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0];
|
||
|
||
const grd = ctx.createLinearGradient(0, 0, 100, 0);
|
||
grd.addColorStop(values[0], "#000000"); //black
|
||
grd.addColorStop(values[1], "#2747E0"); //blue
|
||
grd.addColorStop(values[2], "#D33B7D"); //pink
|
||
grd.addColorStop(values[3], "#D33038"); //red
|
||
grd.addColorStop(values[4], "#FF9742"); //orange
|
||
grd.addColorStop(values[5], "#ffd700"); //yellow
|
||
grd.addColorStop(values[6], "#ffffff"); //white
|
||
|
||
ctx.fillStyle = grd;
|
||
ctx.fillRect(0, 0, 100, 1);
|
||
|
||
return ramp;
|
||
}
|
||
const minHeight = -414.0; // approximate dead sea elevation
|
||
const maxHeight = 8777.0; // approximate everest elevation
|
||
let shadingUniforms = {};
|
||
|
||
|
||
function updateMaterial() {
|
||
// const globe = viewer.scene.globe;
|
||
// let material;
|
||
// material = Cesium.Material.fromType("ElevationRamp");
|
||
// shadingUniforms = material.uniforms;
|
||
// shadingUniforms.minimumHeight = minHeight;
|
||
// shadingUniforms.maximumHeight = maxHeight;
|
||
// shadingUniforms.image = getColorRamp();
|
||
// globe.material = material;
|
||
|
||
|
||
const material = Cesium.Material.fromType("ElevationRamp")
|
||
material.uniforms.image = getColorRamp()
|
||
viewer.scene.globe.material = material
|
||
}
|
||
|
||
updateMaterial();
|
||
}
|
||
|
||
getRlt2(viewer) {
|
||
const gridData = {
|
||
minLon: 110.0, // 最小经度
|
||
minLat: 30.0, // 最小纬度
|
||
deltaLon: 0.1, // 经度间隔
|
||
deltaLat: 0.1, // 纬度间隔
|
||
rows: 10, // 行数（纬度方向）
|
||
cols: 10, // 列数（经度方向）
|
||
heights: [ // 高度值数组（行优先存储）
|
||
/* 10x10 网格高度值 */
|
||
100, 120, 140, 140,135,130,120,110,100,90,
|
||
100, 120, 140, 140,135,130,120,110,100,90,
|
||
100, 120, 140, 140,135,130,120,110,100,90,
|
||
100, 120, 140, 140,135,130,120,110,100,90,
|
||
100, 120, 140, 140,135,130,120,110,100,90,
|
||
100, 120, 140, 140,135,130,120,110,100,90,
|
||
100, 120, 140, 140,135,130,120,110,100,90,
|
||
100, 120, 140, 140,135,130,120,110,100,90,
|
||
100, 120, 140, 140,135,130,120,110,100,90,
|
||
100, 120, 140, 140,135,130,120,110,100,90,
|
||
// ... 共 100 个值
|
||
]
|
||
};
|
||
// 2. 创建颜色映射函数（根据高度返回颜色）
|
||
function heightToColor(height) {
|
||
// 示例：根据高度值返回渐变色
|
||
const minH = 100, maxH = 500;
|
||
const ratio = Math.min(1, Math.max(0, (height - minH) / (maxH - minH)));
|
||
|
||
// 蓝 -> 绿 -> 红 渐变
|
||
const r = Math.floor(255 * ratio);
|
||
const g = Math.floor(255 * (1 - ratio));
|
||
const b = 128;
|
||
|
||
return new Cesium.Color(r / 255, g / 255, b / 255, 1.0);
|
||
}
|
||
// 3. 生成网格几何数据
|
||
function createGridGeometry(grid) {
|
||
const positions = [];
|
||
const colors = [];
|
||
const indices = [];
|
||
let vertexIndex = 0;
|
||
|
||
for (let row = 0; row < grid.rows; row++) {
|
||
for (let col = 0; col < grid.cols; col++) {
|
||
// 计算当前网格点经纬度
|
||
const lon = grid.minLon + col * grid.deltaLon;
|
||
const lat = grid.minLat + row * grid.deltaLat;
|
||
const height = grid.heights[row * grid.cols + col];
|
||
|
||
// 将经纬度转换为笛卡尔坐标
|
||
const position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
|
||
positions.push(position);
|
||
|
||
// 计算颜色
|
||
const color = heightToColor(height);
|
||
colors.push(color.red, color.green, color.blue, color.alpha);
|
||
|
||
// 生成三角形索引（跳过边界）
|
||
if (row < grid.rows - 1 && col < grid.cols - 1) {
|
||
const topLeft = vertexIndex;
|
||
const topRight = topLeft + 1;
|
||
const bottomLeft = topLeft + grid.cols;
|
||
const bottomRight = bottomLeft + 1;
|
||
|
||
// 两个三角形组成一个网格单元
|
||
indices.push(topLeft, bottomLeft, topRight);
|
||
indices.push(topRight, bottomLeft, bottomRight);
|
||
}
|
||
|
||
vertexIndex++;
|
||
}
|
||
}
|
||
|
||
return { positions, colors, indices };
|
||
}
|
||
|
||
// 4. 创建Primitive并添加到场景
|
||
function createGridPrimitive(geometry) {
|
||
const appearance = new Cesium.PerInstanceColorAppearance({
|
||
flat: true, // 平面着色
|
||
renderState: {
|
||
depthTest: { enabled: true } // 启用深度测试
|
||
}
|
||
});
|
||
|
||
const primitive = new Cesium.Primitive({
|
||
geometryInstances: new Cesium.GeometryInstance({
|
||
geometry: new Cesium.PolygonGeometry({
|
||
polygonHierarchy: new Cesium.PolygonHierarchy(geometry.positions),
|
||
vertexFormat: appearance.vertexFormat
|
||
}),
|
||
attributes: {
|
||
color: new Cesium.ColorGeometryInstanceAttribute.fromColor(
|
||
new Cesium.Color(1.0, 1.0, 1.0, 1.0)
|
||
)
|
||
}
|
||
}),
|
||
appearance: appearance
|
||
});
|
||
|
||
viewer.scene.primitives.add(primitive);
|
||
return primitive;
|
||
}
|
||
|
||
const geometryData = createGridGeometry(gridData);
|
||
|
||
const gridPrimitive = createGridPrimitive(geometryData);
|
||
}
|
||
async getRlt3(viewer) {
|
||
// const gridData = {
|
||
// minLon: 110.0, // 最小经度
|
||
// minLat: 30.0, // 最小纬度
|
||
// deltaLon: 0.1, // 经度间隔
|
||
// deltaLat: 0.1, // 纬度间隔
|
||
|
||
// maxLon: 110.0 + 10 * 0.1, // minLon + cols * deltaLon
|
||
// maxLat: 30.0 + 10 * 0.1, // minLat + rows * deltaLat
|
||
|
||
// rows: 10, // 行数（纬度方向）
|
||
// cols: 10, // 列数（经度方向）
|
||
// // heights: [ // 高度值数组（行优先存储）
|
||
// // /* 10x10 网格高度值 */
|
||
// // 100, 120, 140, ...,
|
||
// // 110, 130, 150, ...,
|
||
// // // ... 共 100 个值
|
||
// // ]
|
||
// };
|
||
// // 2. 创建颜色映射函数（根据高度返回颜色）
|
||
// function heightToColor(height) {
|
||
// // 示例：根据高度值返回渐变色
|
||
// const minH = 1, maxH = 300;
|
||
// const ratio = Math.min(1, Math.max(0, (height - minH) / (maxH - minH)));
|
||
// // 蓝 -> 绿 -> 红 渐变
|
||
// const r = Math.floor(255 * ratio);
|
||
// const g = Math.floor(255 * (1 - ratio));
|
||
// const b = 128;
|
||
// // return new Cesium.Color(r / 255, g / 255, b / 255, 1.0);
|
||
// return [r,g,b,100]
|
||
// }
|
||
const gridData = {
|
||
minLon: 110.0, // 最小经度
|
||
minLat: 30.0, // 最小纬度
|
||
deltaLon: 0.01, // 经度间隔
|
||
deltaLat: 0.01, // 纬度间隔
|
||
maxLon: 110.0 + 100 * 0.01, // minLon + cols * deltaLon
|
||
maxLat: 30.0 + 100 * 0.01, // minLat + rows * deltaLat
|
||
rows: 100, // 行数（纬度方向）
|
||
cols: 100, // 列数（经度方向）
|
||
cccc:[
|
||
[10,10,10,10,10,10,10,10,10,10],
|
||
[10,10,10,10,10,10,10,10,10,10],
|
||
[10,10,10,10,10,10,10,10,10,10],
|
||
[10,10,10,10,10,10,10,10,10,10],
|
||
[10,10,10,10,200,10,10,10,10,10],
|
||
[10,10,10,10,10,10,10,10,10,10],
|
||
[10,10,10,10,10,10,10,10,10,10],
|
||
[10,10,10,10,10,10,10,10,10,10],
|
||
[10,10,10,10,10,10,10,10,10,10],
|
||
[10,10,10,10,10,10,10,10,10,10],
|
||
]
|
||
};
|
||
// 2. 创建颜色映射函数（根据高度返回颜色）
|
||
function heightToColor(height) {
|
||
// 示例：根据高度值返回渐变色
|
||
const minH = 1, maxH = 300;
|
||
const ratio = Math.min(1, Math.max(0, (height - minH) / (maxH - minH)));
|
||
// 蓝 -> 绿 -> 红 渐变
|
||
const r = Math.floor(255 * ratio);
|
||
const g = Math.floor(255 * (1 - ratio));
|
||
const b = 128;
|
||
// return new Cesium.Color(r / 255, g / 255, b / 255, 1.0);
|
||
return [r,g,b,100]
|
||
}
|
||
|
||
for (let index = 0; index<10; index++){
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = gridData.cols; // 每个网格一个像素
|
||
canvas.height = gridData.rows;
|
||
const context = canvas.getContext('2d');
|
||
for (let row = 0; row < gridData.rows; row++) {
|
||
for (let col = 0; col < gridData.cols; col++) {
|
||
const color = heightToColor(col*index*0.5);
|
||
// const color = heightToColor(gridData.cccc[row][col]);
|
||
const style = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${50})`;
|
||
context.fillStyle = style;
|
||
context.fillRect(col, row, 1, 1); // 每个像素一个网格点
|
||
}
|
||
}
|
||
const imageUrl = canvas.toDataURL('image/png');
|
||
// 5. 创建矩形范围（覆盖整个网格）
|
||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||
gridData.minLon, gridData.minLat,
|
||
gridData.maxLon, gridData.maxLat
|
||
);
|
||
// 6. 创建SingleTileImageryProvider
|
||
const imageryProvider = new Cesium.SingleTileImageryProvider({
|
||
url: imageUrl,
|
||
rectangle: rectangle
|
||
});
|
||
// 7. 添加到影像层集合
|
||
viewer.imageryLayers.addImageryProvider(imageryProvider);
|
||
|
||
|
||
await this.sleep(1000)
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
async sleep(time) {
|
||
await new Promise(resolve => setTimeout(resolve, time));
|
||
}
|
||
|
||
|
||
getCzmlData(){
|
||
const gridData = {
|
||
minLon: 110.0, // 最小经度
|
||
minLat: 30.0, // 最小纬度
|
||
deltaLon: 0.1, // 经度间隔
|
||
deltaLat: 0.1, // 纬度间隔
|
||
rows: 10, // 行数（纬度方向）
|
||
cols: 10, // 列数（经度方向）
|
||
// heights: [ // 高度值数组（行优先存储）
|
||
// /* 10x10 网格高度值 */
|
||
// 100, 120, 140, ...,
|
||
// 110, 130, 150, ...,
|
||
// // ... 共 100 个值
|
||
// ]
|
||
};
|
||
|
||
// 2. 创建颜色映射函数（根据高度返回颜色）
|
||
function heightToColor(height) {
|
||
// 示例：根据高度值返回渐变色
|
||
const minH = 1, maxH = 300;
|
||
const ratio = Math.min(1, Math.max(0, (height - minH) / (maxH - minH)));
|
||
// 蓝 -> 绿 -> 红 渐变
|
||
const r = Math.floor(255 * ratio);
|
||
const g = Math.floor(255 * (1 - ratio));
|
||
const b = 128;
|
||
// return new Cesium.Color(r / 255, g / 255, b / 255, 1.0);
|
||
return [r,g,b,100]
|
||
}
|
||
|
||
// 3. 生成网格几何数据1帧
|
||
function createGridGeometry(grid,ccc) {
|
||
const positions = [];
|
||
const colors = [];
|
||
const indices = [];
|
||
let vertexIndex = 0;
|
||
|
||
for (let row = 0; row < grid.rows; row++) {
|
||
for (let col = 0; col < grid.cols; col++) {
|
||
// 计算当前网格点经纬度
|
||
const lon = grid.minLon + col * grid.deltaLon;
|
||
const lat = grid.minLat + row * grid.deltaLat;
|
||
const height = row+col+2;
|
||
const color = heightToColor(height*ccc*2);
|
||
// const color = heightToColor(height*ccc*0.1);
|
||
positions.push([
|
||
[lon-grid.deltaLon/2,lat,ccc===row?4000:3000],//左上
|
||
[lon+grid.deltaLon/2,lat,ccc===row?4000:3000],//右上
|
||
[lon,lat+grid.deltaLat,(ccc===(row+1))?4000:3000],//左下
|
||
color,//颜色
|
||
])
|
||
positions.push([
|
||
[lon+grid.deltaLon,lat+grid.deltaLat,(ccc===(row+1))?4000:3000],//左下
|
||
[lon,lat+grid.deltaLat,(ccc===(row+1))?4000:3000],//右下
|
||
[lon+grid.deltaLon/2,lat,ccc===row?4000:3000],//右上
|
||
color,//颜色
|
||
])
|
||
|
||
|
||
|
||
|
||
// 将经纬度转换为笛卡尔坐标
|
||
// const position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
|
||
|
||
// 计算颜色
|
||
// const color = heightToColor(height);
|
||
colors.push(color.red, color.green, color.blue, color.alpha);
|
||
// positions.push([lon,lat,height,[color.red,color.green,color.blue,color.alpha]]);
|
||
|
||
// 生成三角形索引（跳过边界）
|
||
if (row < grid.rows - 1 && col < grid.cols - 1) {
|
||
const topLeft = vertexIndex;
|
||
const topRight = topLeft + 1;
|
||
const bottomLeft = topLeft + grid.cols;
|
||
const bottomRight = bottomLeft + 1;
|
||
|
||
// 两个三角形组成一个网格单元
|
||
indices.push(topLeft, bottomLeft, topRight);
|
||
indices.push(topRight, bottomLeft, bottomRight);
|
||
}
|
||
|
||
vertexIndex++;
|
||
}
|
||
}
|
||
|
||
return positions;
|
||
}
|
||
|
||
const alllist = []
|
||
for (let index = 0; index<10; index++){
|
||
alllist.push(createGridGeometry(gridData,index+1))
|
||
}
|
||
|
||
return alllist
|
||
}
|
||
|
||
|
||
async getCzml(viewer) {
|
||
const gridData = {
|
||
minLon: 110.0, // 最小经度
|
||
minLat: 30.0, // 最小纬度
|
||
deltaLon: 0.1, // 经度间隔
|
||
deltaLat: 0.1, // 纬度间隔
|
||
rows: 10, // 行数（纬度方向）
|
||
cols: 10, // 列数（经度方向）
|
||
// heights: [ // 高度值数组（行优先存储）
|
||
// /* 10x10 网格高度值 */
|
||
// 100, 120, 140, ...,
|
||
// 110, 130, 150, ...,
|
||
// // ... 共 100 个值
|
||
// ]
|
||
};
|
||
|
||
// 2. 创建颜色映射函数（根据高度返回颜色）
|
||
function heightToColor(height) {
|
||
// 示例：根据高度值返回渐变色
|
||
const minH = 1, maxH = 300;
|
||
const ratio = Math.min(1, Math.max(0, (height - minH) / (maxH - minH)));
|
||
// 蓝 -> 绿 -> 红 渐变
|
||
const r = Math.floor(255 * ratio);
|
||
const g = Math.floor(255 * (1 - ratio));
|
||
const b = 128;
|
||
// return new Cesium.Color(r / 255, g / 255, b / 255, 1.0);
|
||
return [r,g,b,100]
|
||
}
|
||
|
||
// 3. 生成网格几何数据1帧
|
||
function createGridGeometry(grid,ccc) {
|
||
const positions = [];
|
||
const colors = [];
|
||
const indices = [];
|
||
let vertexIndex = 0;
|
||
|
||
for (let row = 0; row < grid.rows; row++) {
|
||
for (let col = 0; col < grid.cols; col++) {
|
||
// 计算当前网格点经纬度
|
||
const lon = grid.minLon + col * grid.deltaLon;
|
||
const lat = grid.minLat + row * grid.deltaLat;
|
||
const height = row+col+2;
|
||
const color = heightToColor(height*ccc*2);
|
||
// const color = heightToColor(height*ccc*0.1);
|
||
positions.push([
|
||
[lon-grid.deltaLon/2,lat,ccc===row?7000:3000],//左上
|
||
[lon+grid.deltaLon/2,lat,ccc===row?7000:3000],//右上
|
||
[lon,lat+grid.deltaLat,(ccc===(row+1))?7000:3000],//左下
|
||
color,//颜色
|
||
])
|
||
positions.push([
|
||
[lon+grid.deltaLon,lat+grid.deltaLat,(ccc===(row+1))?7000:3000],//左下
|
||
[lon,lat+grid.deltaLat,(ccc===(row+1))?7000:3000],//右下
|
||
[lon+grid.deltaLon/2,lat,ccc===row?7000:3000],//右上
|
||
color,//颜色
|
||
])
|
||
|
||
|
||
|
||
|
||
// 将经纬度转换为笛卡尔坐标
|
||
// const position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
|
||
|
||
// 计算颜色
|
||
// const color = heightToColor(height);
|
||
colors.push(color.red, color.green, color.blue, color.alpha);
|
||
// positions.push([lon,lat,height,[color.red,color.green,color.blue,color.alpha]]);
|
||
|
||
// 生成三角形索引（跳过边界）
|
||
if (row < grid.rows - 1 && col < grid.cols - 1) {
|
||
const topLeft = vertexIndex;
|
||
const topRight = topLeft + 1;
|
||
const bottomLeft = topLeft + grid.cols;
|
||
const bottomRight = bottomLeft + 1;
|
||
|
||
// 两个三角形组成一个网格单元
|
||
indices.push(topLeft, bottomLeft, topRight);
|
||
indices.push(topRight, bottomLeft, bottomRight);
|
||
}
|
||
|
||
vertexIndex++;
|
||
}
|
||
}
|
||
|
||
return positions;
|
||
}
|
||
|
||
// const geometryData = createGridGeometry(gridData,1);
|
||
const alllist = []
|
||
for (let index = 0; index<1; index++){
|
||
alllist.push(createGridGeometry(gridData,index+1))
|
||
}
|
||
const czmls = []
|
||
alllist.map((item,index)=>{
|
||
//时间维度
|
||
const czml = [{
|
||
id: "document",
|
||
name: "CZML Colors",
|
||
version: "1.0",
|
||
}]
|
||
item.map((item2,index2)=>{
|
||
czml.push({
|
||
id: "rgba"+index2,
|
||
name: "Rectangle with outline using RGBA Colors",
|
||
polygon: {
|
||
positions: {
|
||
cartographicDegrees: [
|
||
...item2[0],
|
||
...item2[1],
|
||
...item2[2],
|
||
],
|
||
},
|
||
// material: {
|
||
// solidColor: {
|
||
// color: {
|
||
// rgba: item2[3],
|
||
// },
|
||
// },
|
||
// },
|
||
material: {
|
||
image: {
|
||
image: {
|
||
uri: Cesium.buildModuleUrl(
|
||
`${process.env.PUBLIC_URL}/models/waternormals.jpg`
|
||
)
|
||
},
|
||
// color: {
|
||
// rgba: [255, 255, 255, 128],
|
||
// },
|
||
},
|
||
},
|
||
extrudedHeight: 0,
|
||
perPositionHeight: true,
|
||
},
|
||
})
|
||
})
|
||
czmls.push(czml)
|
||
})
|
||
|
||
|
||
|
||
// let dataSourcePromise = null;
|
||
for (const item of czmls) {
|
||
// if(dataSourcePromise){
|
||
// viewer.dataSources.remove(dataSourcePromise);
|
||
// dataSourcePromise = null
|
||
// }
|
||
const dataSourcePromise = await Cesium.CzmlDataSource.load(item)
|
||
viewer.dataSources.add(dataSourcePromise);
|
||
// setTimeout(() => {
|
||
// viewer.dataSources.remove(dataSourcePromise);
|
||
// }, 1000);
|
||
await this.sleep(1000)
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|