ArcGIS For JavaScript API Measurement Widget(测量工具)————（二十四）
2013-01-15 14:13
525 查看
描述：
测量组件提供工具，用于计算当前位置（获取位置）,测量距离测量距离和面积（面积量算）。如果地图的坐标系统不是Web
Mercator 或 geographic,如果复杂的多边形绘制的措施的部件将需要使用 geometry service项目或简化的几何形状,使用esri.config.defaults指定的几何服务为您的应用
此示例显示了如何测量部件添加到您的应用程序。测量部件，在2.3版本的新功能，提供了一些工具，用于确定X，Y位置和测量的面积和长度。
var measurement
= new esri.dijit.Measurement({
map: map
}, dojo.byId('measurementDiv'));
measurement.startup();
您也可以选择定义一个自定义的线和点符号，测量的部件将在地图上绘制时使用。
这个例子是启用snapping为这个地图 使用 map.enableSnapping();当 snapping 开启后，这个测量工具会显示在地图上
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_measurement/index.html
引用地址：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_measurement
esri.symbol.SimpleFillSymbol的常量
代码如下：
效果如下：
也可以使用自定义的方式来控制测量的图标，线的显示。
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_measureworld/index.html
参考联接：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_measureworld
var pms =
new esri.symbol.PictureMarkerSymbol("images/flag.png",24,24);
pms.setOffset(9,11);
var sls
= new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT,
new dojo.Color([255,0,0,.55]),
4);
var measurement
= new esri.dijit.Measurement({
map: mymap,
lineSymbol:sls,
pointSymbol:pms
}, dojo.byId('measurementDiv'));
measurement.startup();
请注意，当在小部件创建一个div提供dojo.byId（'measurementDiv）。这个div指定的窗口小部件的显示。在此示例中，小部件的显示在一个Dojo内容窗格。
<div
id="rightPane"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'right'">
<div>使用测量构件计算面积，找到位置之间的距离，并显示当前鼠标位置.
</div>
<div id="measurementDiv"></div>
</div>
代码如下：
效果如图：
测量组件提供工具，用于计算当前位置（获取位置）,测量距离测量距离和面积（面积量算）。如果地图的坐标系统不是Web
Mercator 或 geographic,如果复杂的多边形绘制的措施的部件将需要使用 geometry service项目或简化的几何形状,使用esri.config.defaults指定的几何服务为您的应用
此示例显示了如何测量部件添加到您的应用程序。测量部件，在2.3版本的新功能，提供了一些工具，用于确定X，Y位置和测量的面积和长度。
var measurement
= new esri.dijit.Measurement({
map: map
}, dojo.byId('measurementDiv'));
measurement.startup();
您也可以选择定义一个自定义的线和点符号，测量的部件将在地图上绘制时使用。
这个例子是启用snapping为这个地图 使用 map.enableSnapping();当 snapping 开启后，这个测量工具会显示在地图上
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_measurement/index.html
引用地址：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_measurement
esri.symbol.SimpleFillSymbol的常量
| 常量 | 描述 |
|---|---|
| STYLE_BACKWARD_DIAGONAL | The fill is backward diagonal lines.（向后的对角线） |
| STYLE_CROSS | The fill is a cross.（交叉线） |
| STYLE_DIAGONAL_CROSS | The fill is a diagonal cross.（对角交叉） |
| STYLE_FORWARD_DIAGONAL | The fill is forward diagonal lines.（向前的对角线） |
| STYLE_HORIZONTAL | The fill is horizontal lines.（水平线） |
| STYLE_NULL | The polygon has no fill.（无） |
| STYLE_SOLID | The fill is solid.（实线） |
| STYLE_VERTICAL | The fill is vertical lines.（垂直线） |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Measure Tool</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<style>
html,body {
height:100%;
width:100%;
margin:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Trebuchet MS";
}
#map {
border:solid 2px #808775;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
margin:5px;
padding:0px;
}
#titlePane{
width:240px;
}
.claro .dijitTitlePaneTitle {
background: #808775;
font-weight:600;
border:solid 1px #29201A;
}
.claro .dijitTitlePaneTitleHover {
background:#808775;
}
.claro .dijitTitlePaneTitleActive {
background:#808775;
}
.claro .dijitTitlePaneContentOuter {
border-right: solid 2px #808775 !important;
border-bottom: solid 2px #808775 !important;
border-left: solid 2px #808775 !important;
}
</style>
<script>
var dojoConfig = {
parseOnLoad:true
};
</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("dijit.form.CheckBox");
dojo.require("esri.map");
dojo.require("esri.dijit.Measurement");
dojo.require("esri.SnappingManager");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.layers.FeatureLayer");
var map;
function init() {
// 这个示例可能需要处理通信与ArcGIS Server服务代理页面。您将需要更换以下链接的位置在你的机器上的代理.
// 请参阅'Using the proxy page' 帮助主题 设立代理页面的详细信息.
esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
esri.config.defaults.io.alwaysUseProxy = false;
//此服务仅用于开发和测试目的。我们建议您创建您自己的geometry service在您的应用程序中使用
esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
// 指定范围
var initialExtent = new esri.geometry.Extent({
"xmin":-9545482,
"ymin":4615382,
"xmax":-9544248,
"ymax":4616059,
"spatialReference":{
"wkid":102100
}
});
map = new esri.Map("map", {
basemap: "satellite", // 指定的地图底图。以下是有效选项："streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".
center: [-85.743, 38.256], // 经纬度
zoom: 17 // 缩放深度
});
/**
* SimpleFillSymbol 用于在图形图层上绘制多边形的功能,可以是固体,透明,或一个的几个剖面线模式.此外,符号可以具有可选的轮廓,它被定义为线符号.
*/
var sfs = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID, // 样式请参考上方
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID, // 样式,STYLE_DASH(破折号),STYLE_DASHDOT(点划线),STYLE_DASHDOTDOT,STYLE_DOT(点),STYLE_NULL,STYLE_SOLID(实线)
new dojo.Color([195,176,23]), // 颜色
2 // 像素
),
null
);
var parcelsLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND, // 模式，请参考上一篇文章介绍
outFields: ["*"] // 字段
});
parcelsLayer.setRenderer(new esri.renderer.SimpleRenderer(sfs));
dojo.connect(map, "onLayersAddResult", function(results){ // 所有图层使用map.addLayers方法添加到地图后触发
//dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac.
var snapManager = map.enableSnapping({ // 激活按键，默认是ctrl键
snapKey:dojo.keys.copyKey
});
var layerInfos = [{layer: parcelsLayer}];
snapManager.setLayerInfos(layerInfos);
var measurement = new esri.dijit.Measurement({ // 测量工具
map: map
}, dojo.byId('measurementDiv'));
measurement.startup(); // 开启
});
map.addLayers([parcelsLayer]);
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
style="width:100%; height:100%;">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
<div id="measurementDiv"></div>
<span style="font-size:smaller;padding:5px 5px;">请用 <b>CTRL</b> 来开启snapping.</span>
</div>
</div>
</div>
</div>
</body>
</html>效果如下：
也可以使用自定义的方式来控制测量的图标，线的显示。
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_measureworld/index.html
参考联接：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_measureworld
var pms =
new esri.symbol.PictureMarkerSymbol("images/flag.png",24,24);
pms.setOffset(9,11);
var sls
= new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT,
new dojo.Color([255,0,0,.55]),
4);
var measurement
= new esri.dijit.Measurement({
map: mymap,
lineSymbol:sls,
pointSymbol:pms
}, dojo.byId('measurementDiv'));
measurement.startup();
请注意，当在小部件创建一个div提供dojo.byId（'measurementDiv）。这个div指定的窗口小部件的显示。在此示例中，小部件的显示在一个Dojo内容窗格。
<div
id="rightPane"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'right'">
<div>使用测量构件计算面积，找到位置之间的距离，并显示当前鼠标位置.
</div>
<div id="measurementDiv"></div>
</div>
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Measure Tool</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<style>
html,body {
height:100%;
width:100%;
margin:0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family:"Trebuchet MS";
}
#map {
padding:0px;
}
#rightPane{
width:200px;
}
</style>
<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.dijit.Measurement");
dojo.require("esri.dijit.Scalebar");
var map;
function init() {
// 这个示例可能需要处理通信与ArcGIS Server服务代理页面。您将需要更换以下链接的位置在你的机器上的代理.
// 请参阅'Using the proxy page' 帮助主题 设立代理页面的详细信息.
esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
esri.config.defaults.io.alwaysUseProxy = false;
//此服务仅用于开发和测试目的。我们建议您创建您自己的geometry service在您的应用程序中使用
esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new esri.Map("map", {
basemap: "hybrid",
center: [-34.541, 32.843],
zoom: 3
});
dojo.connect(map, 'onLoad', function(map) {
initToolbar(map);
});
}
function initToolbar(mymap) {
// 定义一个新的符号和点线符号使用测量工具
var pms = new esri.symbol.PictureMarkerSymbol("images/flag.png",24,24);
pms.setOffset(9,11);
var sls = new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_DOT,
new dojo.Color([255,0,0,.55]),
4
);
var measurement = new esri.dijit.Measurement({
map: mymap,
lineSymbol:sls, // 线符号，用来画线测量线和测量距离的工具。可选参数。
pointSymbol:pms // 默认的符号是一个24×24的图片标记符号9 x偏移和Y偏移量11。可选参数
}, dojo.byId('measurementDiv'));
measurement.startup(); // 开启
measurement.setTool("area",true); // 启动之后才能设置激活
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:true"
style="width:100%; height:100%;">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
</div>
<div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'">
<div>使用测量构件计算面积，找到位置之间的距离，并显示当前鼠标位置.</div>
<div id="measurementDiv"></div>
</div>
</div>
</body>
</html>效果如图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ArcGIS API for JavaScript实现地图常用工具条 距离测量，面积测量
- ArcGIS API for JavaScript实现地图常用工具条 距离测量，面积测量
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- 基于ArcGIS API for Javascript的地图编辑工具
- ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding（第二章完结）
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- ArcGIS API For Javascript GP工具 Printing Tools导出地图或者打印地图（二）：GP 服务Printing Tools
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- ArcGIS api for javascript—测量，测距问题
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- ArcGIS API for JavaScript——绘制工具（Draw）
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形, ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）
- ArcGIS For JavaScript API Bookmark Widget(书签组件)————（二十一）
- ArcGIS For JavaScript API Bookmark Widget(书签组件)————（二十一）