ArcGIS API 4.x for Js 点、线、面的绘制

最新推荐文章于 2024-05-15 23:45:24 发布

茶梨吐司

最新推荐文章于 2024-05-15 23:45:24 发布

阅读量1.6k

点赞数 3

本文链接：https://blog.csdn.net/qq_41615323/article/details/115199594

版权

需求

添加自定义的点、线、面图层

效果
在这里插入图片描述

需添加以下API

“esri/layers/GraphicsLayer”,
“esri/Graphic”,
“esri/geometry/Polygon”,
“esri/geometry/Polyline”,
“esri/geometry/Point”

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建点、线、面</title>
    <link rel="stylesheet" href="http://139.9.43.111:8084/arcgis_js_api/library/4.13/esri/css/main.css"/>
		<style>
			html,
			body,
			#viewDiv {
				padding: 0;
				margin: 0;
				height: 100%;
				width: 100%;
			}
		</style>
		<script src="js/jquery-1.11.3.min.js"></script>
		<script src="http://139.9.43.111:8084/arcgis_js_api/library/4.13/dojo/dojo.js"></script>
	</head>
	<body>
		<div id="viewDiv"></div>
		<script>
		require([
			"esri/Map",
			"esri/views/MapView",
			"esri/layers/GraphicsLayer",
			"esri/Graphic",
			"esri/geometry/Polygon",
			"esri/geometry/Polyline",
			"esri/geometry/Point"
		], function (Map,MapView,GraphicsLayer,Graphic,Polygon,Polyline,Point) {	 
			//添加地图
			var map = new Map({
				basemap: 'satellite',
			});
					 
			var view = new MapView({
				container: "viewDiv",
				map: map,
				center: [107.246152,34.414465],
				zoom: 7
			});	 
			 
			//1.创建GraphicsLayer
			var gLayer = new GraphicsLayer({
				title: 'test'
			});
			
			//2.创建graphic
			//2.1创建点
			 var point = {
				 type:"point",
				 longitude: 105.45598133044301,
				 latitude: 34.03155034545997,
			 }
			var pgraphic = new Graphic({
				 geometry: point,
				 symbol: {
					type: "simple-marker",
					color: "white",
					width: 2,
				}
			});
			
			//2.2创建线
			var line={
					type:"polyline",
					paths: [
						[104.60780246691783,34.73210435958741],
						[108.39971645312288,34.59846850081309]
					],
					spatialReference: view.spatialReference
			};
			var lgraphic = new Graphic({
					geometry: line,
					symbol: {
							type: "simple-line",
							color: [4, 90, 141],
							width: 4,
							cap: "round",
							join: "round"
					}
			});

			//2.3创建面
			var	polygon = {
					type: "polygon",
					hasZ: false,
					hasM: false,
					rings: [
						[101.55077083544893,35.15796474608579],
						[103.72692211108313,35.1334357997853],
						[103.67190463976965,33.382052797803226],
						[101.43202407794163,33.51597302048444]
					],
					spatialReference: view.spatialReference
			};
			var ggraphic = new Graphic({
					geometry: polygon,
					symbol: {
							type: "simple-fill",
							color: "pink",
							style: "solid",
							outline: {
									color: "black",
									width: 1
							}	
					}	
			});

			//3.将画好的点、线、面添加到GraphicsLayer中	
			 gLayer.graphics.add(pgraphic);
			 gLayer.graphics.add(lgraphic);
			 gLayer.graphics.add(ggraphic);
			 
			//4.将GraphicsLayer添加到地图上
			 map.add(gLayer);
		
	 })	 
	 </script>
	</body>
</html>