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)文章
原生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
這篇文章主要介紹了原生js實現(xiàn)form表單序列化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家總結(jié)了Bootstrap table簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas動態(tài)時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
本文主要介紹了webpack打包時如何修改文件名的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
微信小程序開發(fā)之從相冊獲取圖片 使用相機拍照 本地圖片上傳
本篇文章主要介紹了微信小程序開發(fā)之從相冊獲取圖片--使用相機拍照，本地圖片上傳的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)走馬燈效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
JavaScript實現(xiàn)獲取網(wǎng)絡(luò)通信進度
這篇文章主要為大家詳細(xì)介紹了如何使用Fetch?API和XMLHttpRequest（XHR）來執(zhí)行網(wǎng)絡(luò)請求,并重點說明如何獲取這兩種方法的網(wǎng)絡(luò)請求進度,感興趣的可以了解下2023-12-12