cesium实现高亮动态楼栋路线效果

效果图如下

vue文件如下，主要是调用如下方法

mapMixin._c_add_tileset('./mapdata/cesium/ccbuild/tileset.json') // 添加楼栋模型mapMixin._c_add_hight_line(lightLine)    // 添加动态路线

<template><div class="mapBox"><div id="cesium" ref="cesium"></div></div>
</template><script>
import lightLine from "./js/data/lightLine";
import mapMixin from "./js/mapMixin";
import geojson from "./js/data/town.json";
export default {data() {return {viewer:null,tilesets:null}},mounted() {this.mapInit();},methods: {mapInit() {Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( 90, -20, 110, 90); //西南东北，默认显示中国this.viewer = new Cesium.Viewer("cesium", {animation: false, //是否显示动画控件homeButton: false, //是否显示home键geocoder: false,// 查询baseLayerPicker: false, //是否显示图层选择控件timeline: false, //是否显示时间线控件fullscreenButton: false, //是否全屏显示scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源infoBox: false, //是否显示点击要素之后显示的信息sceneModePicker: false, //是否显示投影方式控件  三维/二维navigationHelpButton: false, //是否显示帮助信息控件imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",}),terrainProvider: new Cesium.CesiumTerrainProvider({ url: "http://data.marsgis.cn/terrain"}),skyAtmosphere:false,// orderIndependentTranslucency: false,contextOptions: {webgl: {alpha: true,},},});// 设置基本属性this.viewer.scene.sun.show = false; this.viewer.scene.moon.show = false;this.viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色this.viewer.scene.undergroundMode = true; this.viewer.scene.globe.show = true; this.viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 5600000;if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {//判断是否支持图像渲染像素化处理this.viewer.resolutionScale = window.devicePixelRatio;}this.viewer.scene.fxaa = true;this.viewer.scene.postProcessStages.fxaa.enabled = true;// 隐藏版权this.viewer._cesiumWidget._creditContainer.style.display = "none";this.viewer.scene.camera.setView({destination: Cesium.Cartesian3.fromDegrees(120.952811,31.854272,6000),orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(-40),roll: Cesium.Math.toRadians(0), //heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球。},});mapMixin.viewer = this.viewermapMixin._c_add_tileset('./mapdata/cesium/ccbuild/tileset.json') // 添加楼栋模型mapMixin._c_add_hight_line(lightLine)    // 添加动态路线mapMixin._c_add_geojson_area(geojson)   // 只显示区域地图},},}
</script>
<style lang='scss'>
.mapBox{width: 100%;height: 100%;#cesium{width: 100%;height: 100%;padding:20px;box-sizing: border-box;}.cesium-selection-wrapper,.cesium-selection-wrapper-visible{display: none!important;}
}
</style>

mapMixin.js如下：楼栋数据没有的话就用

测试数据：'https://lab.earthsdk.com/model/702aa950d03c11e99f7ddd77cbe22fea/tileset.json

线路数据结构如下：可自己随意点几个点测试

var mapMixin = {_m_uuid: function(){return Math.random().toString(36).substr(3, 10)},// 批量添加高亮路线动态_c_add_hight_line: function(data){data.forEach(item => {this._c_add_line(item,Cesium.Color.YELLOW,'indexRoute')});},// 添加光亮线段_c_add_line: function(positions,color,type) {this.viewer.entities.add({id:type+this._m_uuid(),name: "polyline",polyline: {positions: Cesium.Cartesian3.fromDegreesArray([...positions]),width: 4,material: new Cesium.PolylineTrailLinkMaterialProperty(color,4000),show: true,clampToGround: true,},});},// 展示楼栋特效_c_add_tileset: function(url) { // 特效 默认开启Cesium.TILE_EFFECT_STAYE = true;// 加载3dtilesetthis.tilesets = this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: url// url: 'https://lab.earthsdk.com/model/702aa950d03c11e99f7ddd77cbe22fea/tileset.json'}))this.tilesets.readyPromise.then( (tileset)=> {tileset.style = new Cesium.Cesium3DTileStyle({color: {conditions: [["true", "color('#00b2b8')"]]}});// this.viewer.flyTo(tileset)})},
}
export default mapMixin

其中PolylineTrailLinkMaterialProperty，Cesium3DTileStyle为后的样式，内容如下：

cesium-tilesetEffect.js

; if (typeof Cesium !== 'undefined') (function (Cesium) {/*** 通过重写模型每一帧渲染着色逻辑注入自定义着色器* 性能以及通用性较差,建议单独写一套3dtiles加载逻辑，自定义着色程序*/Cesium.TILE_EFFECT_STATE = true;// 带光环的Cesium.TILE_FS_BODY = ` float stc_pl = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;float stc_sd = v_stcVertex.z / 60.0 + sin(stc_pl) * 0.1;gl_FragColor *= vec4(stc_sd, stc_sd, stc_sd, 1.0);float stc_a13 = fract(czm_frameNumber / 360.0);float stc_h = clamp(v_stcVertex.z / 450.0, 0.0, 1.0);stc_a13 = abs(stc_a13 - 0.5) * 2.0;float stc_diff = step(0.005, abs(stc_h - stc_a13));gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - stc_diff);`;// 不带光环的// Cesium.TILE_FS_BODY = ` float stc_pl = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;//             float stc_sd = v_stcVertex.z / 60.0 + sin(stc_pl) * 0.1;//             gl_FragColor *= vec4(stc_sd, stc_sd, stc_sd, 1.0);//             float stc_a13 = fract(czm_frameNumber / 360.0);//             float stc_h = clamp(v_stcVertex.z / 450.0, 0.0, 1.0);//             stc_a13 = abs(stc_a13 - 0.5) * 2.0;`;function install() {Cesium.ModelUtility.updateForwardAxis = function (model) {this._model = model;var cachedSourceVersion = model.gltf.extras.sourceVersion;if ((Cesium.defined(cachedSourceVersion) && cachedSourceVersion !== "2.0") ||Cesium.ModelUtility.getAssetVersion(model.gltf) !== "2.0") {model._gltfForwardAxis = Cesium.Axis.X;}};Cesium.ModelUtility.modifyFragmentShaderForLogDepth = function (shader) {let state = false;if (Cesium.TILE_EFFECT_STATE && this._model && this._model._resource._url.indexOf('b3dm') !== -1) state = true;shader = Cesium.ShaderSource.replaceMain(shader, "czm_depth_main");if (state) {shader += `varying vec3 v_stcVertex;void main(){czm_depth_main();`+ Cesium.TILE_FS_BODY + `czm_writeLogDepth();}`;} else {shader += `varying vec3 v_stcVertex;void main(){czm_depth_main();czm_writeLogDepth();}`;}return shader;};Cesium.ModelUtility.modifyVertexShaderForLogDepth = function (shader,toClipCoordinatesGLSL) {shader = Cesium.ShaderSource.replaceMain(shader, "czm_depth_main");shader +="\n" +"varying vec3 v_stcVertex;\n" +"void main() \n" +"{ \n" +"    czm_depth_main(); \n" +"    v_stcVertex = a_position;\n" +"    czm_vertexLogDepth(" +toClipCoordinatesGLSL +"); \n" +"} \n";return shader;};}install();})(Cesium)

materialLine.js

function PolylineTrailLinkMaterialProperty(color, duration) {this._definitionChanged = new Cesium.Event();this._color = undefined;this._colorSubscription = undefined;this.color = color;this.duration = duration || 3000;this._time = (new Date()).getTime();this.isTranslucent = function () {return true;}
}
//1.69版本使用这个，感谢LEARNER GEX
// Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
Cesium.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {isConstant: {get: function () {return false;}},definitionChanged: {get: function () {return this._definitionChanged;}},color: Cesium.createPropertyDescriptor('color')
});
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {return 'PolylineTrailLink';
}
PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);result.image = Cesium.Material.PolylineTrailLinkImage;result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;return result;
}
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {return this === other ||(other instanceof PolylineTrailLinkMaterialProperty &&Cesium.Property.equals(this._color, other._color))
}
Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
Cesium.Material.PolylineTrailLinkImage = "./Cesium1.64/style/img/line3.png";
Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\{\n\czm_material material = czm_getDefaultMaterial(materialInput);\n\vec2 st = materialInput.st;\n\vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\material.alpha = colorImage.a * color.a;\n\material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\return material;\n\}";
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {fabric: {type: Cesium.Material.PolylineTrailLinkType,uniforms: {color: new Cesium.Color(0.0, 0.0, 1.0, 0.5),image: Cesium.Material.PolylineTrailLinkImage,time: 20},source: Cesium.Material.PolylineTrailLinkSource},translucent: function (material) {return true;}
})

这里是有一张透明图片的-------------------

这中间是有一张透明图片的-------------------

在index.html内引入，文件目录如下

至此效果应该就可以看到了

cesium实现高亮动态楼栋路线效果相关推荐

Cesium 可变高度+动态纹理水体
Cesium 可变高度+动态纹理水体由于任务中的需求,要求使用primitive实体配合动态纹理并且可以进行高度变化,实现一种动态水体的效果. 删除原实体重新添加新实体的方法会影响系统观感. 动态纹 ...
cesium + kriging.js动态生成克里金图
cesium + kriging.js动态生成克里金图 kriging.js GIThub地址 :: https://github.com/oeo4b/kriging.js/blob/master/k ...
JavaScript实现二级联动(省市、楼栋)
二级联动在实际需求中使用的非常多,比如省市,楼栋等,所以我们应当也应该掌握这些前端知识. 实现效果: 利用JavaScript实现二级联动要实现JavaScript二级联动效果,首先要确定需要哪些技 ...
微信小程序制作楼栋鸟瞰分布图
1.思路后台上传一张楼栋背景图底图,分别定位出每个楼栋号的横向,和纵向的坐标位置,通过for循环展示每个楼栋状态的icon,点击每个icon获取当前index,取到数据对应信息展示即可.因为后台楼栋 ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
html鼠标平滑滚动效果,JS特效代码 JS动态平滑滚动菜单效果
JS特效代码 JS动态平滑滚动菜单效果 www.css5.net body {cursor:crosshair; background:#111; margin:0; padding:0; posit ...
导航背景变换 php,jQuery实现的背景动态变化导航菜单效果
本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变 ...
linux用户motd,linux需要装？那就和我一起来配置一个动态的MOTD登陆效果吧
说到motd,熟悉linux系统的同学应该熟悉,motd它是linux系统上的一个普通的文件,在linux系统上的/etc/motd文件 .作用于:每次系统需要登陆时,通过终端展示一些消息给登陆用户. ...
cesium 实现地形挖洞的拖动效果
最近给客户提供了一个Cesium三维土壤地址坡面挖掘的效果Demo,客户又提出来想要拖动这个洞实时查看的效果.如果你正好也想实现可以参考一下下面文章,然后再看本文. Cesium.js 三维土壤地质剖 ...

cesium实现高亮动态楼栋路线效果

cesium实现高亮动态楼栋路线效果相关推荐

最新文章

热门文章