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 ...
随机推荐
- VUE学习（一）
1.搭建vue环境 2.了解 v-on 事件监听,常常跟事件(click,mousemove,change等鼠标或者手势事件)在一起,eg:v-on:click,语法糖——:(冒号) 需要在meth ...
- kibana安装汉化包
kibana安装汉化包其实很简单!但要找到汉化包可能就很麻烦了.我这里提供了6.2的版本的汉化包!至于能不能在其他版本用,我就没试过了.但6.2的kibana本人亲测.没问题!!!! 下载——解压.这 ...
- JavaWeb学习笔记（八）—— EL表达式
一.EL表达式概述 在JSP开发中,为了获取Servlet域对象中存储的数据,经常需要书写很多Java代码,这样的做法会使JSP页面混乱,难以维护.为此,在JSP2.0规范中提供了EL表达式.EL全名 ...
- QQ互联 网站应用接入
1.准备工作 接入qq登陆前,网站需要先进行申请,获得对应的appid和appkey, 以保证后续流程中可正确对网站与用户进行授权. 2.放置qq登陆按钮. 在网站页面上放置“qq登录”按钮,并为按钮 ...
- Oracle sql 中的 ALL,ANY,SOME
[转自] http://www.itpub.net/thread-1355835-1-1.html any和some是等价的,其与all的前面都只能是比较符号,即=, !=, >, <, ...
- C++ GUI Qt4编程(02)-1.2quit
1. 根据C++ GUI Qt4编程(第二版)整理2. 系统:centos7: Qt版本:5.5.13. 程序:quit.cpp #include <QApplication> #inc ...
- PIE SDK均值滤波
1.算法功能简介 均值滤波是最常用的线性低通滤波,它均等地对待邻域中的每个像素.对于每个像素,取邻域像素值的平均作为该像素的新值.均值滤波算法简单,计算速度快,对高斯噪声比较有效.从频率域的角度看,相 ...
- js 中 forEach 和 map
共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名 ...
- jquery双日历日期选择器bootstrap-daterangepicker日历插件
这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...
- oracle 基础知识(七)----动态性能视图
一,动态性能视图介绍 动态性能视图属于数据字典,系统管理员用户 SYS 可以访问它们.在数据库打开和使用时不断进行更新,而且它们的内容主要与性能有关.虽然这些视图很像普通的数据库表,但它们不允许用户直 ...