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 ...
随机推荐
- 洛谷 P3381【模板】最小费用最大流
题目描述 如题,给出一个网络图,以及其源点和汇点,每条边已知其最大流量和单位流量费用,求出其网络最大流和在最大流情况下的最小费用. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表 ...
- Qt 学习之路 2（32）：贪吃蛇游戏（2）
Qt 学习之路 2(32):贪吃蛇游戏(2) 豆子 2012年12月27日 Qt 学习之路 2 55条评论 下面我们继续上一章的内容.在上一章中,我们已经完成了地图的设计,当然是相当简单的.在我们的游 ...
- JSONP原理及简单实现 可做简单插件使用
JSONP实现跨域通信的解决方案. 在jquery中,我们可以通过$.ajax的dataType设置为jsonp来调用jsonp,但是jsonp和ajax的实现原理一个关系都木有.jsonp主要是通过 ...
- [HNOI/AHOI2018]排列
[Luogu4437] 如果\(a[i]=j\)则序列\(p[]\)中\(j\)必须排在\(i\)前面,如果\(j\)不在范围内则不管,求一个式子\(\sum_{i=1}^n iw_{p[i]}\)的 ...
- POJ_1733 Parity game 【并查集+离散化】
一.题面 POJ1733 二.分析 该题与之前做过的带权并查集的唯一区别就是数组开不下.所以需要用离散化的思想,只取那些有用的点来解决该问题. 离散化其实就是把这些所有用到的点收集后,去重,再排一下序 ...
- Apache Shiro(四)-登录认证和权限管理WEB支持（Servlet）
新建web项目 web.xml 修改web.xml,在里面加了个过滤器. 这个过滤器的作用,简单的说,就是 Shiro 入门里的TestShiro 这部分的工作,悄悄的干了. //加载配置文件,并获取 ...
- APP开发的三种模式
Hybrid APP混合开发的一些经验和总结 APP开发的三种模式:Native App .web App.hybrid App 1.原生app 使用原生app (android或iOS)开发APP. ...
- css引入 以及选择器040
css的介绍: css(Cascading Style Sheet) 层叠样式表 作用就是给HTML页面标签议案家各种样式 定义网页效果 简单来说 就是讲网页内容和显示样式进行分离 , 提高了显示功 ...
- PIE SDK地图图层渲染方案管理
1. 功能简介 在数据种类较多.渲染规则复杂的情况下,逐个设置其渲染方式是一件繁琐的工作.PIE SDK提供了一种省力省心的办法, PIE SDK提供栅格和矢量数据渲染方案的打开与保存.能够将配色方案 ...
- 小程序wxml文件引用方式
import<!--header.wxml --> <template name="item"> <text>{{text}}</text ...