ArcGIS API for JS 不依赖地图服务创建FeatureLayer并设置Label

最新推荐文章于 2024-06-07 09:38:08 发布

rrrrroy_Ha

最新推荐文章于 2024-06-07 09:38:08 发布

阅读量2.5k

点赞数

分类专栏： webgis 文章标签：创建FeatureLayer gisLabel

本文链接：https://blog.csdn.net/rrrrroy_Ha/article/details/79536234

版权

webgis 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

上一篇文章生成等值线的末尾，说到仅仅是生成等值线或许还不够，还需要显示线所代表的数值？

在ArcMap中，可以通过图层属性的Label标签设置标注属性和标注位置等，在API中也有对应，即“esri/layers/LabelClass”，但是只有FeatureLayer可以设置Label属性，因此对于动态生成的矢量数据，需要跳过服务创建FeatureLayer。

如何不依赖服务创建FeatureLayer可以点击这里。

通过查看上面的文章，我们可以得出，要创建FeatureLayer，需要一个图层定义描述layerDefinition和要素集数据源featureSet。

layerDefinition需要指定geometryType和fields，如下：

var layerDefinition = {
                            "geometryType": "esriGeometryPolyline",
                            "fields": [
                                {name: "OBJECTID",alias: "OBJECTID",type: "esriFieldTypeOID"},
                                {name: "Id",alias:"Id",type: "esriFieldTypeInteger"},
                                {name: "Contour",alias: "Contour",type: "esriFieldTypeDouble"},
                                {name: "Shape_Length",alias: "Shape_Length",type: "esriFieldTypeDouble"}
                            ]
                        }

fields的内容可以自定义，但需要有一个主键类型即esriFieldTypeOID类型，这里我直接仿照等值线GP服务输出格式定义的，原GP服务输出格式如下：

featureSet则参考“esri/tasks/FeatureSet”，这里就不细说了，直接上示例：

var jsonStr = {
           "displayFieldName": "",
           "fieldAliases": {
                 "OBJECTID": "OBJECTID",
                 "Id": "Id",
                 "Contour": "Contour",
                 "Shape_Length": "Shape_Length"
           },
           "geometryType": "esriGeometryPolyline",
           "spatialReference": baseSpatialRef,
           "fields": [
                 {name: "OBJECTID",alias: "OBJECTID",type: "esriFieldTypeOID"},
                 {name: "Id",alias:"Id",type: "esriFieldTypeInteger"},
                 {name: "Contour",alias: "Contour",type: "esriFieldTypeDouble"},
                 {name: "Shape_Length",alias: "Shape_Length",type: "esriFieldTypeDouble"}
           ],
           "features": featureArray
};
var featureSet = new FeatureSet(jsonStr);

然后组装FeatureLayer就可以了：

var featureCollection = {
      layerDefinition: layerDefinition,
      featureSet: featuresSet
};
var featureLayer = new FeatureLayer(featureCollection,{
      showLabels: true,
      id:"test",
      outFields: ["*"]
});

有了要素图层，标注就很简单了，下面提供全部代码：

require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/geometry/Point",
"esri/SpatialReference",

