arcgis of js 4.x 笔记（4）如何自定义弹窗以及加上动态数据_arcgis for js identifytask 自定义弹框-优快云博客

本文介绍了一种将后台数据转化为地图上可视化的点，并通过自定义图层和弹窗实现数据展示的方法。具体包括如何创建包含经纬度和属性的地理特征，以及如何设置图层的渲染样式和弹窗模板。

之前需要有一个功能需要从后台数据获取到前端并且在地图上展示，然后研究了一下，现在做个记录

首先是获取数据，当然数据必须得包含经纬度。

当然从回头获取的数据可能不是这个的格式，但是可以调整成差不多的，其中x,y是经纬度，然后attributes就是属性

var features = [{
	geometry: {
				type: "point",
				x: -100,
				y: 38,
				text: "\ue61d", // esri-icon-map-pin
			},
			attributes: {
				ObjectID: 1,
				DepArpt: "啊天气真好",
				FltId: "是的呢"
			}
		},
		{
			geometry: {
				type: "point",
				x: -77,
				y: 35
			},
			attributes: {
				ObjectID: 2,
				DepArpt: "今晚月色真没",
				FltId: "风儿也很喧嚣呢"
			}
		}
	];

获得到数据之后就可以搞一个图层

var layerFrus = new FeatureLayer({
		source: features,   //上面的数据来源
		objectIdField: "OBJECTID",	//ID
		fields: [{
				name: "OBJECTID",	//属性值
				type: "oid"
			},
			{
				name: "DepArpt",	//属性值
				type: "string"		//类型
			}, {
				name: "FltId",		//同上
				type: "string"
			}
		]
		renderer: {
			type: "simple",
			symbol: {
				type: "picture-marker",	//样式 这里可以用图片也可以用图标，或者干脆就一个点
				url:"img/site.png",
				// color: "#7A003C",
				// text: "\ue661",
				// font: {
				// 	size: 20,
				// 	family: "CalciteWebCoreIcons"
				// }
			}
		}
	});
	map.add(layerFrus);  //添加进入map

最后设置一下模板

var popupTemplate = {
// autocasts as new PopupTemplate()
	title: " {DepArpt}",
	// outFields: ["*"],
	content: " {ObjectID}{DepArpt}{FltId}",
};
layerFrus.popupTemplate = popupTemplate;

最后展示的效果
在这里插入图片描述

另外模板里面可以用html，或者使用自带的表格样式，具体的可以参考官网api，然后里面的弹窗就可以通用html进行代替，对应的参数就是 {参数} 这样就行了，如果有什么问题，也可以评论活私信

最后全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
		<title>(＾－＾)V</title>

		<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />

		<script src="https://js.arcgis.com/4.14/"></script>

		<style>
			html,
			body,
			#viewDiv {
				padding: 0;
				margin: 0;
				height: 100%;
				width: 100%;
			}
		</style>

		<script>
			require([
				"esri/Map",
				"esri/PopupTemplate",
				"esri/views/MapView",
				"esri/Graphic",
				"esri/geometry/Point",
				"esri/layers/FeatureLayer",
				"esri/layers/support/Field"
			], function(Map, PopupTemplate, MapView, Graphic, Point, FeatureLayer, Field) {
				var jsonArray = [
					[-117.19, 34.05],
					[-87.63, 41.88],
					[-71.06, 42.36]
				]; 
				const map = new Map({
					basemap: "gray"
				});

				const view = new MapView({
					center: [-97.63, 38.34],
					container: "viewDiv",
					map: map,
					zoom: 4
				});  
				var features = [{
						geometry: {
							type: "point",
							x: -100,
							y: 38,
							text: "\ue61d", // esri-icon-map-pin
						},
						attributes: {
							ObjectID: 1,
							DepArpt: "啊天气真好",
							FltId: "是的呢"
						}
					},
					{
						geometry: {
							type: "point",
							x: -77,
							y: 35
						},
						attributes: {
							ObjectID: 2,
							DepArpt: "今晚月色真没",
							FltId: "风儿也很喧嚣呢"
						}
					},
					{
						geometry: {
							type: "point",
							x: -120,
							y: 40
						},
						attributes: {
							ObjectID: 3,
							DepArpt: "火遁，豪火球之术", 
							FltId: "水遁，大瀑布之术"
						}
					}
				]; 
				var layerFrus = new FeatureLayer({
					source: features, // autocast as a Collection of new Graphic() 
					objectIdField: "OBJECTID",
					fields: [{
							name: "OBJECTID",
							type: "oid"
						},
						{
							name: "DepArpt",
							type: "string"
						}, {
							name: "FltId",
							type: "string"
						}
					],
					popupTemplate: {
						content: "{url}'>"
					},
					renderer: {
						type: "simple",
						symbol: {
							type: "picture-marker",
							url:"img/site.png",
							// color: "#7A003C",
							// text: "\ue661",
							// font: {
							// 	size: 20,
							// 	family: "CalciteWebCoreIcons"
							// }
						}
					}
				});
				map.add(layerFrus);  
				var popupTemplate = {
					// autocasts as new PopupTemplate()
					title: " {DepArpt}",
					// outFields: ["*"],
					content: " {ObjectID}{DepArpt}{FltId}",
				};

				layerFrus.popupTemplate = popupTemplate;
 
			});
		</script>
	</head>

	<body>
		<div id="viewDiv"></div>
	</body>
</html>