ArcGIS API For JavaScript - 根据要素的坐标类型（点、圆、线、面），在地图上绘制展示

系统管理员 2021-07-25 23:36 1088阅读 0赞

@{
 Layout = null;
 }
 
 <!DOCTYPE html>
 
 <html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</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>
 <link href="~/Content/esri.css" rel="stylesheet" />
 <link href="~/Content/tundra.css" rel="stylesheet" />
 <script src="~/Scripts/init.js"></script>
 
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 
 #map {
 width: 100%;
 height: 100%;
 position: absolute
 }
 #right-bottom {
 width: 10%;
 position: absolute;
 z-index: 10;
 right: 1%;
 bottom: 1%;
 background-color: rgba(240,248,255,0.9);
 line-height: 12px;
 text-align: center;
 border-radius: 5px;
 border: 1px solid aliceblue;
 }
 </style>
 
 <script>
 var map;
 var graphicsLayer;
 var graphicsLayerByMarker;//创建的点图层
 var graphicsLayerByCircle;//创建的圆图层
 var graphicsLayerByPolyline;//创建的线图层
 var graphicsLayerByPolygon;//创建的面图层
 var graphicmarker;//绘制的点要素
 var graphicCircle;//绘制的圆要素
 var graphicPolyline;//绘制的线要素
 var graphicPolygon;//绘制的面要素
 require(["esri/map", "js/gaodeLayer", "esri/layers/FeatureLayer", "esri/geometry/Circle", "esri/layers/GraphicsLayer","dojo/domReady!"],
 function (Map, gaodeLayer, FeatureLayer, Circle,GraphicsLayer,) {
 /* code goes here */
 map = new Map("map", {
 center: [118.724, 32.186],
 zoom: 12,
 logo: false,
 slider: false,
 });
 var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以 //加载高德地图
 map.addLayer(baselayer);//添加高德地图到map容器
 
 //创建客户端图层
 graphicsLayer = new GraphicsLayer();
 graphicsLayerByMarker = new GraphicsLayer();//点
 graphicsLayerByCircle = new GraphicsLayer();//圆
 graphicsLayerByPolyline = new GraphicsLayer();//线
 graphicsLayerByPolygon = new GraphicsLayer();//面
 //将客户端图层添加到地图中
 map.addLayer(graphicsLayer);
 map.addLayer(graphicsLayerByMarker);
 map.addLayer(graphicsLayerByCircle);
 map.addLayer(graphicsLayerByPolyline);
 map.addLayer(graphicsLayerByPolygon);
 
 /**
 * 画点，并设置信息
 * */
 //设置点的Marker点要素
 var Marker_x = 118.757329;
 var Marker_y = 32.241605;
 var Marker_data = "这是一个点要素";
 var Marker_point = new esri.geometry.Point({
 "x": Marker_x,
 "y": Marker_y,
 "Marker_data": Marker_data,
 "spatialReference": { "wkid": 4326 },
 });
 var Marker_symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([255, 0, 0, 0.8]));
 var marker = new esri.Graphic(Marker_point, Marker_symbol);
 graphicsLayerByMarker.add(marker);
 //点击，展示信息并绘制点
 graphicsLayerByMarker.on("click", function (evt) {
 //清空上一次绘制的要素
 graphicsLayer.clear(graphicmarker);
 graphicsLayer.clear(graphicCircle);
 graphicsLayer.clear(graphicPolyline);
 graphicsLayer.clear(graphicPolygon);
 //设置展示信息
 var evt_Marker_data = evt.graphic.geometry.Marker_data;
 var evt_Marker_x = evt.graphic.geometry.x;
 var evt_Marker_y = evt.graphic.geometry.y;
 var infoTemplate = new esri.InfoTemplate("" + evt_Marker_data + "x",
 "经度: " + evt_Marker_x + ""
 + "纬度: " + evt_Marker_y + "");
 graphicsLayerByMarker.setInfoTemplate(infoTemplate);
 //绘制展示点
 var CirclePoint = new esri.geometry.Point({
 "x": evt_Marker_x,
 "y": evt_Marker_y,
 "spatialReference": { "wkid": 4326 }
 });
 var labelSymbol = new esri.symbol.PictureMarkerSymbol('/Content/ceshi.gif', 65, 65);
 graphicmarker = new esri.Graphic(CirclePoint, labelSymbol);
 graphicsLayer.add(graphicmarker);
 })
 /**
 * 画圆，并设置信息
 * */
 //设置圆的Marker点要素
 var Circle_x = 118.727329;
 var Circle_y = 32.241605;
 var Circle_radius = 1000;
 var Circle_data = "这是一个圆要素";
 var Circle_point = new esri.geometry.Point({
 "x": Circle_x,
 "y": Circle_y,
 "radius": Circle_radius,
 "Circle_data": Circle_data,
 "spatialReference": { "wkid": 4326 }
 });
 var Circle_symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 255, 0]), 1), new dojo.Color([255, 255, 0, 0.8]));
 var Circle_Marker = new esri.Graphic(Circle_point, Circle_symbol);
 graphicsLayerByCircle.add(Circle_Marker);
 //点击，展示信息并绘制圆
 graphicsLayerByCircle.on("click", function (evt) {
 //清空上一次绘制的要素
 graphicsLayer.clear(graphicmarker);
 graphicsLayer.clear(graphicCircle);
 graphicsLayer.clear(graphicPolyline);
 graphicsLayer.clear(graphicPolygon);
 //设置展示信息
 var evt_Circle_x = evt.graphic.geometry.x;
 var evt_Circle_y = evt.graphic.geometry.y;
 var evt_Circle_radius = evt.graphic.geometry.radius;
 var evt_Circle_data = evt.graphic.geometry.Circle_data;
 var infoTemplate = new esri.InfoTemplate("" + evt_Circle_data + "x",
 "经度: " + evt_Circle_x + ""
 + "纬度: " + evt_Circle_y + ""
 + "半径: " + evt_Circle_radius + "");
 graphicsLayerByCircle.setInfoTemplate(infoTemplate);
 //绘制展示圆
 var CirclePoint = new esri.geometry.Point({
 "x": evt_Circle_x,
 "y": evt_Circle_y,
 "spatialReference": { "wkid": 4326 }
 });
 var circleGeometry = new esri.geometry.Circle({
 center: CirclePoint,
 radius: evt_Circle_radius,
 geodesic: true
 });
 console.log(circleGeometry)
 var CircleSymbol = 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([216, 233, 248, 0.8]));
 graphicCircle = new esri.Graphic(circleGeometry, CircleSymbol)
 graphicsLayer.add(graphicCircle);
 })
 /**
 * 画线，并设置信息
 * */
 //设置线的Marker点要素
 var Polyline_data = "这是一个线要素";
 var Polyline_x = 118.706098;
 var Polyline_y = 32.271271;
 var Polyline_lnglat = [[118.705411, 32.265592], [118.706098, 32.271271], [118.706098, 32.271217]];
 var Polyline_point = new esri.geometry.Point({
 "x": Polyline_x,
 "y": Polyline_y,
 "lnglat": Polyline_lnglat,
 "Polyline_data": Polyline_data,
 "spatialReference": { "wkid": 4326 }
 });
 var Polyline_symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 128, 0]), 1), new dojo.Color([0, 128, 0, 0.8]));
 var polyline_Marker = new esri.Graphic(Polyline_point, Polyline_symbol);
 graphicsLayerByPolyline.add(polyline_Marker);
 //点击，展示信息并绘制线
 graphicsLayerByPolyline.on("click", function (evt) {
 //清空上一次绘制的要素
 graphicsLayer.clear(graphicmarker);
 graphicsLayer.clear(graphicCircle);
 graphicsLayer.clear(graphicPolyline);
 graphicsLayer.clear(graphicPolygon);
 //设置展示信息
 var evt_Polyline_x = evt.graphic.geometry.x;
 var evt_Polyline_y = evt.graphic.geometry.y;
 var evt_Polyline_lnglat = evt.graphic.geometry.lnglat;
 var evt_Polyline_data = evt.graphic.geometry.Polyline_data;
 var infoTemplate = new esri.InfoTemplate("" + evt_Polyline_data + "x",
 "经度: " + evt_Polyline_x + ""
 + "纬度: " + evt_Polyline_y + ""
 +"坐标集: " + evt_Polyline_lnglat + "");
 graphicsLayerByPolyline.setInfoTemplate(infoTemplate);
 //绘制展示线
 var polylineJson = {
 "paths": [evt_Polyline_lnglat],
 "spatialReference": { "wkid": 4326 }
 };
 var polyline = new esri.geometry.Polyline(polylineJson);
 var PolylineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1.5);
 graphicPolyline = new esri.Graphic(polyline, PolylineSymbol);
 graphicsLayer.add(graphicPolyline);
 })
 /**
 * 画面，并设置信息
 * */
 //设置面的Marker点要素
 var Polygon_data = "这是一个面要素";
 var Polygon_x = 118.675403;
 var Polygon_y = 32.067296;
 var Polygon_lnglat = [[118.694285, 32.135932], [118.712138, 32.097839], [118.675403, 32.067296],[118.653087, 32.101039], [118.652743, 32.128664]];
 var Polygon_point = new esri.geometry.Point({
 "x": Polygon_x,
 "y": Polygon_y,
 "lnglat": Polygon_lnglat,
 "Polygon_data": Polygon_data,
 "spatialReference": { "wkid": 4326 }
 });
 var Polygon_symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255]), 1), new dojo.Color([0, 0, 255, 0.8]));
 var Polygon_Marker = new esri.Graphic(Polygon_point, Polygon_symbol);
 graphicsLayerByPolygon.add(Polygon_Marker);
 //点击，展示信息并绘制面
 graphicsLayerByPolygon.on("click", function (evt) {
 //清空上一次绘制的要素
 graphicsLayer.clear(graphicmarker);
 graphicsLayer.clear(graphicCircle);
 graphicsLayer.clear(graphicPolyline);
 graphicsLayer.clear(graphicPolygon);
 //设置展示信息
 var evt_Polygon_x = evt.graphic.geometry.x;
 var evt_Polygon_y = evt.graphic.geometry.y;
 var evt_Polygon_lnglat = evt.graphic.geometry.lnglat;
 var evt_Polygon_data = evt.graphic.geometry.Polygon_data;
 var infoTemplate = new esri.InfoTemplate("" + evt_Polygon_data + "x",
 "经度: " + evt_Polygon_x + ""
 + "纬度: " + evt_Polygon_y + ""
 + "坐标集: " + evt_Polygon_lnglat + "");
 graphicsLayerByPolygon.setInfoTemplate(infoTemplate);
 //绘制展示面
 var polygonJson = {
 "rings": [evt_Polygon_lnglat],
 "spatialReference": { "wkid": 4326 }
 };
 var polygon = new esri.geometry.Polygon(polygonJson);
 var PolygonSymbol = 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([216, 233, 248, 0.8]));
 graphicPolygon = new esri.Graphic(polygon, PolygonSymbol);
 graphicsLayer.add(graphicPolygon);
 })
 });
 </script> 
 </head>
 <body>
 <div id="map"></div>
 <div id="right-bottom">
 .点
 .圆
 .线
 .面
 </div>
 </body>
 </html>