"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/TextSymbol",
"esri/layers/LabelClass",
"esri/renderers/SimpleRenderer",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/symbols/SimpleLineSymbol",
"esri/layers/GraphicsLayer",
"esri/graphic",
"esri/tasks/FeatureSet",
"esri/geometry/geometryEngine",
"esri/tasks/Geoprocessor",
"dojo/domReady!"],
function(Map, ArcGISTiledMapServiceLayer,ArcGISDynamicMapServiceLayer, Point, SpatialReference,
		 SimpleMarkerSymbol,TextSymbol, LabelClass,SimpleRenderer,FeatureLayer,Color,SimpleLineSymbol,GraphicsLayer,Graphic,FeatureSet,geometryEngine,Geoprocessor) {
	var map = new Map("map", {
//                        center: new Point(1.3091608700115489E7, 4273624.108445918, new SpatialReference({ wkid: 3857 })),
		autoResize:true,
		sliderStyle: "small",
		logo: false,
		showLabels : true
	});
	var baseSpatialRef = new SpatialReference({"wkt":'GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["degree",0.0174532925199433]]'});

	var tiled = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/sishui/sishuifeature/MapServer");
//  map.addLayer(tiled);


	var gp = new Geoprocessor("http://localhost:6080/arcgis/rest/services/test/dengzhixianModel/GPServer/dengzhixian2");

	var graphicLayer = new GraphicsLayer({id:"dian"});
	var sssym = new SimpleMarkerSymbol({
		"color": [255,255,255,64],
		"size": 12,
		"angle": -30,
		"xoffset": 0,
		"yoffset": 0,
		"type": "esriSMS",
		"style": "esriSMSCircle",
		"outline": {
			"color": [0,0,0,255],
			"width": 1,
			"type": "esriSLS",
			"style": "esriSLSSolid"
		}
	});
	var features = [];
	var graphic1 = new Graphic(new Point(117.320358,35.725506,baseSpatialRef),sssym,{"zvalue":10});
	var graphic2 = new Graphic(new Point(117.251434,35.699341,baseSpatialRef),sssym,{"zvalue":30});
	var graphic3 = new Graphic(new Point(117.522662,35.618930,baseSpatialRef),sssym,{"zvalue":400});
	var graphic4 = new Graphic(new Point(117.275685,35.564684,baseSpatialRef),sssym,{"zvalue":28});
	var graphic5 = new Graphic(new Point(117.447444,35.755972,baseSpatialRef),sssym,{"zvalue":70});
	var graphic6 = new Graphic(new Point(117.155146,35.627075,baseSpatialRef),sssym,{"zvalue":100});
	var graphic7 = new Graphic(new Point(117.404478,35.651812,baseSpatialRef),sssym,{"zvalue":0});
	var graphic8 = new Graphic(new Point(117.105020,35.770945,baseSpatialRef),sssym,{"zvalue":180});

	//显示数据源点，用于对比生成效果
	graphicLayer.add(graphic1);
	graphicLayer.add(graphic2);
	graphicLayer.add(graphic3);
	graphicLayer.add(graphic4);
	graphicLayer.add(graphic5);
	graphicLayer.add(graphic6);
	graphicLayer.add(graphic7);
	graphicLayer.add(graphic8);
	map.addLayer(graphicLayer);

	//组装GP服务参数
	features.push(graphic1);
	features.push(graphic2);
	features.push(graphic3);
	features.push(graphic4);
	features.push(graphic5);
	features.push(graphic6);
	features.push(graphic7);
	features.push(graphic8);

	var featureset = new FeatureSet();
	featureset.features = features;
	var para = {
		inputpoints:featureset,
		zvalue:"zvalue"
//      clipfeature:"xian1"
	}

	gp.submitJob(para,function(result){
		debugger;
		
		var jobId = result.jobId;
		var status = result.jobStatus;
		if(status == esri.tasks.JobInfo.STATUS_SUCCEEDED) {
			gp.getResultData(jobId, "output", function(jobInfo){
				var featureArray = [];
				var features = jobInfo.value.features;
				dojo.forEach(features,function(graphic){
					graphic.setSymbol(sls);

					var graphicCopy = new Graphic(graphic.geometry,"",graphic.attributes);//复制GP服务输出结果，这里不能直接使用graphic，否则geometry为空
					featureArray.push(graphicCopy);
				});

				//不依赖地图服务创建FeatureLayer
				var layerDefinition = {
					"geometryType": "esriGeometryPolyline",
					"fields": [
						{name: "OBJECTID",alias: "OBJECTID",type: "esriFieldTypeOID"},
						{name: "Id",alias:"Id",type: "esriFieldTypeInteger"},
						{name: "Contour",alias: "Contour",type: "esriFieldTypeDouble"},
						{name: "Shape_Length",alias: "Shape_Length",type: "esriFieldTypeDouble"}
					]
				}
				var jsonStr = {
					"displayFieldName": "",
					"fieldAliases": {
						"OBJECTID": "OBJECTID",
						"Id": "Id",
						"Contour": "Contour",
						"Shape_Length": "Shape_Length"
					},
					"geometryType": "esriGeometryPolyline",
					"spatialReference": baseSpatialRef,
					"fields": [
						{name: "OBJECTID",alias: "OBJECTID",type: "esriFieldTypeOID"},
						{name: "Id",alias:"Id",type: "esriFieldTypeInteger"},
						{name: "Contour",alias: "Contour",type: "esriFieldTypeDouble"},
						{name: "Shape_Length",alias: "Shape_Length",type: "esriFieldTypeDouble"}
					],
					"features": featureArray
				};
				var featuresSet = new FeatureSet(jsonStr);
				var featureCollection = {
					layerDefinition: layerDefinition,
					featureSet: featuresSet
				};
				var featureLayer = new FeatureLayer(featureCollection,{
					showLabels: true,
					id:"test",
					outFields: ["*"]
				});
				
				//添加渲染
				var sls = new SimpleLineSymbol(
					SimpleLineSymbol.STYLE_DASH,
					new Color([255,0,0]),
					3
				);
				var renderer = new SimpleRenderer(sls);
				featureLayer.setRenderer(renderer);

				//设置文字标注属性
				var statesLabel = new TextSymbol().setColor(new Color("#666633"));
				statesLabel.font.setSize("14pt");
				statesLabel.font.setFamily("arial");

				//设置标注属性
				//create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)
				var labelClass = new LabelClass({
					labelExpressionInfo: {
						"value": "{Contour}"
					},
					useCodedValues: false,
					labelPlacement: "center-along"
				});
				labelClass.symbol = statesLabel; // symbol also can be set in LabelClass' json
				featureLayer.setLabelingInfo([ labelClass ]);
				
				map.addLayer(featureLayer);
			});
		}
	});
}
);

输出效果展示：

参考地址：

http://blog.csdn.net/mmp591/article/details/78723018

https://developers.arcgis.com/javascript/3/jssamples/layers_label.html

rrrrroy_Ha

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API for JS 不依赖地图服务创建FeatureLayer并设置Label

上一篇文章生成等值线的末尾，说到仅仅是生成等值线或许还不够，还需要显示线所代表的数值？在ArcMap中，可以通过图层属性的Label标签设置标注属性和标注位置等，在API中也有对应，即“esri/layers/LabelClass”，但是只有FeatureLayer可以设置Label属性，因此对于动态生成的矢量数据，需要跳过服务创建FeatureLayer。如何不依赖服务创建FeatureLaye...
复制链接

扫一扫