let layerUrl =
"http://xxx.xxx.xx.xx/server/rest/services/xxxx/xxxx/MapServer/194";//服务地址
let queryTask = new this.esriModules.QueryTask(layerUrl);//创建请求任务
let query = new this.esriModules.Query();//为请求添加条件
query.outFields = ["*"];//请求字段设置为所有
query.returnGeometry = true;//返回几何对象信息
//query.spatialRelationship = "contains";//拓扑关系
query.where = "1=1";//筛选条件
query.num = 100;//请求数据的条数
//还可以添加其他一些条件，比如添加几何范围返回和几何范围是上面设置的拓扑关系的数据
const popupTemplate = new this.esriModules.PopupTemplate({//设置弹出框模板
title: "地块信息",//标题
outFields: ["*"],//传给弹出框的字段
content: [//内容，下面的每一个对象就是一行
{
type: "fields",
fieldInfos: [
{
fieldName: "DLMC",//行前半段标题
label: "地类名称",//行后半段内容
},
,
],
},
],
});
queryTask.execute(query).then((res) => {//执行请求返回的是json数据
let graphicList = res.features.map((feature) => {//解析json数据返回一系列带属性的graphic
let graphic = new this.esriModules.Graphic(feature.geometry);
graphic.attributes = feature.attributes;
return graphic;
});
const featureLayer = new this.esriModules.FeatureLayer({//根据上面构造的graphiclist生成FeatureLayer
source: graphicList,//地理数据资源
fields: [//字段名称，这里设置了的字段才能在弹出模板上面使用，这里的字段要根据请求返回的字段进行设置，类型和名称等必须一致
{
name: "OBJECTID_1",
alias: "OBJECTID",
type: "oid",
},
{
name: "DLMC",
alias: "地类名称",
type: "string",
},
],
popupEnable: true,
popupTemplate: popupTemplate,//设置弹出的模板
//objectIdField: "OBJECTID_1",
//geometryType: "polygon",
renderer: {//图形样式
type: "simple",
symbol: {
type: "simple-fill",
color: [255, 0, 255, 1],
style: "solid",
outline: {
color: [255, 255, 255, 1],
2,
},
},
},
});
this.map.add(featureLayer);//将图层添加到map中
featureLayer.when(() => {
let point = new this.esriModules.Point({//获取中心点
x: featureLayer.fullExtent.center.x,
y: featureLayer.fullExtent.center.y,
spatialReference: this.view.spatialReference,
});
let extent = new this.esriModules.Extent({//获取范围
xmin: featureLayer.fullExtent.xmin,
ymin: featureLayer.fullExtent.ymin,
xmax: featureLayer.fullExtent.xmax,
ymax: featureLayer.fullExtent.ymax,
spatialReference: this.view.spatialReference,
});
this.view.goTo({//移动地图视点
target: extent, // target:point
//zoom:13
});
});