ArcGisJS实现地图常用工具条、距离测量和面积测量（非官方实例）
常用地图工具包括：平移、拉框缩小、拉框放大、全图、距离测量、面积测量、清除标记，距离测量、面积测量没有使用官方自带的组件代码。
1.距离测量
2.面积测量
3.源代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测量工具 - 3.18</title>
<meta charset="utf-8" />
<link rel="Stylesheet" type="text/css" href="http://127.0.0.1/api/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />
<script type="text/javascript">
//下面这段代码必须放到下面几个脚本文件的上面，否则会错误
var dojoConfig = {
api_url: "127.0.0.1/api/arcgis_js_api/library/3.18/3.18",
async : false,
isDebug : true,
parseOnLoad : true,
mblHideAddressBar : false,
packages : [{
name: "lib",
location: location.pathname.replace(/\/[^/]+$/, '') + '/lib'
}]
};
</script>
<script type="text/javascript" src="http://127.0.0.1/api/arcgis_js_api/library/3.18/3.18/init.js"></script>
<style type="text/css">
html, body {
margin:0px;
height:100%;
}
#map_canvas {
width:100%;
height:100%;
margin:0px auto;
}
#map_tools {
position: absolute;
right: 10px;
top:10px;
}
</style>
<script type="text/javascript">
var map;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/toolbars/navigation",
"esri/toolbars/draw",
"esri/tasks/GeometryService",
"esri/symbols/Font",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"esri/Color",
"dojo/number",
"esri/graphic",
"esri/tasks/LengthsParameters",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/tasks/AreasAndLengthsParameters",
"dojo/dom-attr",
"dojo/domReady!"
], function(Map, ArcGISTiledMapServiceLayer, Navigation, Draw, GeometryService, Font,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, Color,
number, Graphic, LengthsParameters, Point, Polyline, AreasAndLengthsParameters, domAttr) {
//创建底图
map = Map("map_canvas");
var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);
//创建地图操作对象
var navToolbar = new Navigation(map);
//boolbar工具条
var toolbar = new Draw(map);
//调用esri自带的服务（在arcgis server Manger中，记得开启服务）
var geometryService = new GeometryService("http://192.168.0.206:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var totalDistance = 0.0; //总距离
var totalGraphic = null; //存储点集合
var disFun = false; //距离测量
var areaFun = false; //面积测量
var inputPoints = []; //存储生成点的集合
var startFont = new Font('12px').setWeight(Font.WEIGHT_BOLD); //定义文字样式
var makerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 8,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([204,102,51]), 1),
new Color([158.184,71,0.65])
); //定义标记样式
//给按钮添加绑定事件
dojo.query(".functionWrap").forEach(function(node, index) {
dojo.connect(node, "onclick", function(evt) {
switch(node.value) {
case "平移":
navToolbar.activate(Navigation.PAN);
break;
case "拉框缩小":
navToolbar.activate(Navigation.ZOOM_OUT);
break;
case "拉框放大":
navToolbar.activate(Navigation.ZOOM_IN);
break;
case "全图":
map.centerAndZoom(([110,38.5]),5);
break;
case "距离测量":
distanceMeasure();
break;
case "面积测量":
areaMeasure();
break;
case "清除标记":
clearAction();
break;
}
});
});
//距离测量
function distanceMeasure() {
map.enableScrollWheelZoom(); //启动鼠标滚轮操作
disFun = true;
areaFun = false;
toolbar.activate(Draw.POLYLINE);
}
//面积量算
function areaMeasure() {
map.enableScrollWheelZoom();
disFun = false;
areaFun = true;
toolbar.activate(Draw.POLYGON);
}
//触发完成的事件
toolbar.on("draw-end", function(evt) {
addToMap(evt);
});
//生成两点之间的连线
toolbar.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2));
//量算功能触发
map.on("click", function(evt) {
mapClick(evt);
});
//添加图形函数
function addToMap(evt) {
if (disFun || areaFun) {
var geometry = evt.geometry; //绘制图形的geometry
//将绘制的图形添加到地图上去
var symbol = null;
switch (geometry.type) {
case "point":
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 1),
new Color([0,255,0,0.25]));
break;
case "polyline":
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0,0.8]),2);
break;
case "polygon":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]),2),
new Color([255,255,0,0.25]));
break;
case "extent":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]),2),
new Color([255,255,0,0.25]));
break;
}
map.graphics.add(new Graphic(geometry, symbol));
if (disFun) {
inputPoints.splice(0, inputPoints.length); //删除数组中的所有元素
totalDistance = 0.0;
totalGraphic = null;
}
else if (areaFun) {
//设置面积和长度的参数
var areasAndLengthsParameters =new AreasAndLengthsParameters();
areasAndLengthsParameters.lengthUnit = GeometryService.UNIT_METER;//设置距离单位
areasAndLengthsParameters.areaUnit = GeometryService.UNIT_SQUARE_KILOMETERS;//设置面积单位
geometryService.simplify([geometry],function (simplifiedGeometries) {
areasAndLengthsParameters.polygons = simplifiedGeometries;
geometryService.areasAndLengths(areasAndLengthsParameters,function (result) {
var font =new Font("16px",Font.STYLE_NORMAL,Font.VARIANT_NORMAL,Font.WEIGHT_BOLDER);
var areaResult = new TextSymbol(number.format(result.areas[0],{
pattern:'#.000'
})+"平方公里",font,new Color([204,102,51]));
var spoint = new Point(geometry.getExtent().getCenter().x,geometry.getExtent().getCenter().y,map.spatialReference);
map.graphics.add(new Graphic(spoint,areaResult));//在地图上显示测量的面积
});
});
}
}
}
//量算函数
function mapClick(evt) {
if (disFun) {
inputPoints.push(evt.mapPoint);
var textSymbol;
//起点标记
if (inputPoints.length === 1) {
textSymbol = new TextSymbol("起点", startFont, new Color([204, 102, 51]));
textSymbol.setOffset(0, -20);
map.graphics.add(new Graphic(evt.mapPoint, textSymbol));
}
//拐角点标记
map.graphics.add(new Graphic(evt.mapPoint, makerSymbol));
if (inputPoints.length >= 2) {
//设置距离测量的参数
var lengthParams = new LengthsParameters();
lengthParams.distanceUnit = GeometryService.UNIT_METER;
lengthParams.calculationType = "preserveShape";
var p1 = inputPoints[inputPoints.length-2];
var p2 = inputPoints[inputPoints.length-1];
if (p1.x === p2.x && p1.y === p2.y) {
return;
}
//z在两点之间划线将两点链接起来
var polyline = new Polyline(map.spatialReference);
polyline.addPath([p1,p2]);
lengthParams.polylines = [polyline];
//根据参数，动态的计算长度
geometryService.lengths(lengthParams,function(distance) {
var _distance = number.format(distance.lengths[0]/1000);
totalDistance += parseFloat(_distance);//计算总长度
var beetwentDistances = _distance+"千米";
var tdistance = new TextSymbol(beetwentDistances,startFont,new Color([204,102,51]));
tdistance.setOffset(40,-3);
map.graphics.add(new Graphic(p2,tdistance));
if (totalGraphic) {
map.graphics.remove(totalGraphic);
}
var total=number.format(totalDistance, {
pattern:"#.000"
});
//设置总长度的显示样式，并添加到地图上
var totalSymbol = new TextSymbol("总长度：" + total + "千米", startFont, new Color([204,102,51]));
totalSymbol.setOffset(40, -15);
totalGraphic = map.graphics.add(new Graphic(p2, totalSymbol));
});
}
}
}
//清空函数
function clearAction() {
toolbar.deactivate(); //撤销地图绘制功能
disFun = false;
areaFun = false;
map.enableScrollWheelZoom();
map.graphics.clear();
var graphicLayerIds = map.graphicsLayerIds;
var len = graphicLayerIds.length;
for (var i = 0; i < len; i++) {
var gLayer = map.getLayer(graphicLayerIds[i]);
gLayer.clear();
}
}
});
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="map_tools">
<input type="button" class="functionWrap" value="平移" />
<input type="button" class="functionWrap" value="拉框缩小" />
<input type="button" class="functionWrap" value="拉框放大" />
<input type="button" class="functionWrap" value="全图" />
<input type="button" class="functionWrap" value="距离测量" />
<input type="button" class="functionWrap" value="面积测量" />
<input type="button" class="functionWrap" value="清除标记" />
</div>
</body>
</html>
注意：上面的代码使用的是本地的ArcGis API，如果本地没有，请改为官方在线API才可以显示出来。
如果需要源代码文件或者有疑问的，可以Q我，149012959，请注明原因！
ArcGisJS实现地图常用工具条、距离测量和面积测量（非官方实例）的更多相关文章
- 百度地图API示例之添加/删除工具条、比例尺控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- arcengine中自定义工具和自带工具条（ICommand）点击后和其他工具使用的冲突
自己系统中本身对于放大缩小等功能直接是单独重写的,但是如果在加一个工具条具有相同功能的话两者之间会有一些冲突,为解决该冲突可以重写工具条的OnItemClick事件 该工具条命名为axTool 我本身 ...
- Java程序员常用工具集
我发现很多人没办法高效地解决问题的关键原因是不熟悉工具,不熟悉工具也还罢了,甚至还不知道怎么去找工具,这个问题就大条了.我想列下我能想到的一个Java程序员会用到的常用工具. 一.编码工具 1.IDE ...
- C#常用工具类——Excel操作类
/// 常用工具类——Excel操作类 /// <para> ------------------------------------------------</para> / ...
- [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan ------------------ ...
- PHP常用工具类
<?php namespace isslib\Util; use think\Config; /** * 常用工具类 * User: xaxiong * Date: 2016/12/19 * T ...
- C#常用工具类——Excel操作类(ZT)
本文转载于: http://www.cnblogs.com/zfanlong1314/p/3916047.html /// 常用工具类——Excel操作类 /// <para> ----- ...
- Qt__主窗口、菜单和工具条(QMainWindow,QMenu,QToolBar)
转自豆子空间 主窗口 Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow.MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域: 最上面是Wind ...
- commons-lang3-3.2.jar中的常用工具类的使用
这个包中的很多工具类可以简化我们的操作,在这里简单的研究其中的几个工具类的使用. 1.StringUtils工具类 可以判断是否是空串,是否为null,默认值设置等操作: /** * StringUt ...
随机推荐
- LINUX下PHP安装VLD扩展并测试OK
首先下载安装vld压缩包,下载前一定注意区分压缩包版本和php版本是否匹配,否则很可能后面make install 失败. //下载安装包—暂时以14版本为例 wget http://pecl.php ...
- npm 修改源 pip 修改源
npm修改源由于不可说原因,npm install时,速度总是不尽如人意,解决办法是修改npm的数据源npm config set registry https://registry.npm.taob ...
- DP小小结
入门题 : [Luogu1441]砝码称重 , [NOIP2015]子串 [AHOI2009]中国象棋 , 详见代码 [HNOI2007]梦幻岛宝珠 , 详见代码 [NOIP2012]开车旅行 , 没 ...
- [转] 一文看懂npm、yarn、pnpm之间的区别
[From] http://geek.csdn.net/news/detail/197339 原文:Understanding differences between npm, yarn and pn ...
- PIE SDK专题制图另存模板
1．功能简介 在PIE SDK中,所有的制图元素.视图范围以及排版等都可以保存成一个模板,以供多次重复使用.使用模板时只需要打开该模板,加载相应数据,就可以直接出图,省去了重复制作图幅的麻烦,方便快捷 ...
- BaaS_后端即服务 RESTful
码云coding API https://open.coding.net/ Swagger 官网用VPN能流畅打开,但它自己的基于web的编辑器不行 用来设计RESTful API LeanCloud ...
- yield用法
yield的__next__()和send()的用法,详见代码 def D(): n = 1 while n < 5: m = yield n print("m:",m) p ...
- Apache Beam的API设计
不多说,直接上干货! Apache Beam的API设计 Apache Beam还在开发之中,后续对应的API设计可能会有所变化,不过从当前版本来看,基于对数据处理领域对象的抽象,API的设计风格大量 ...
- Git~分支真的很轻
轻,让人觉得很爽 所有源代码管理工具都有管理分支的功能,git当然也不例外,而且git的分支是非常轻的,不像tfs,svn那样,复制一大堆代码,git只记录变化的内容,有本地分支与远程分支之分,原则上 ...
- Java网站开发的一些问题以及解决（cookie消失,上传头像，js等）
1.首先是cookie的问题,很多人都是遇到了将数据存储到cookie中并且add到response之中,但是还有返回其他页面或者刷新页面cookie消失的情况,除了设置cookie的存活时间外, 还 ...