arcgis for js 3.X 用小照片做图标

如图所示，勾选相关选项，在地图上就显示这两小张图片，点击则出现明细大图。

咋整？

首先，这两张小图片不是地图的一部分，也不是从地图服务器里请求回来的，是客户端自己画的，所以，它们位于FeatureLayer。

其次，这两张小图不一样，它们处于不同的FeatureLayer。也就是说，一张图层只能显示一种图标。

具体代码该咋写？

图一
图一的代码结构很简单，如果选项”采集照片“点击选中，则检查是否已生成相应FeatureLayer，没有则创建之。

如何创建呢？
首先，FleatureLayer里面有许多选项和字段，要先定义。因为FeatureLayer是在客户端描绘生成的。在我们平常使用的FeatureLayer中，有许多是由地图服务提供的，但地图服务提供的也是定义和数据，并非像切片图层和动态图层那样，传给客户端的是图片。

其次是绑定一些事件。比如图层成功添加的后续处理。我的思路是图标的样式（也就是那两张小图片）并非预先设定，而是根据后台获得的数据来动态生成。所以，图层可以先生成并添加，添加成功后再向后台请求数据，并绘制图标。

上代码。这是前端代码：

//采集照片
(function (map, iconUrlHead, requestUrl) {
	var fls = [];
	$("#chePhoto").click(function () {
		var bv = document.getElementById("chePhoto").checked;

		if (bv == true && fls.length == 0) {
			/* 动态构造要素图层（定义部分） begin */
			var featureCollection = {
				"layerDefinition": null,
				"featureSet": {
					"features": [],
					"geometryType": "esriGeometryPoint"
				}
			};
			featureCollection.layerDefinition = {
				"geometryType": "esriGeometryPoint",
				"objectIdField": "ObjectID",
				"drawingInfo": {
					"renderer": {
						"type": "simple",
						"symbol": {
							"type": "esriPMS",
							"url": null,
							"contentType": "image/png",
							"width": 52.5,//点，这里 1P = 0.75 * 1PX。arcgis的图标不是按像素来画的，而是点。
							"height": 37.5
						}
					}
				},
				"fields": [{
					"name": "ObjectID",
					"alias": "ObjectID",
					"type": "esriFieldTypeOID"
				}, {
					"name": "description",
					"alias": "Description",
					"type": "esriFieldTypeString"
				}, {
					"name": "title",
					"alias": "Title",
					"type": "esriFieldTypeString"
				}]
			};
			/* 动态构造要素图层（定义部分） end */

			//弹窗
			var popupTemplate = new PopupTemplate({
				title: "{title}",
				description: "{description}"
			});

			function getFL(typeId) {
				var iconUrl = iconUrlHead + "map_icon" + typeId + ".png";//根据参数来构造图标
				featureCollection.layerDefinition.drawingInfo.renderer.symbol.url = iconUrl;
				//创建FeatureLayer
				var featureLayer = new FeatureLayer(featureCollection, {
					id: "photolayer" + typeId,
					infoTemplate: popupTemplate,
					visible: false
				});
				featureLayer.on("click", function (evt) {
					map.infoWindow.setFeatures([evt.graphic]);
					map.infoWindow.resize(400, 300);
				});
				return featureLayer;
			}
			fls.push(getFL("01"));//创建id=photolayer01的图层
			fls.push(getFL("02"));//创建id=photolayer02的图层
			
			//绑定 “图层添加成功” 事件
			map.on("layers-add-result", function (results) {
				function requestSucceeded(response, io) {//获取后台数据成功。获取过程是异步的，见下面：requestHandle.then(requestSucceeded, requestFailed);
					var features = {};
					array.forEach(response.items, function (item) {
						var attr = {};
						attr["description"] = item.description;
						attr["title"] = item.title ? item.title : "采集照片";
						var geometry = new Point(item);//new Point(json);json object内容自定义，但必须有坐标值，名称为x、y或longitude、latitude皆可。
						var graphic = new Graphic(geometry);
						graphic.setAttributes(attr);
						if (typeof features[item.type] == 'undefined') features[item.type] = [];
						features[item.type].push(graphic);
					});

					results.layers.forEach(function (resultitem) {
						var id = resultitem.layer.id.substring("photolayer".length);//图层id=photolayer***
						resultitem.layer.applyEdits(features[id], null, null);
					});
				}
				function requestFailed(error) {
				}

				var requestHandle = esriRequest({
					url: requestUrl,
					callbackParamName: "jsoncallback"
				});
				//向后台（不是地图服务）请求数据是一个异步的过程
				requestHandle.then(requestSucceeded, requestFailed);
			});

			map.addLayers(fls);
		}

		fls.forEach(function (fl) {
			fl.setVisibility(bv);
		});
	});
})(map,
	"@Url.StaticFile("~/Content/images/map/")",
	"@Url.StaticFile("~/Map/Home/GetPhotos")");

featureCollection.layerDefinition.drawingInfo.renderer.symbol.url =“图标地址”;
featureCollection.layerDefinition是图层定义。图层定义可以用在FeatureLayer的构造函数里，也可以如上面这句，图层生成后再修改。

后台代码：

        public ContentResult GetPhotos()
        {
            return new ContentResult
            {
                ContentEncoding = Encoding.GetEncoding("utf-8"),
                ContentType = "text/plain;charset=UTF-8",
                //一个item代表一种图标；图标数据自定义，但必须有坐标值，名称为x、y或longitude、latitude皆可
                Content = $@"{{
""title"": ""近期采集的照片"",
""items"": [
    {{
        ""title"": ""海岛一"",
	    ""description"": ""<p><img src=\""{System.Web.HttpContext.Current.Request.ApplicationPath.Replace("/",@"\/")}\/Content\/Images\/Map\/hd1.jpg\"" alt=\""海岛2\"" \/><\/p>"",
        ""latitude"" : ""28.163280"",
        ""longitude"" : ""121.598709"",
        ""type"":""01""
    }},
    {{
        ""title"": ""海岛二"",
	    ""description"": ""<p><img src=\""{System.Web.HttpContext.Current.Request.ApplicationPath.Replace("/", @"\/")}\/Content\/Images\/Map\/hd1.jpg\"" alt=\""海岛2\"" \/><\/p>"",
        ""latitude"" : ""29.163280"",
        ""longitude"" : ""121.598709"",
        ""type"":""01""
    }},
    {{
        ""title"": ""珊瑚礁"",
	    ""description"": ""<p><img src=\""{System.Web.HttpContext.Current.Request.ApplicationPath.Replace("/", @"\/")}\/Content\/Images\/Map\/hd2.jpg\"" alt=\""海岛2\"" \/><\/p>"",
        ""latitude"" : ""29.609811"",
        ""longitude"" : ""122.341567"",
        ""type"":""02""
    }}]
}}"
            };
        }