admin管理员组文章数量:1650772
上一篇文章生成等值线的末尾,说到仅仅是生成等值线或许还不够,还需要显示线所代表的数值?
在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/mmp591/article/details/78723018
https://developers.arcgis/javascript/3/jssamples/layers_label.html
版权声明:本文标题:ArcGIS API for JS 不依赖地图服务创建FeatureLayer并设置Label 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729532537a1204991.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论