企业官网建设流程全解析

常见网站推广方式,wordpress缩小模块间距,东莞网站推广大全,网站页面布局模板这一节#xff0c;我们把“3D Tiles 样式”再升一级——按“距离中心”做渐变圆。 以广州塔为圆心#xff0c;离得越近颜色越红#xff0c;越远越淡#xff0c;甚至直接隐藏#xff0c;全程只用官方样式语言#xff0c;不动顶点、不写 GLSL。一、思路#xff1a;把“距离…这一节我们把“3D Tiles 样式”再升一级——按“距离中心”做渐变圆。以广州塔为圆心离得越近颜色越红越远越淡甚至直接隐藏全程只用官方样式语言不动顶点、不写 GLSL。一、思路把“距离”算出来再当条件用3D Tiles 样式支持内联表达式可调用distance()直接算经纬度平面距离。步骤用defines先算好距离存成变量show用距离裁掉外围建筑color用距离做渐变色。二、定义中心点 距离变量const osmtile Cesium.createOsmBuildings(); const osmBuildings viewer.scene.primitives.add(osmtile); /* 广州塔经纬度vec2 格式 */ const center [113.31914, 23.109]; osmtile.style new Cesium.Cesium3DTileStyle({ defines: { distance: distance(vec2(${feature[cesium#longitude]}, ${feature[cesium#latitude]}), vec2(113.31914, 23.109)), }, /* 距离 0.02° 的直接隐藏 */ show: Number(${distance}) 0.02, /* 距离渐变越近越红越远越淡 */ color: { conditions: [ [ ${distance} ! undefined ${distance} ! null Number(${distance}) 0.01, rgba(255, 0, 0, 0.9), // 内圈鲜红 ], [ ${distance} ! undefined ${distance} ! null Number(${distance}) 0.02, rgba(0, 255, 255, 0.5), // 外圈青半透明 ], [true, rgba(255, 255, 255, 0.2)], // 兜底淡白 ], }, });distance()返回的是“弧度”单位0.01 ≈ 1 km按需调阈值先做! undefined ! null判断避免空特征报错条件数组从上到下匹配命中即停最后一条必须是兜底。三、点击 InfoBox 报错给 iframe 开 sandbox鼠标点建筑时Cesium 默认用iframe 内嵌 InfoBox如果里层脚本被拦截就会报 “Sandbox” 错。解决事后给 iframe 加权限即可。/* 允许 iframe 里执行脚本、弹窗、表单 */ const iframe document.getElementsByClassName(cesium-infoBox-iframe)[0]; iframe.setAttribute( sandbox, allow-scripts allow-same-origin allow-popups allow-forms );刷新后再点建筑信息窗乖乖弹出再无红色报错。四、常用“距离”玩法速记场景关键表达式说明圆环渐变distance(vec2(lon, lat), vec2(cx, cy))平面距离单位弧度球形遮挡acos(dot(normalize(pos), normalize(center)))立体角可做“地平线”遮挡高度分层${feature[cesium#estimatedHeight]}按楼高染色五、小结 预告defines里先算好距离后面show / color直接复用避免重复计算。条件写法 “先判空 再比大小 true 兜底”顺序别反。点击报错 给 InfoBox iframe 开 sandbox一句话解决。下节课我们让“距离圆”随时间脉冲再给楼顶加“夜间霓虹”完成真正的“动态雷达圈”城市皮肤