arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動彈回(實現(xiàn)思路)
背景
前段時間在公司項目中遇到一個問題,地圖底圖區(qū)域只有一部分范圍,超出當(dāng)前范圍會顯示白底,使用效果來說非常的不好,伴隨著的需求便是地圖縮小、鼠標(biāo)移動地圖超出底圖的顯示范圍則需要底圖回彈。
效果
思路
1、arcgis.js控制其顯示范圍,在超出底圖顯示范圍時自動彈回來
(1)地圖創(chuàng)建完成之后使用監(jiān)聽事件監(jiān)聽地圖范圍改變調(diào)用shwoExtent方法,該方法會傳一個地圖的左上角和右下角的值
this.gisMap.on('extent-change',this.showExtent)
(2)根絕判斷地圖的最大顯示范圍 full extent來判斷當(dāng)前地圖顯示范圍是否超出地圖可視范圍,當(dāng)超出范圍則顯示地圖的最大范圍,地圖回彈
代碼片
// An highlighted block let fullExtent={ xmin: xx, ymin: xx, xmax: xx, ymax: xx, } showExtent(extS){ let ext=extS.extent; if(ext.xmin<this.fullExtent.xmin||ext.xmax>this.fullExtent.xmax||ext.ymax>this.fullExtent.ymax||ext.ymin<this.fullExtent.ymin){ let fullExtent = new esri.geometry.Extent( { ...this.fullExtent, spatialReference:new esri.SpatialReference({ wkid: parseInt(4490) })//SpatialReference設(shè)置地圖坐標(biāo)系 } ); this.gisMap.setExtent(fullExtent); } },
參考文檔:https://developers.arcgis.com/javascript/3/jsapi/extent-amd.html
注意:在查閱文檔時需要知道項目中使用的是什么版本的arcgis.js
到此這篇關(guān)于arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動彈回的文章就介紹到這了,更多相關(guān)arcgis.js地圖顯示范圍內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
原生javascript實現(xiàn)類似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
這篇文章主要介紹了原生javascript實現(xiàn)類似vue的數(shù)據(jù)綁定功能,結(jié)合實例形式分析了JavaScript基于觀察者模式實現(xiàn)類似vue的數(shù)據(jù)綁定相關(guān)操作技巧,需要的朋友可以參考下2020-02-02如何使用50行javaScript代碼實現(xiàn)簡單版的call,apply,bind
這篇文章主要介紹了50行javaScript代碼實現(xiàn)簡單版的call,apply,bind過程詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08微信小程序js文件改變參數(shù)并在視圖上及時更新【推薦】
這篇文章主要介紹了微信小程序js文件改變參數(shù)并在視圖上及時更新的實現(xiàn)代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友參考下吧2018-06-06微信小程序開發(fā)之從相冊獲取圖片 使用相機(jī)拍照 本地圖片上傳
本篇文章主要介紹了微信小程序開發(fā)之從相冊獲取圖片--使用相機(jī)拍照,本地圖片上傳的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04JavaScript實現(xiàn)獲取網(wǎng)絡(luò)通信進(jìn)度
這篇文章主要為大家詳細(xì)介紹了如何使用Fetch?API和XMLHttpRequest(XHR)來執(zhí)行網(wǎng)絡(luò)請求,并重點說明如何獲取這兩種方法的網(wǎng)絡(luò)請求進(jìn)度,感興趣的可以了解下2023-12-12