<!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>
<script src="/bmgl/mbzz/lines.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.bmgl-widget-credits {
display: none;
}
.mask {
position: absolute;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
pointer-events: none;
background-image: radial-gradient(
rgba(139, 138, 138, 0.12) 20%,
rgba(65, 57, 57, 0.56) 50%,
rgb(17, 16, 16) 80%
);
}
</style>
<title>蒙版遮罩效果</title>
</head>
<body>
<div id="container"></div>
<script>
bmgl.Config.HTTP_URL = "http://bigemap.com:9000";
window.viewer = new bmgl.Viewer("container", {
mapId: "bigemap.9mviocu1",
requestRenderMode: false,
});
if (bmgl.FeatureDetection.supportsImageRenderingPixelated()) {
viewer.resolutionScale = window.devicePixelRatio;
}
//開啟抗鋸齒,讓圖像更加順滑
viewer.scene.postProcessStages.fxaa.enabled = true;
//不啟用地形遮擋
function loadTiles() {
viewer.scene.globe.depthTestAgainstTerrain = false;
window.tilesets = new bmgl.BM3DTileset({
url: "/bmgl/mbzz/qybuildings/tileset.json",
skipLevelOfDetail: true,
baseScreenSpaceError: 1024,
skipScreenSpaceErrorFactor: 16,
skipLevels: 1,
immediatelyLoadDesiredLevelOfDetail: false,
loadSiblings: false,
cullWithChildrenBounds: true,
maximumScreenSpaceError: 64,
});
tilesets.readyPromise
.then(function (tileset) {
viewer.scene.primitives.add(tileset);
let default_HeadingPitchRange =
new bmgl.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 2.0
);
// viewer.zoomTo(tileset, default_HeadingPitchRange);
let cartographic = bmgl.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
let delta_lng = 0,
delta_lat = 0;
let surface = bmgl.Cartesian3.fromRadians(
cartographic.longitude + delta_lng,
cartographic.latitude + delta_lat,
0.0
);
let offset = bmgl.Cartesian3.fromRadians(
cartographic.longitude + delta_lng,
cartographic.latitude + delta_lat,
0.0
);
let translation = bmgl.Cartesian3.subtract(
offset,
surface,
new bmgl.Cartesian3()
);
tileset.modelMatrix =
bmgl.Matrix4.fromTranslation(translation);
})
.otherwise(function (error) {
console.log(error);
});
//設置鏡頭位置
window.viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(
104.03198897257145,
30.665611848359656,
1078.4231345299547
),
orientation: {
heading: 5.109994884271855,
pitch: -0.3567556211122831,
roll: 0.00014017863173787504,
},
});
}
// 調整白膜樣式
function setShader(tilesets) {
tilesets.style = new bmgl.BM3DTileStyle({
color: {
conditions: [["true", "rgba(27, 154, 247,1)"]],
},
});
tilesets.tileVisible.addEventListener(function (tile) {
let content = tile.content;
let featuresLength = content.featuresLength;
let feature;
for (var i = 0; i < featuresLength; i += 2) {
feature = content.getFeature(i);
let _model = feature.content._model;
_model._shouldRegenerateShaders = true;
// getOwnPropertyNames:返回指定對象的所有自身屬性的屬性名組成的數組
// forEach：對數組里的所有元素都執行一遍
// Object.keys：返回
Object.getOwnPropertyNames(
_model._sourcePrograms
).forEach(function (j) {
const _modelSourceP = _model._sourcePrograms[0];
_model._rendererResources.sourceShaders[
_modelSourceP.fragmentShader
] = `
varying vec3 v_positionEC;
void main(void){
vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
float glowRange = 40.0; // 光環的移動范圍(高度)
gl_FragColor = vec4(0.0, 0.3, 0.8, 0.8); // 顏色
// gl_FragColor = vec4(0.2,0.6,0.4,0.2); // 顏色
// 小于20米的低樓都不再變暗
// if(position.y > 0.0) {
if(position.y > 1.0) {
gl_FragColor *= vec4(vec3(position.y / 20.0), 0.8); // 漸變
}
// 動態光環
float time = fract(czm_frameNumber / 360.0);
time = abs(time - 0.5) * 3.0;
float diff = step(0.005, abs( clamp(position.y / glowRange, 0.0, 1.0) - time));
gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
}
`;
});
_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(
"/bmgl/mbzz/qy_mainroad.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);
});
};
loadTiles();
setShader(window.tilesets);
loadRoadLinesNew();
</script>
</body>
</html>