基于Cesium繪制柵欄的示例代碼
網(wǎng)上的資料要不收費,要不代碼不全,很多跟繪制墻體有關(guān)的案例要不缺放法要不干嘛的,我自己根據(jù)網(wǎng)上的方法又加上自己百度改,最后實現(xiàn)了一個效果,和我想實現(xiàn)的效果差不多,分享一下子。
最終效果
反正這篇博文最后實現(xiàn)的效果就是上面動圖的效果,如果你想實現(xiàn)的效果不是這個樣子的話就不要看了,浪費時間了就。
創(chuàng)建 dynamicWallMaterialProperty.js 文件
首先需要一個 dynamicWallMaterialProperty.js 文件,然后在cesium引入一下子。
dynamicWallMaterialProperty.js 文件內(nèi)容就是下面這個,理論上直接復(fù)制過去就可以了。
(function () { /* 動態(tài)墻材質(zhì) color 顏色 duration 持續(xù)時間 毫秒 trailImage 貼圖地址 */ function DynamicWallMaterialProperty(options) { this._definitionChanged = new Cesium.Event(); this._color = undefined; this._colorSubscription = undefined; this.color = options.color || Color.BLUE; this.duration = options.duration || 1000; this.trailImage = options.trailImage; this._time = (new Date()).getTime(); } /** * 帶方向的墻體 * @param {*} options.get:true/false * @param {*} options.count:數(shù)量 * @param {*} options.freely:vertical/standard * @param {*} options.direction:+/- */ function _getDirectionWallShader(options) { if (options && options.get) { var materail = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\ {\n\ czm_material material = czm_getDefaultMaterial(materialInput);\n\ vec2 st = materialInput.st;"; if (options.freely == "vertical") { //(由下到上) materail += "vec4 colorImage = texture2D(image, vec2(fract(st.s), fract(float(" + options.count + ")*st.t" + options.direction + " time)));\n\ "; } else { //(逆時針) materail += "vec4 colorImage = texture2D(image, vec2(fract(float(" + options.count + ")*st.s " + options.direction + " time), fract(st.t)));\n\ "; } //泛光 materail += "vec4 fragColor;\n\ fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\ fragColor = czm_gammaCorrect(fragColor);\n\ material.diffuse = colorImage.rgb;\n\ material.alpha = colorImage.a;\n\ material.emission = fragColor.rgb;\n\ return material;\n\ }"; return materail } } Object.defineProperties(DynamicWallMaterialProperty.prototype, { isConstant: { get: function () { return false; } }, definitionChanged: { get: function () { return this._definitionChanged; } }, color: Cesium.createPropertyDescriptor('color') }); var MaterialType = 'wallType' + parseInt(Math.random() * 1000); DynamicWallMaterialProperty.prototype.getType = function (time) { return MaterialType; }; DynamicWallMaterialProperty.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 = this.trailImage; if (this.duration) { result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration; } viewer.scene.requestRender(); return result; }; DynamicWallMaterialProperty.prototype.equals = function (other) { return this === other || (other instanceof DynamicWallMaterialProperty && Cesium.Property.equals(this._color, other._color)) }; Cesium.Material._materialCache.addMaterial(MaterialType, { fabric: { type: MaterialType, uniforms: { color: new Cesium.Color(1.0, 0.0, 0.0, 0.5), image: Cesium.Material.DefaultImageId, time: -20 }, source: _getDirectionWallShader({ get: true, count: 3.0, freely: 'vertical', direction: '-' }) }, translucent: function (material) { return true; } }); Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty; })();
上邊代碼呢,就是 dynamicWallMaterialProperty.js 文件的全部內(nèi)容,然后嘞,在文件引入一下。
<script type="text/javascript" src="./dynamicWallMaterialProperty.js"></script>
然后嘞,就可以編寫邏輯代碼了呀!
function dataProces() { let data = [ [ 116.398322, 39.929032 ], [ 116.408096, 39.929364 ], [ 116.408599, 39.919736 ], [ 116.398609, 39.919404 ], [ 116.398322, 39.929032 ], ] let coor = Array.prototype.concat.apply( [], data ); let datasouce = map_common_addDatasouce('wall'); datasouce.entities.add({ wall: { positions: Cesium.Cartesian3.fromDegreesArray(coor), positions: Cesium.Cartesian3.fromDegreesArray(coor), maximumHeights: new Array(data.length).fill(300), minimunHeights: new Array(data.length).fill(0), material: new Cesium.ImageMaterialProperty({ transparent: true,//設(shè)置透明 image: "./img/wjw.png", repeat: new Cesium.Cartesian2(1.0, 1), // color: Cesium.Color.RED, }), // material: new Cesium.DynamicWallMaterialProperty({ trailImage: './img/wjw.png', color: Cesium.Color.RED, duration: 1000 }) }, }); }
然后調(diào)用上面的方法就可以了??!
但是上面代碼使用了一個方法,就是 map_common_addDatasouce ,網(wǎng)上很多案例都使用了這個方法,但是呢,這個方法又不說是啥,然后我在調(diào)用的時候直接就是找不到了,但是好在找到了這個方法。
function map_common_addDatasouce(datasouceName) { let datasouce = viewer.dataSources._dataSources.find(t => { return t && t.name == datasouceName; }); if (!datasouce) { datasouce = new Cesium.CustomDataSource(datasouceName); viewer.dataSources.add(datasouce); } return datasouce; }
好了,總體就是這個樣子,完成?。?!
到此這篇關(guān)于基于Cesium繪制柵欄的示例代碼的文章就介紹到這了,更多相關(guān)Cesium繪制柵欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript具有類似Lambda表達式編程能力的代碼(改進版)
在之前的一篇博文中我介紹了一種方法可以讓JavaScript具有一種近似于Lambda表達式的編程能力——但是它有一些缺點,其中妨礙它的使用的最主要的一條就是多了一層括號,讓代碼變得難以閱讀。2010-09-09所見即所得的富文本編輯器bootstrap-wysiwyg使用方法詳解
這篇文章主要為大家分享一款所見即所得的富文本編輯器bootstrap-wysiwyg,并詳細告訴大家文本編輯器bootstrap-wysiwyg的使用方法,感興趣的小伙伴們可以參考一下2016-05-05新人報道,發(fā)個小技巧(js數(shù)組重復(fù)判斷)
js數(shù)組重復(fù)判斷2008-10-10JavaScript使表單中的內(nèi)容顯示在屏幕上的方法
這篇文章主要介紹了JavaScript使表單中的內(nèi)容顯示在屏幕上的方法,涉及javascript針對表單元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06