@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Draw</title>
@*加载高德地图*@
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
packages: [{
name: "js",
location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
}]
};
</script>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/init.js"></script>
<link href="~/Content/esri.css" rel="stylesheet" />
<link href="~/Content/tundra.css" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
}
html, body, #map {
width: 100%;
height: 100%;
position: absolute;
}
.list {
width: 12%;
background-color: rgba(22, 59, 90, 0.8);
color: #fff;
position: absolute;
}
button {
width: 90%;
margin: 10px 5%;
border-radius: 5px;
height: 26px;
}
</style>
<script>
var map;
var urlMap = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer'//总图层
var stationUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/0'//站点图层
var lineUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/1'//线路图层
require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/GeometryService", "esri/tasks/BufferParameters",
"esri/toolbars/draw", "esri/symbols/Font", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", "dojo/query", "esri/symbols/TextSymbol",
"esri/graphic", "esri/tasks/LengthsParameters", "esri/geometry/Polyline", "dojo/number", "esri/layers/FeatureLayer",
"dojo/domReady!"],
function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, GeometryService, BufferParameters,
Draw, Font, SimpleMarkerSymbol, SimpleLineSymbol, Color, query, TextSymbol,
Graphic, LengthsParameters, Polyline, number, FeatureLayer) {
/* code goes here */
map = new Map("map", {
center: [120.075892, 31.526844],
zoom: 8,//缩放等级
logo: false, //logo
slider: false, //缩小按钮
});
var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
map.addLayer(baselayer1);//添加高德地图到map容器
map.addLayer(serverLayer);
//-------------toolbar工具条（测距、站点要素显隐、线网要素显隐）---------------
var toolbar = new Draw(map); //map：地图
//调用esri自带的服务（在arcgis server Manger中，记得开启服务）
var geometryService = new GeometryService("http://xxx:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var totleDistance = 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]));//定义标记点样式
//给按钮添加绑定事件
query("button").on("click", function (event) {
console.log("111",event)
//获得按钮的文本信息
var value = this.innerHTML;
switch (value) {
case "测距":
//测距操作
map.graphics.clear();
distanceMeasure();
break;
case "站点":
//站点
map.graphics.clear();
Aurlstation();
break;
case "线网":
//线网
map.graphics.clear();
Xurlline();
break;
}
})
//长度量算
function distanceMeasure() {
map.enableScrollWheelZoom();
disFun = true;
areaFun = false;
toolbar.activate(Draw.POLYLINE);
}
// 量算功能触发
map.on("click", function (evt) {
mapClick(evt);
});
//触发完成的事件
toolbar.on("draw-end", function (evt) {
addToMap(evt); //添加图形函数;测距所点与点之间画的线
});
//生成两点之间的连线
toolbar.setLineSymbol(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2));
//量算函数
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);
totleDistance += 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(totleDistance, {
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 addToMap(evt) { //上面触发的addToMap方法，触发完成的方法
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));
toolbar.deactivate();
if (disFun) {
disFun = false;
inputPoints.splice(0, inputPoints.length);//删除数组中的所有元素
totleDistance = 0.0;
totalGraphic = null;
}
}
}
//站点元素
var Asta = false;
function Aurlstation() {
if (Asta) { //默认为显示
map.removeLayer(map.getLayer("Fzd"));
Asta = false;
}
else {
var featureLayer = new FeatureLayer(stationUrl, { //stationUrl：站点图层，不可错
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
featureLayer.id = "Fzd";
map.addLayers([featureLayer]);
Asta = true;
}
}
//线网元素
var Xw = false;
function Xurlline() {
if (Xw) {
map.removeLayer(map.getLayer("Fxw"));
Xw = false;
}
else {
var featureLayer = new FeatureLayer(lineUrl, { //urlline：线路图层，不可错
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
featureLayer.id = "Fxw";
map.addLayers([featureLayer]);
Xw = true;
}
}
});
</script>
</head>
<body>
<div id="map"></div>
<div class="list">
<button>测距</button>
<button>站点</button>
<button>线网</button>
</div>
</body>
</html>
<script>
</script>
ArcGIS API For JavaScript - toolbar工具条（测距）、站点要素显隐、线网要素显隐
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
基于ArcGIS Pro SDK的开发定制
1．環境搭建 1.1軟件 Visual studio 2017或2019 NET Framework 4.6.1+ ArcGIS Pro 2.5 1.2環境搭建 1）打開Visual s