区域分析
区域分析（相交线路、包含站点），将相交的线路和站点放入select中，选择线路或者站点进行定位、缓冲展示
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>区域分析（多边形，圆、矩形、椭圆）及要素定位缓冲（相交线路、包含站点）</title>
@*加载高德地图*@
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
packages: [{
name: "js",
location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
}]
};
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
@*引入arcgis所需js及css*@
<script src="~/util/MapFile/init.js"></script>
<link href="~/util/MapFile/esri.css" rel="stylesheet" />
<link href="~/util/MapFile/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/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/MapServer'
var stationUrl = 'http://xxx:6080/arcgis/rest/services/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/MapServer/0'
var lineUrl = 'http://xxx:6080/arcgis/rest/services/%E5%AE%BF%E8%BF%81%E6%99%BA%E6%85%A7%E5%85%AC%E4%BA%A4%E5%A4%A7%E6%95%B0%E6%8D%AE%E5%B9%B3%E5%8F%B0_%E7%BA%BF%E8%B7%AF%E7%AB%99%E7%82%B920201118/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: [118.375892, 33.966844],
zoom: 12,//缩放等级
logo: false, //logo
slider: false, //缩小按钮
});
var baselayer1 = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
map.addLayer(baselayer1);
var serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
map.addLayer(serverLayer);
});
</script>
</head>
<body>
<div id="map"></div>
<div class="list">
<button id="road" onclick="duanmian();" style="width:205px">断面分析</button>
<select id="lineSelect" class="form-control" onchange="centerLine()"></select>
<select id="stationSelect" class="form-control" onchange="centerStation()"></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 = ("FID >= 0");
Roadquery.returnGeometry = true;
Roadquery.outFields = ["*"];
RoadqueryTask.execute(Roadquery, addRoadsToMap);
}
function addRoadsToMap(featureSet) {
map.graphics.clear();
var features = featureSet.features;
for (var i = 0, il = features.length; i < il; i++) {
//将结果中的每一个结果（线路）添加到图层上
map.graphics.add(features[i]);
}
// 查询公交站点
var StationqueryTask = new esri.tasks.QueryTask(stationUrl);
var Stationquery = new esri.tasks.Query();
Stationquery.where = ("FID >= 0");
Stationquery.returnGeometry = true;
Stationquery.outFields = ["*"];
StationqueryTask.execute(Stationquery, addRoadsToStation);
}
function addRoadsToStation(featureSet) {
var features = featureSet.features;
for (var i = 0, il = features.length; i < il; i++) {
map.graphics.add(features[i]);
}
SFeatures = features;
///创建一个新的Draw对象
tb = new esri.toolbars.Draw(map);
//创建几何服务
gsvc = new esri.tasks.GeometryService("http://utility.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
//绘制
dojo.connect(tb, "onDrawEnd", findRoadsInExtent); //findRoadsInExtent 多种绘制方法时，方法名称不可重复
//开始绘制
tb.activate(esri.toolbars.Draw.POLYGON);//POLYGON：多边形,CIRCLE:圆,RECTANGLE:矩形,ELLIPSE:椭圆
}
//执行findRoadsInExtent方法
function findRoadsInExtent(extent) { //extent：范围
//投影坐标系（3857）转地理坐标系（4326）
var geometry = esri.geometry.webMercatorToGeographic(extent);
//var geometry = extent;
//绘制图形时 线的样式 颜色 宽度
var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 99, 0]), 3);
//绘制图形时 面的样式 轮廓 颜色
var polygonSymbol2 = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, lineSymbol, new dojo.Color([0, 67, 0, 0.25]));
//绘制完成的新图形（参数：geometry图形，polygonSymbol2几何图形的样式）
var graphicpoint = new esri.Graphic(geometry, polygonSymbol2);
//展现新图形
map.graphics.add(graphicpoint);
//计算面积(平方公里)
var areas = esri.geometry.geodesicAreas([geometry], esri.Units.SQUARE_KILOMETERS);
console.log(areas)
var L1 = [];
var L2 = [];
var S1 = [];
var S2 = [];
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);
// 向数组中 push 线路数据
L1.push(graphic.attributes.linename);
L2.push(graphic.attributes.FID);
}
//当加载在地图上的元素（站点）的geometry类型为point时； 站点用包含（contains），多边形包含站点
if (geometry.contains(graphic.geometry) && graphic.geometry.type == "point") { //contains：站点用包含
//-------------区域分析 包含站点用 SimpleMarkerSymbol()------------------
var LinedefaultSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 0, 255]));
//设置图形符号
graphic.setSymbol(LinedefaultSymbol);
// 向数组中 push 站点数据
S1.push(graphic.attributes.stationnam);
S2.push(graphic.attributes.FID);
}
}
//-------将多边形相交到的线路放入select框中------------
var innerHtml = "";
for (var k = 0; k < L1.length; k++) {
innerHtml += '<option id=' + L2[k] + ' value="javascript:postionDB(' + "'" + L1[k] + "'" + ')">' + L1[k] + '</option><br>';
}
dojo.byId("lineSelect").innerHTML = '<option>---请选择---</option>' + innerHtml;
//-------将多边形包含的站点放入select框中------------
var innerHtml = "";
for (var k = 0; k < S1.length; k++) {
innerHtml += '<option id=' + S2[k] + ' value="javascript:postionDB1(' + "'" + S1[k] + "'" + ')">' + S1[k] + '</option><br>';
}
dojo.byId("stationSelect").innerHTML = '<option>---请选择---</option>' + innerHtml;
//结束绘制图形（不关闭可连续画图）
tb.deactivate();
}
//定位、缓冲线路
function centerLine() {
console.log(1)
map.graphics.clear();
var id = $("#lineSelect option:selected").attr('id');
var line = $('#lineSelect option:selected').text();
var queryTask = new esri.tasks.QueryTask(lineUrl);
var query = new esri.tasks.Query();
query.where = ("FID =" + id + " and linename = '" + line + "'");
query.returnGeometry = true;
query.outFields = ["*"];
queryTask.execute(query, lineCenter);
function lineCenter(featureSet) {
var sGrapphic;
var features = featureSet.features;
for (var i = 0; i < features.length; i++) {
var cGrapphic = features[i];
if ((cGrapphic.attributes) && cGrapphic.attributes.FID == 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);
sGrapphic = cGrapphic;
}
}
var sGeometry = sGrapphic.geometry;
console.log(sGeometry)
//缓冲
//创建几何服务(服务IP地址)
var gsvc = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/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);
}
}
}
//定位、缓冲站点
function centerStation() {
//清空上次高亮显示
map.graphics.clear();
var id = $('#stationSelect option:selected').attr('id');
var sta = $('#stationSelect option:selected').text();
var QueryTask = new esri.tasks.QueryTask(stationUrl);
var query = new esri.tasks.Query();
query.where = ("FID = " + id + " and stationnam = '" + sta + "'");
query.returnGeometry = true;
query.outFields = ["*"];
QueryTask.execute(query, ShowStation);
var sGrapphic;
function ShowStation(featureSet) {
var features = featureSet.features;
for (var i = 0; i < features.length; i++) {
var cGrapphic = features[i];
if ((cGrapphic.attributes) && cGrapphic.attributes.FID == 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;
}
}
//features的下标的几何
var sGeometry = sGrapphic.geometry;
//----缓冲----
//创建几何服务(服务IP地址)
var jhfw = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/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 });
//设置outSpatialReference会将返回的Geometry的坐标自动投影过去，返回想要的坐标系。
params.outSpatialReference = map.spatialReference;
//开始缓冲
jhfw.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>
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
