@{
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 + "<span style='float:right;margin-right:5px;'>x</span>",
"<span style='color: rgba(0, 0, 0, 0.5);'>經度: </span>" + evt_Marker_x + "</br></br>"
+ "<span style='color: rgba(0, 0, 0, 0.5);'>緯度: </span>" + evt_Marker_y + "</br>");
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 + "<span style='float:right;margin-right:5px;'>x</span>",
"<span style='color: rgba(0, 0, 0, 0.5);'>經度: </span>" + evt_Circle_x + "</br></br>"
+ "<span style='color: rgba(0, 0, 0, 0.5);'>緯度: </span>" + evt_Circle_y + "</br></br>"
+ "<span style='color: rgba(0, 0, 0, 0.5);'>半徑: </span>" + evt_Circle_radius + "</br>");
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 + "<span style='float:right;margin-right:5px;'>x</span>",
"<span style='color: rgba(0, 0, 0, 0.5);'>經度: </span>" + evt_Polyline_x + "</br></br>"
+ "<span style='color: rgba(0, 0, 0, 0.5);'>緯度: </span>" + evt_Polyline_y + "</br></br>"
+"<span style='color: rgba(0, 0, 0, 0.5);'>座標集: </span>" + evt_Polyline_lnglat + "</br></br>");
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 + "<span style='float:right;margin-right:5px;'>x</span>",
"<span style='color: rgba(0, 0, 0, 0.5);'>經度: </span>" + evt_Polygon_x + "</br></br>"
+ "<span style='color: rgba(0, 0, 0, 0.5);'>緯度: </span>" + evt_Polygon_y + "</br></br>"
+ "<span style='color: rgba(0, 0, 0, 0.5);'>座標集: </span>" + evt_Polygon_lnglat + "</br></br>");
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">
<p><span style="color:red;font-size:60px;padding-right:30%;margin-top:-10%;">.</span><span>點</span></p>
<p><span style="color:yellow;font-size:60px;padding-right:30%;">.</span><span>圓</span></p>
<p><span style="color:green;font-size:60px;padding-right:30%;">.</span><span>線</span></p>
<p style="margin-bottom:10%;"><span style="color:blue;font-size:60px;padding-right:30%;">.</span><span>面</span></p>
</div>
</body>
</html>
ArcGIS API For JavaScript - 根據要素的座標類型（點、圓、線、面），在地圖上繪製展示
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
基於ArcGIS Pro SDK的開發定製
1．環境搭建 1.1軟件 Visual studio 2017或2019 NET Framework 4.6.1+ ArcGIS Pro 2.5 1.2環境搭建 1）打開Visual s