arcgis js api Map類小結
今天開始了公司Gis的專案,主要負責地圖的載入與功能的實現,主要也就是用arcgis js api,之前也是看了接近大半個月的的 api和相關的demo,但是真正上手專案還是有區別啊,好多功能自己做演示根本想不到,特此做一次map類的總結(也以此來提醒自己別忘了多多寫blog多多總結 ^ ^ )文采不好,多多見諒~
一、自定義basemap
說通俗點就是用自己釋出的地圖服務作為要載入顯示的底圖
構造方法: require(["esri/basemaps"], function(esriBasemaps) { /* code goes here */ });
require([ "esri/basemaps", "esri/map", "dojo/domReady!" ], function (esriBasemaps, Map){ esriBasemaps.delorme = { baseMapLayers: [{url: "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"} ],//你釋出的url地址 thumbnailUrl: "https://www.example.com/images/thumbnail_2014-11-25_61051.png",//縮圖地址 title: "Delorme" }; var map = new Map("ui-map", { basemap: "delorme", center: [-111.879655861, 40.571338776], // long, lat zoom: 13, sliderStyle: "small" }); });
這段程式碼我把上面的url地址換成我自己的但是沒有實現,看到了官網的這樣一段話
(此類包含引用JS API中使用的預設底圖的屬性,允許您將地圖服務新增為Web應用程式中的預設底圖。esri/basemaps
替換esri.config.defaults.map.basemaps
,自v3.12起不推薦使用。)
我不知道是不是這樣的原因,待我明天在試驗一下。 = =
我自己是這樣做的:構造map類的時候沒有給basemap,定義初始化的底圖區域,然後用map.setExtent(extent)方法設定底圖的區域
//底圖的初始化區域 var startExtent = new Extent(116.68147124900013, 30.952928500053087,117.95934679400014,32.54131689900006, new SpatialReference({ wkid:4326 })); //構造map類 var map=new Map("viewDiv",{ logo: false, nav: false, zoom: 9, maxZoom:12,//最大空間等級 minZoom:7,//最小空間等級 center: [117.27, 31.86]//檢視的中心點 }); map.setExtent(startExtent); //接著載入圖層。。。
就是這樣,算投機取巧了一把,剛才上網看了一下,還有個BasemapLayer 好像是底圖圖層,應該也可以實現
require(["esri/dijit/BasemapLayer"], function(BasemapLayer) { /* code goes here */ });
二、根據需求該載入地圖基本控制元件:
(不多說直接上程式碼,以下程式碼都要放在地圖載入完成事件中)
1、隱藏自帶的放大縮小的控制元件 就是這個傢伙
map.on("load", function () {
var div = document.getElementById("viewDiv_zoom_slider").style;
div.visibility = "collapse";
});
2、禁止拖放:
myMap.disablePan();
3、禁止滑鼠雙擊縮放地圖:
myMap.disableDoubleClickZoom();
4、禁止滾輪縮放地圖:
myMap.enableScrollWheelZoom();
好啦~下面上總結的map類一些屬性和方法 ^ ^
構造方法就不在這說了,說一些引數:
引數:
extent | 範圍:如果設定了該選項,一旦這個選項的投影被設定,那麼所有的圖層都在定義的投影中繪製 |
logo | 是否顯示esri的logo (boolean型別) |
wrapAround180 | 是否連續移動地圖(即通過日期變更線,類似對地圖進行橫向旋轉360度). |
lods | 設定地圖的初始化比列級別 |
maxScale | 設定地圖的最大視覺化比例尺 |
sliderStyle | 設定slider的樣式(值為large或者small |
屬性:
autoResize | true:如果調整包含地圖的瀏覽器視窗或ContentPane小部件的大小,則地圖會自動調整大小 (boolean型別) |
contenPane | 調整了填充的底圖控制元件的小部件大小,底圖是否自動調整大小 |
attribution | 地圖屬性 |
fadeOnZoom | 地圖縮放時,是否啟用淡入淡出的效果 |
extent | 地圖的外包矩形的範圍 |
force3DTransforms | 是否啟用CSS3轉換 |
infoWindow | 在地圖上顯示訊息框 |
isClickRecenter | 按住Shift鍵,在地圖上單擊滑鼠左鍵,是否顯示將該點設為地圖中心 |
isDoubleClickZoom | 雙擊滑鼠左鍵,是否進行地圖放大操作 |
isPan | 設定地圖是否可以用滑鼠移動 |
spatialReference | 獲取地圖的空間參考資訊 |
isKeyboardNavigation | 是否用鍵盤上的 + 和- 導航地圖 |
isRubberBandZoom | 是否啟用橡皮筋縮放模式 |
isScrolWheelZoom | 是否允許滾輪進行縮放操作 |
isShiftDoubleClickZoom | 按住Shift鍵,在地圖上雙擊滑鼠左鍵,是否將該點設為地圖中心的同時進行縮放操作 |
geographicExtent | 地圖的地理座標範圍(只支援web墨卡託) |
layerIds | 地圖已載入的圖層ID列表 |
loaded | 地圖控制元件是否已載入完成 |
graphics | 獲取地圖的GraphicsLayer |
position | 獲取地圖左上角的座標 |
root | 容納圖層、訊息框等容器的DOM節點 |
showAttribution | 是否允許顯示地圖屬性 |
snappingManager | 捕捉管理器 |
isZoomSlider | 設定或者獲取地圖的放大滑塊狀態(Boolean) |
layeIds | 獲取地圖的圖層id陣列 |
navigation | 設定或獲取地圖的導航模式 |
timeExtent | 地圖的時間範圍 |
呼~~~接下來是方法了
方法:
toScreen/toMap |
將單個地圖點 / 螢幕點轉換成螢幕座標 / 地圖座標 |
setScale |
設定地圖指定的比例尺 |
setZoom |
放縮到指定的層級 |
setLevel |
放縮到指定的層級 |
setExtend |
設定地圖顯示的範圍,常用於進行地圖的平移操作 |
diablepan |
禁止使用滑鼠拖放地圖 |
removeAllLayers |
移除所有圖層 |
addLayer |
新增圖層 |
getBasemap |
獲取底圖 |
getLayer |
根據id獲取圖層 |
getLevel |
獲取當前地圖的放大層級 |
cneterAndZoom |
設定地圖的中心及放大層級 |
setMapCursor |
設定地圖的中心及放大層級 |
getLayersVisibleAtScaleRange |
獲取某一比列尺下的可見圖層 |
getScale |
獲取當前的比列尺 |
hidePanArrows |
隱藏移動時候的滑鼠箭頭 |
hideZoomSlider |
隱藏放大滑塊 |
panRight |
向右平移 |
panUp |
向北平移 |
removeLayer |
移除指定圖層 |
reorderLayer |
改變圖層的順序 |
reposition |
復位地圖,該方法在地圖的Div被複位的時候要用到 |
setTimeSlider |
設定和地圖關聯的時間滑塊 |
setZoom |
設定放大級別 |
showPanArrows |
顯示平移箭頭 |
showZoomSlider |
顯示放大滑塊 |
enablePan |
允許滑鼠拖動地圖 |
addLayer |
新增圖層 |
事件:
onExtentChange | 地圖改變範圍事件 |
onBasemapChange | 地圖的底圖發生變化 |
onLoad | 當第一個圖層或者底圖被新增到Map中的時候發生 |
onClick | 在地圖單擊的時候發生 |
onLayerAdd | 當圖層新增的時候發生 |
onLayersAddResult | 當所有圖層都新增結束後發生,使用map.addLayers方法之後 |
onLayersRemove | 當所有的圖層讀移除後發生 |
onMouseDown | 按下滑鼠按鈕並且滑鼠游標位於HTML頁面的地圖區域時觸發 |
onMouseMove | 當滑鼠在地圖移動時候發生(常用來獲取X、Y的座標值) |
onMouseout | 當滑鼠移出地圖時候發生 |
其實做這個總結實在討厭每次查api的時候那些看著的那些英文,額,誰讓我英文不太好呢。。。
不足之處歡迎補充 ^ ^