ArcGIS API For JavaScript - 断面分析(相交线路,定位、缓冲) 冷不防 2021-07-25 19:07 491阅读 0赞 ## 断面相交线路,将相交的线路放入select中,选择线路进行定位、缓冲展示 ## @{ 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,select { 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","dojo/domReady!"], function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, GeometryService, BufferParameters, Draw) { /* 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); }); </script> </head> <body> <div id="map"></div> <div class="list"> <button id="road" onclick="duanmian();" style="width:205px">断面分析</button> <select id="gongjuSelect" class="form-control" onchange="postionDM()"></select> </div> </body> </html> <script> //-----------断面----------- var tb; function duanmian() { //清空上次高亮显示 map.graphics.clear(); //第一步:创建一个新的Draw对象 tb = new esri.toolbars.Draw(map); //设置样式 RoaddefaultSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255])); RoadhighlightSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([255, 0, 0])); //线路图层 var RoadqueryTask = new esri.tasks.QueryTask(lineUrl);//urlline图层 var Roadquery = new esri.tasks.Query(); //查询 Roadquery.where = ("OBJECTID < 40000"); Roadquery.returnGeometry = true; Roadquery.outFields = ["*"]; //执行 RoadqueryTask.execute(Roadquery, addRoadsToMap); } function addRoadsToMap(featureSet) { //featureSet:查找到的结果(线路) //清空上一次高亮显示 map.graphics.clear(); //结果中的features字段 var features = featureSet.features; for (var i = 0, il = features.length; i < il; i++) { //将结果中的每一个结果(线路)添加到图层上 map.graphics.add(features[i]); } //创建几何服务 gsvc = new esri.tasks.GeometryService("http://xxx:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); //绘制方法 dojo.connect(tb, "onDrawEnd", findRoadsInExtent); //开始绘制 tb.activate(esri.toolbars.Draw.POLYLINE); } //执行findRoadsInExtent方法 var areas; //面积 function findRoadsInExtent(extent) { //extent:范围 var L1 = [];//linename(线路名称) var L2 = [];//OBJECRID(线路OBJECTID) var graphic; //已经加载到地图上的所有元素 var graphics = map.graphics.graphics; for (var i = 0, il = graphics.length; i < il; i++) { //加载到地图上元素(线路)的下标 graphic = graphics[i]; //多边形的范围(geometry ===> extent) var polygonExtent = extent.getExtent(); //map上有公交线网和站点的两种geometry(polyline和point以及手动绘制的图形geometry -->polygon) //当加载在地图上的元素(线路)的geometry类型为polyline时; 线路用相交(intersects),与多边形相交 if (polygonExtent.intersects(graphic.geometry) && graphic.geometry.type == "polyline") { //-------断面 线路相交用 SimpleLineSymbol()------ var LinedefaultSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255])); //设置图形的符号 graphic.setSymbol(LinedefaultSymbol); L1.push(graphic.attributes.linename);//向L1空数组中添加线路名称,返回最新 线路名称的数组 //ZXL为线路的非直线系数 L2.push(graphic.attributes.OBJECTID);//向L2空数组中添加线路id,返回最新 线路id的数组 } } //-------将断面相交到的线路放在select框中------------ var innerHtml = ""; for (var k = 0; k < L1.length; k++) { innerHtml += '<option id=' + L2[k] + ' value="javascript:postionDM(' + "'" + L1[k] + "'" + ')">' + L1[k] + '</option><br>';//id为上面L2的值(OBJECTID),不可错 } //将相交线路放入gongjuSelect的select框中 dojo.byId("gongjuSelect").innerHTML = '<option>---请选择---</option>' + innerHtml; //结束绘制图形(不关闭可连续画图) tb.deactivate(); } //定位、缓冲线路 function postionDM() { map.graphics.clear(); var id = $("#gongjuSelect option:selected").attr('id'); var sta = $('#gongjuSelect option:selected').text(); var StationqueryTask = new esri.tasks.QueryTask(lineUrl);//注意:查询图层不可错误 var Stationquery = new esri.tasks.Query(); Stationquery.where = ("OBJECTID ='" + id + "' and linename = '" + sta + "'"); Stationquery.returnGeometry = true; Stationquery.outFields = ["*"]; StationqueryTask.execute(Stationquery, lineCenter); function lineCenter(featureSet) { var sGrapphic; var features = featureSet.features; for (var i = 0; i < features.length; i++) { var cGrapphic = features[i];//.feature; if ((cGrapphic.attributes) && cGrapphic.attributes.OBJECTID == id) { //根据类型设置显示样式 switch (cGrapphic.geometry.type) { case "point": var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25])); break; case "polyline": var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 152, 255]), 5); break; case "polygon": var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25])); break; } //设置显示样式 cGrapphic.setSymbol(symbol); //添加到graphics进行高亮显示. map.graphics.add(cGrapphic); //features的下标 sGrapphic = cGrapphic; break; } } var sGeometry = sGrapphic.geometry; //缓冲 //创建几何服务(服务地址ip) var gsvc = new esri.tasks.GeometryService("http://xxx:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); var params = new esri.tasks.BufferParameters(); //要缓冲的图形 params.geometries = [sGeometry]; //缓冲的距离 params.distances = [300]; //缓冲的距离单位 params.unit = esri.tasks.GeometryService.UNIT_METER; //params.bufferSpatialReference = new esri.SpatialReference({ wkid: 32662 }); params.outSpatialReference = map.spatialReference; //开始缓冲 gsvc.buffer(params, function (result) { var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.65]), 2), new dojo.Color([255, 0, 0, 0.35])); //创建Graphic var graphic = new esri.Graphic(result[0], symbol) //将每一个结果都放在map中 map.graphics.add(graphic) }); //当点击的名称对应的Geometry为点类型时进行地图中心定位显示 if (sGeometry.type == "point") { //var hsymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,255]),2), new dojo.Color([255,0,0,0.25])); //sGrapphic.setSymbol(hsymbol); var cPoint = new esri.geometry.Point(); cPoint.x = sGeometry.x; cPoint.y = sGeometry.y; map.centerAt(cPoint); } //当点击的名称对应的Geometry为线或面类型时获取Geometry的Extent进行中心定位显示 else { var sExtent = sGeometry.getExtent(); map.setExtent(sExtent); } } } </script>
还没有评论,来说两句吧...