1. 程式人生 > >arcgis js api Map類小結

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的時候那些看著的那些英文,額,誰讓我英文不太好呢。。。

不足之處歡迎補充 ^ ^