您的位置：首页 > Web前端 > JavaScript

ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）

2016-04-15 11:18 796 查看
1. 鹰眼

OverviewMap小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围。当主地图范围变化时，鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致，当鹰眼图空间的地图范围变化时，主地图的显示范围也会变化，主地图范围在OverviewMap控件中以矩形表示。

构造方法：esri.dijit.OverviewMap (params, srcNodeRef)

构造方法在创建一个鹰眼图的时候需要传入关联的地图对象和一个用于呈现鹰眼图控件的HTML元素，该元素可选，如果没有设置该HTML元素，将呈现在地图对象上，另外还包括很多可选参数，以下几个为常用的可选参数：

attachTo

指定鹰眼图附加到地图的那个角落。参数值是"top-right","bottom-right","bottom-left" 和"top-left".

baseLayer

指定鹰眼图空间地图的底图

expandFactor

设置鹰眼地图控件和矩形之间的比例，默认值是2

opacity

指定鹰眼图控件上矩形的透明度

hide

隐藏鹰眼图控件

Show

显示鹰眼图控件

startup

当构造函数创建成功后，使用该方法后就可以进行用户交互了（几乎所有的控件（Map除外）都有该方法

destroy

当应用程序不再需要比例尺控件的时候，摧毁该对象。（几乎所有的控件都有该方法）

n 关于startup方法

在Dijit一系列生命周期中，一个重要方法是启动方法startup. 这个方法会在DOM节点被创建并添加到网页之后执行，同时在这个方法也会等待当前小部件中所包含的子控件被创建并正确启动之后才执行。

示例：

var overviewMapDijit = new esri.dijit.OverviewMap({

map: map,

visible: true

});

overviewMapDijit.startup();

需要提前引用

dojo.require("esri.dijit.OverviewMap");

2. 比例尺

Scalebar用于在地图上或者一个指定的HTML节点中显示地图的比例尺信息。

构造方法：esri.dijit. Scalebar(p (params, srcNodeRef)

构造方法在创建一个比例尺控件的时候需要传入关联的地图对象和一个用于呈现比例尺控件的HTML元素，该元素可选，如果没有设置该HTML元素，将呈现在地图对象上。另外还包括很多可选参数，以下几个为常用的可选参数：

attachTo

比例尺控件在其关联地图上位置。参数值是"top-right","bottom-right","bottom-left" 和"top-left".

scalebarUnit

比例尺控件的单位

属性

说明

hide

隐藏比例尺控件

Show

显示比例尺控件

示例

var scalebar = new esri.dijit.Scalebar({

map: map,

// "dual" displays both miles and kilmometers

// "english" is the default, which displays miles

// use "metric" for kilometers

scalebarUnit: "dual"

});

需要提前引用

dojo.require("esri.dijit.Scalebar");

3. 书签

书签控件用于管理用户创建的地图书签（Bookmark.MapBookmark），提供新建书签、定位到书签和删除书签的功能。

构造方法：esri.dijit. Bookmarks (params, srcNodeRef)

构造方法在创建一个书签控件的时候需要传入关联的地图对象和一个用于呈现书签控件的HTML元素。另外还包括很多可选参数，以下几个为常用的可选参数：

bookmarks

在创建的时候用已有的书签对象初始化书签控件

editable

书签控件是否可以编辑

方法

说明

addBookmark

给书签控件添加一个书签

hide

隐藏书签控件

removeBookmark

从书签控件中移除一个书签

show

显示书签控件

toJson

将书签对象返回一组json

属性

说明

bookmarks

返回书签控件的所有书签

事件

说明

onClick

挡在一个书签上编辑的时候发生

onEdit

当编辑书签的时候发生

onRemove

当移除一个书签的时候发生

示例

// specify "editable" as true to enable editing

var bookmark = new esri.dijit.Bookmarks({

map: map,

bookmarks: [],

editable: true

}, dojo.byId('bookmark'));

需要提前引用

dojo.require("esri.dijit.Bookmarks");

当然，还需要一个div，例子参考最后的，放在界面的左边，未来可以放更多东西。

4. 图例

Legend 控件用于动态显示全部或者部分图层的标签和符号信息，图例控件支持下面四种图层:

ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer 和KMLLayer

构造方法：esri.dijit. Legend (params, srcNodeRef)

构造方法在创建一个图例的时候需要传入关联的地图对象和一个用于呈现图例控件的HTML元素。另外还包括很多可选参数，以下几个为常用的可选参数：

autoUpdate

当地图的比例尺发生变化或者图层发生变化的时候，图例控件是否自动更新

respectCurrentMapScale

图例控件是否自动更新

layerInfos

指定一个图层子集用于在图例中显示

arrangement

指定图例在HTML元素中的对其方式

方法

说明

refresh

当在构造函数中用了layerInfos，用这个方法刷新图例以替换构造函数中的图层

示例

var legendLayers = [];

legendLayers.push({ layer: layer, title: 'test' });

map.on('layers-add-result', function () {

var legend = new Legend({

map: map,

layerInfos: legendLayers

}, "legendDiv");

legend.startup();

});

需要提前引用

dojo.require("esri.dijit.Legend");

当然，还需要一个div，例子参考最后的，放在界面的右边。

完整代码如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>地图-Test </title>

<link href="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/dojo/dijit/themes/tundra/tundra.css"

rel="stylesheet" type="text/css" />

<link href="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/esri/css/esri.css"

rel="stylesheet" type="text/css" />

<script type="text/javascript">                    var dojoConfig = { parseOnLoad: true };</script>

<script src="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/init.js" type="text/javascript"></script>

<style type="text/css"> .MapClass { width:900px; height:600px; border:1px solid #000;} </style>

<style>

html, body {

height: 100%; width: 100%;

margin: 0; padding: 0;

}

body{

background-color: #fff; overflow:hidden;

font-family: sans-serif;

}

#header {

padding-top: 4px;

padding-right: 15px;

background-color:#444;

color:#fff;

font-size:16pt; text-align:right;font-weight:bold;

height:55px;

}

#subheader {

font-size:small;

color: #cfcfcf;

text-align:right;

}

