arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動(dòng)彈回(實(shí)現(xiàn)思路)
背景
前段時(shí)間在公司項(xiàng)目中遇到一個(gè)問(wèn)題，地圖底圖區(qū)域只有一部分范圍，超出當(dāng)前范圍會(huì)顯示白底，使用效果來(lái)說(shuō)非常的不好，伴隨著的需求便是地圖縮小、鼠標(biāo)移動(dòng)地圖超出底圖的顯示范圍則需要底圖回彈。
效果
思路
1、arcgis.js控制其顯示范圍，在超出底圖顯示范圍時(shí)自動(dòng)彈回來(lái)
（1）地圖創(chuàng)建完成之后使用監(jiān)聽事件監(jiān)聽地圖范圍改變調(diào)用shwoExtent方法，該方法會(huì)傳一個(gè)地圖的左上角和右下角的值
this.gisMap.on('extent-change',this.showExtent)
（2）根絕判斷地圖的最大顯示范圍 full extent來(lái)判斷當(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
注意：在查閱文檔時(shí)需要知道項(xiàng)目中使用的是什么版本的arcgis.js
到此這篇關(guān)于arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動(dòng)彈回的文章就介紹到這了,更多相關(guān)arcgis.js地圖顯示范圍內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。這篇文章主要為大家詳細(xì)介紹了Web Uploader文件上傳插件使用方法，感興趣的小伙伴們可以參考一下2016-05-05
本文主要介紹了Axios去除重復(fù)請(qǐng)求方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
js鼠標(biāo)單擊和雙擊事件沖突問(wèn)題的快速解決方法
下面小編就為大家?guī)?lái)一篇js鼠標(biāo)單擊和雙擊事件沖突問(wèn)題的快速解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
這篇文章主要介紹了js文本框跑馬燈效果，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要為大家介紹了uni-app實(shí)現(xiàn)全局水印示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能
這篇文章主要為大家詳細(xì)介紹了bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能實(shí)現(xiàn)的相關(guān)代碼，感興趣的小伙伴們可以參考一下2016-05-05
下面小編就為大家分享一篇js中el表達(dá)式的使用和非空判斷方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了webpack@v4升級(jí)踩坑(小結(jié)),之前就嘗試了升級(jí)，由于部分插件的原因，未能成功,今天就來(lái)試一下在我的項(xiàng)目中升級(jí)會(huì)遇到哪些坑。感興趣的小伙伴們可以參考一下2018-10-10
uniapp實(shí)現(xiàn)可以左右滑動(dòng)導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了uniapp 實(shí)現(xiàn)可以左右滑動(dòng)導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
JavaScript比較當(dāng)前時(shí)間是否在指定時(shí)間段內(nèi)的方法
這篇文章主要介紹了JavaScript比較當(dāng)前時(shí)間是否在指定時(shí)間段內(nèi)的方法,涉及javascript時(shí)間與字符串的轉(zhuǎn)換及比較操作相關(guān)技巧,需要的朋友可以參考下2016-08-08