<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link href="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css" rel="stylesheet" />
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
</style>
<title>城市效果</title>
</head>
<body>
<div id="container"></div>
<script type="module">
import { modifyMap } from "/offline_data/cityEffect/fslj.js";
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
window.viewer = new bmgl.Viewer("container", {
mapId: "bigemap.tian-map",
infoBox: false,
shouldAnimate: true,
});
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//创建路网相关的地图图层
let roadNet = new bmgl.ImageryLayer(
new bmgl.BMImageryProvider({
mapId: "bigemap.tian-mapstreets",
})
);
viewer.scene.skyBox.show = false; //隐藏天空盒子
viewer.scene.globe.enableLighting = false; //隐藏太阳
viewer.shadows = false;
viewer.scene.sun.show = false; //或者viewer.scene.sun.destroy();
viewer.scene.moon.show = false; //隐藏月亮
viewer.scene.skyAtmosphere.show = false; //大气圈
viewer.scene.fog.enable = false; //雾
// 将图层叠加到地球上
viewer.imageryLayers.add(roadNet);
//开启抗锯齿,让图像更加顺滑
viewer.scene.postProcessStages.fxaa.enabled = true;
//不启用地形遮挡
viewer.scene.globe.depthTestAgainstTerrain = false;
var tilesets = new bmgl.BM3DTileset({ url: "/offline_data/cityEffect/chengduBuildings/tileset.json" });
tilesets.readyPromise
.then(function (tileset) {
viewer.scene.primitives.add(tileset);
var default_HeadingPitchRange = new bmgl.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 2.0
);
viewer.zoomTo(tileset, default_HeadingPitchRange);
var cartographic = bmgl.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
var delta_lng = 0,
delta_lat = 0;
var surface = bmgl.Cartesian3.fromRadians(
cartographic.longitude + delta_lng,
cartographic.latitude + delta_lat,
0.0
);
var offset = bmgl.Cartesian3.fromRadians(
cartographic.longitude + delta_lng,
cartographic.latitude + delta_lat,
0.0
);
var translation = bmgl.Cartesian3.subtract(
offset,
surface,
new bmgl.Cartesian3()
);
tileset.modelMatrix = bmgl.Matrix4.fromTranslation(translation);
addColor(tileset)
})
.otherwise(function (error) {
console.log(error);
});
modifyMap(viewer);
function addColor(tiles3d) {
// 添加一个事件监听器，监听瓦片是否可见（即被加载进来）。
tiles3d.tileVisible.addEventListener(function (tile) {
// 获取瓦片内容。
const cesium3DTileCon = tile.content;
// 获取瓦片内部的特征（features）数量。
const featuresLength = cesium3DTileCon.featuresLength;
// 循环遍历所有的特征。
for (let i = 0; i < featuresLength; i++) {
// 获取单个特征（例如，一个建筑）并访问其模型内容。
const model =
cesium3DTileCon.getFeature(i).content._model;
// 修改该模型的片元着色器。
const fragmentShaderSource =
(model._rendererResources.sourceShaders[1] = `
varying vec3 v_positionEC;
void main()
{
czm_materialInput materialInput;
// 转换模型的位置信息到视图坐标。
vec4 position = czm_inverseModelView * vec4(v_positionEC, 1.0);
// 根据高度设置渐变颜色。
// float strength = position.z/200.0;
float strength = position.z/15.0;
// gl_FragColor = vec4(strength,0.3*strength,strength, 1.0);
gl_FragColor = vec4(strength*0.3,0.4*strength,strength*0.8,0.8);
// gl_FragColor = vec4(0.0, 0.3 * 0.4, 0.8*0.6, 0.8);
}
`);
// 片元着色器已被修改，设置标志以便重新生成着色器。
model._shouldRegenerateShaders = true;
}
});
}
// 加载流动线
const loadRoadLinesNew = async () => {
const appearance = new bmgl.PolylineMaterialAppearance({
material: new bmgl.Material({
fabric: {
uniforms: {
// 设置线条的材质颜色
u_color:
bmgl.Color.fromCssColorString("#003eff"),
// 设置运动的速度
u_speed: 300,
},
source: `
uniform vec4 u_color;
uniform float u_speed;
uniform float u_glow;
czm_material czm_getMaterial(czm_materialInput materialInput){
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
float t =fract(czm_frameNumber / u_speed);
t *= 1.03;
float alpha = smoothstep(t- 0.03, t, st.s) * step(-t, -st.s);
alpha += 0.1;
vec4 fragColor;
fragColor.rgb = (u_color.rgb) / 0.5;
fragColor = czm_gammaCorrect(fragColor);
material.diffuse = fragColor.rgb;
material.alpha = alpha;
material.emission = fragColor.rgb * 1.5;
return material;
}
`,
},
}),
});
const instances = [];
const promise = bmgl.GeoJsonDataSource.load(
"/offline_data/cityEffect/roadNet.geojson"
);
promise.then((dataSource) => {
const entities = dataSource.entities.values;
for (let i = 0; i < entities.length; i++) {
const entity = entities[i];
const instance = new bmgl.GeometryInstance({
geometry: new bmgl.PolylineGeometry({
positions: entity.polyline.positions.getValue(),
width: 3,
}),
});
instances.push(instance);
}
let road = new bmgl.Primitive({
geometryInstances: instances,
appearance: appearance,
asynchronous: false,
});
viewer.scene.primitives.add(road);
});
};
loadRoadLinesNew();
// 创建景深后期处理阶段
const depthOfField = viewer.scene.postProcessStages.add(
bmgl.PostProcessStageLibrary.createDepthOfFieldStage()
);
// 启用并配置景深参数
depthOfField.enabled = true;
depthOfField.uniforms.focalDistance = 100.0; // 焦距（米），此距离的物体保持清晰
depthOfField.uniforms.delta = 1.0; // 采样间隔，影响性能与质量
depthOfField.uniforms.sigma = 3.78; // 高斯模糊标准差，控制模糊强度
depthOfField.uniforms.stepSize = 5.0; // 模糊步长
// 开启泛光效果
viewer.scene.postProcessStages.bloom.enabled = true;
// 配置泛光参数（可选）
let bloomParams = {
brightnessThreshold: 0.4, // 亮度阈值，超过此亮度的区域产生泛光
contrast: 128, // 对比度
glowOnly: false // 是否仅显示泛光部分
};
Object.assign(viewer.scene.postProcessStages.bloom.uniforms, bloomParams);
</script>
</body>
</html>