今天遇見一個需求就是根據按鈕選擇切換局部的底圖樣式,設計那邊提供的底圖是一張圖片,然后根據不同的選擇,切換不同的圖片
功能展示就是這樣的:


話不多說直接上方法:(因為做項目的時候封裝了一個class類,cesium的初始化以及各種功能都是在類中寫的,下面的方法就是添加自定義圖片地圖的方法,this.viewer是cesium實例)
addImage(url) { if (!url) return
// 為了避免圖層疊加效果不好,所以每一次疊加新的圖片的時候都會清除上一次疊加的圖片 if (this.myImageLayer) { this.viewer.imageryLayers.remove(this.myImageLayer); }
const provider = new Cesium.SingleTileImageryProvider({
// url 是底圖圖片的地址,保存在本地項目的文件夾中,通過require的方式引入地址
url: url,
// retangle 中的那個矩形,分別是左下角,右上角的經緯度,記住一定要找專業工具定位,否則手動調整你永遠也調整不齊和下面的局部底圖輪廓對不上 rectangle: new Cesium.Rectangle.fromDegrees(110.8477134921535, 23.4309905034903, 111.6621391816419, 24.1719699011482), }) // 下面這行代碼也很重要哈,沒有這行代碼頁面就沒有展示的效果 this.myImageLayer = this.viewer.imageryLayers.addImageryProvider(provider); }
* 要特別說明一下提供的底圖要透明背景的,否則就會帶著背景色,渲染上去就是一個矩形并且是帶著背景色的矩形,哈哈哈哈哈,那時候你還會莫名奇妙找原因
浙公網安備 33010602011771號