arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動彈回(實現(xiàn)思路)
更新時間：2021年01月28日 16:55:43 作者：碼尚
這篇文章主要介紹了arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動彈回，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
背景
前段時間在公司項目中遇到一個問題，地圖底圖區(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)文章
WebUploader是由Baidu WebFE(FEX)團(tuán)隊開發(fā)的一個簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。這篇文章主要為大家詳細(xì)介紹了Web Uploader文件上傳插件使用方法，感興趣的小伙伴們可以參考一下2016-05-05
本文主要介紹了Axios去除重復(fù)請求方案，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
下面小編就為大家?guī)硪黄猨s鼠標(biāo)單擊和雙擊事件沖突問題的快速解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了js文本框跑馬燈效果，功能實現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要為大家介紹了uni-app實現(xiàn)全局水印示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
bootstrap布局中input輸入框右側(cè)圖標(biāo)點擊功能
這篇文章主要為大家詳細(xì)介紹了bootstrap布局中input輸入框右側(cè)圖標(biāo)點擊功能實現(xiàn)的相關(guān)代碼，感興趣的小伙伴們可以參考一下2016-05-05
下面小編就為大家分享一篇js中el表達(dá)式的使用和非空判斷方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了webpack@v4升級踩坑(小結(jié)),之前就嘗試了升級，由于部分插件的原因，未能成功,今天就來試一下在我的項目中升級會遇到哪些坑。感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要為大家詳細(xì)介紹了uniapp 實現(xiàn)可以左右滑動導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
JavaScript比較當(dāng)前時間是否在指定時間段內(nèi)的方法
這篇文章主要介紹了JavaScript比較當(dāng)前時間是否在指定時間段內(nèi)的方法,涉及javascript時間與字符串的轉(zhuǎn)換及比較操作相關(guān)技巧,需要的朋友可以參考下2016-08-08