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的时候那些看着的那些英文,额,谁让我英文不太好呢。。。

不足之处欢迎补充 ^ ^

猜你喜欢

转载自blog.csdn.net/KK_bluebule/article/details/81610586