<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css"
rel="stylesheet"
/>
<script src="http://bigemap.com:9000/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>part_test</title>
</head>
<body>
<div id="container"></div>
<script type="module">
import { modifyMap } from "/offline_data/newjunbiao/fslj.js";
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
window.viewer = new bmgl.Viewer("container", {
mapId: "bigemap.amap-map",
infoBox: false,
});
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//开启抗锯齿,让图像更加顺滑
viewer.scene.postProcessStages.fxaa.enabled = true;
//不启用地形遮挡
viewer.scene.globe.depthTestAgainstTerrain = false;
var tilesets = new bmgl.BM3DTileset({ url: "/offline_data/newjunbiao/zh/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/30.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;
}
});
}
</script>
</body>
</html>
源码