#leftPane{

margin: 0;

padding: 5px;

width: 250px;

color: #3C1700;

background-color: #fff;

}

.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }

#ds-h div { width: 100%; }

#ds-l div { height: 100%; }

#ds .o1 { filter: alpha(opacity=10); opacity: .1; }

#ds .o2 { filter: alpha(opacity=8); opacity: .08; }

#ds .o3 { filter: alpha(opacity=6); opacity: .06; }

#ds .o4 { filter: alpha(opacity=4); opacity: .04; }

#ds .o5 { filter: alpha(opacity=2); opacity: .02; }

#ds .h1 { height: 1px; }

#ds .h2 { height: 2px; }

#ds .h3 { height: 3px; }

#ds .h4 { height: 4px; }

#ds .h5 { height: 5px; }

#ds .v1 { width: 1px; }

#ds .v2 { width: 2px; }

#ds .v3 { width: 3px; }

#ds .v4 { width: 4px; }

#ds .v5 { width: 5px; }

</style>

<style>

html, body {

height: 97%;

width: 98%;

margin: 1%;

}

#rightPane {

width: 20%;

}

#legendPane {

border: solid #97DCF2 1px;

}

</style>

<script type="text/javascript">

dojo.require("dijit.layout.BorderContainer");

dojo.require("dijit.layout.ContentPane");

dojo.require("esri.map");

dojo.require("esri.layers.FeatureLayer");

dojo.require("esri.dijit.Bookmarks");

dojo.require("esri.dijit.OverviewMap");

dojo.require("esri.dijit.Scalebar");

dojo.require("esri.dijit.Legend");

var map;

var editorWidget;

dojo.addOnLoad(function () {

map = new esri.Map("map");

var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/MapServer");

map.addLayer(layer);

// Create the bookmark widget

// specify "editable" as true to enable editing

var bookmark = new esri.dijit.Bookmarks({

map: map,

bookmarks: [],

editable: true

}, dojo.byId('bookmark'));

var scalebar = new esri.dijit.Scalebar({

map: map,

// "dual" displays both miles and kilmometers

// "english" is the default, which displays miles

// use "metric" for kilometers

scalebarUnit: "dual"

});

var overviewMapDijit = new esri.dijit.OverviewMap({

map: map,

visible: true

});

overviewMapDijit.startup();

var legendLayers = [];

legendLayers.push({ layer: layer, title: 'test' });

map.on('layers-add-result', function () {

var legend = new Legend({

map: map,

layerInfos: legendLayers

}, "legendDiv");

legend.startup();

});

</script>

</head>

<body class="claro">

<div id="mainWindow"

data-dojo-type="dijit.layout.BorderContainer"

data-dojo-props="design:'headline',gutters:false"

style="width: 1200px; height: 800px; margin: 0;">

<div id="leftPane"

data-dojo-type="dijit.layout.ContentPane"

data-dojo-props="region:'left'">

<div id="bookmark"></div>

</div>

<div id="rightPane"

data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'right'">

<div data-dojo-type="dijit/layout/AccordionContainer">

<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"

data-dojo-props="title:'图例', selected:true">

<div id="legendDiv"></div>

</div>

</div>

</div>

<div id="map" class="shadow"

data-dojo-type="dijit.layout.ContentPane"

data-dojo-props="region:'center'">

<div id="ds"> <!-- drop shadow divs -->

<div id="ds-h">

<div class="ds h1 o1"></div>

<div class="ds h2 o2"></div>

<div class="ds h3 o3"></div>

<div class="ds h4 o4"></div>

<div class="ds h5 o5"></div>

</div>

<div id="ds-l">

<div class="ds v1 o1"></div>

<div class="ds v2 o2"></div>

<div class="ds v3 o3"></div>

<div class="ds v4 o4"></div>

<div class="ds v5 o5"></div>

</div>

</div> <!-- end drop shadow divs -->

</div>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航