ArcGIS API 4.x for Js 点击图层弹出信息框

最新推荐文章于 2024-07-23 16:56:42 发布

茶梨吐司

最新推荐文章于 2024-07-23 16:56:42 发布

阅读量2.1k

点赞数

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

版权

需求

点击小船图层后弹出信息框，信息框中包含该船只(图层)的信息

效果
在这里插入图片描述

核心步骤

1.通过点击事件筛选图层 view.on(“click”,function(event){}
2.将图层中attributes属性包含的信息动态渲染到自定义的信息框中
3.设置信息框的显示关闭

完整代码

<!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%;
			}
			#infoBox{
				position: absolute;
				z-index：999px;
				width:150px;
				height: 200px;
				background-color: #fff;
				font-size: 12px;
				top: 0px;
				left: 5px;
				padding-left: 5px;
				display: none;
			}
			.title{
				color: green;
			}
		</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>
		<!-- 准备自定义弹窗窗口 -->
		<div id="infoBox">
			<p class="title">船只信息</p>
			<p>船舶ID:<span id="shipID"></span></p>
			<p>MMSI:<span id="mmsi"></span></p>
			<p>船只类型:<span id="shipType"></span></p>
			<p>船舶名称:<span id="name"></span></p>
     		<p>船舶长度:<span id="length"></span></p>
			<p>船舶宽度:<span id="width"></span></p>
		</div>
		<script>
			require([
				"esri/Map",
				"esri/views/MapView",
				"esri/layers/GraphicsLayer",
				"esri/Graphic",
				"esri/geometry/Point"
			], function (Map,MapView,GraphicsLayer,Graphic,Point) {
		   
			 //添加地图
			 var map = new Map({
		   	basemap: 'satellite',
		   });
		   		 
		   var view = new MapView({
		   	container: "viewDiv",
		   	map: map,
		   	center: [107.246152,34.414465],
		   	zoom: 7
		   });	 
			 
			 //1.准备一个图层或服务发布的图层
			 var gLayer = new GraphicsLayer({
			 				title: 'ship'
			  });
			 var point = {
						 type:"point",
						 longitude: 105.45598133044301,
						 latitude: 34.03155034545997,
				}
				var pgraphic = new Graphic({
					 geometry: point,
					 symbol: {
						type: "picture-marker",
						url: './img/ship1.png',
						width: 15,
						height: 15,
					},
					//给图层添加携带信息
					attributes: {
						"shipID":477765901, //船舶ID
						"mmsi":477765901, //唯一表示
						"shipType":"货船", //船只类型
						"name":"CHUANZHI",
						"length":2610,
						"width":320		
					}
					
				});
			  gLayer.graphics.add(pgraphic);
				map.add(gLayer);

          //2.设置点击事件
			 view.on("click",function(event){
				 view.hitTest(event).then(function(response){
					 if(response.results[0].graphic.layer.title == 'ship'){			
						 var infoArr = response.results[0].graphic.attributes;
						 console.log(infoArr);
						 $("#shipID").html(infoArr.shipID);
						 $("#mmsi").html(infoArr.mmsi);
						 $("#shipType").html(infoArr.shipType);
						 $("#name").html(infoArr.name);
						 $("#length").html(infoArr.length);
						 $("#width").html(infoArr.width);
						 $("#infoBox").css("display","block");
					 }
				 })
			 })
		 })	 	 
		 
	 </script>
	</body>
</html>