<!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 class="mask"></div>
<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;
}
});
}
// 加载道路
function loadRoadLines() {
// console.log(`hhh`);
var promise = bmgl.GeoJsonDataSource.load(
"/bmgl/mbzz/qy_mainroad.geojson"
);
promise
.then(function (dataSource) {
viewer.dataSources.add(dataSource);
//Get the array of entities
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var name = entity.name;
// console.log(entity, "ene");
entity.polyline.material =
new bmgl.LineFlickerMaterialProperty({
color: bmgl.Color.fromCssColorString(
"#0093ff"
),
// 设置随机变化速度
speed: 20 * Math.random(),
});
entity.polyline.width = 1.2;
}
})
.otherwise(function (error) {
//Display any errrors encountered while loading.
window.alert(error);
});
}
loadTiles();
setShader(window.tilesets);
loadRoadLines();
</script>
</body>
</html>
源码