@{
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