ArcGIS API for JS 之 FeatureLayer(二)popupTemplate的使用

ArcGIS 专栏收录该内容
3 篇文章 0 订阅

ArcGIS API for JS 之 FeatureLayer(二)popupTemplate的使用


1.Popup与PopupTemplate

Popup(弹窗)是View(视图类)的一个属性。每一个View的实例都有一个popup,但是popup的表现形式和样式由每个layer或者Graphic的popupTemplate决定。如果没有设置popupTemplate,则popup会根据默认样式显示。

因此,Popup服务于View,PopupTemplate服务于Layer和Graphic。

相较于Popup来说,PopupTemplate属性字段比较少,但可定制程度更高:

以弹框的主要部分title和content来看,Popup的title和content类型单一,主要取string类型,而PopupTemplate的title、content还可以是一个方法,content甚至可以是Object[],这就使PopupTemplate可以更灵活的表达我们想展示的内容。

2.创建一个图层的popupTemplate

this.myFeatureLayer.popupTemplate = this.myFeatureLayer.createPopupTemplate();
this.myFeatureLayer.popupTemplate = {
	title: "详情",
	content:"……",
	overwriteActions: true,
	actions:[{
		title: "巡查记录",
		id: 'PatrolRecord'
	}]
};

3.标题设置(PopupTemplate.)

可以采用以下方式定义标题模板:

  • String:可以采用简单的字符串,也可加入要素的某些属性字段,下面代码段中的{NAME}就是图层的字段名。
let popupTemplate = {
 title: "Population in {NAME} County",
 outFields: ["*"]
};
  • Function:如果使用函数,当单击feature时,该feature将作为参数传递给函数,函数内部可以访问其图形和属性,函数执行并返回一个值作为显示在弹出模板中的标题。
let popupTemplate = {
 title: countyName,
 outFields: ["*"]
};
function countyName(feature) {
  return feature.graphic.layer.title + " : {NAME}";
}
  • Promise:使用Promise接收异步请求的结果作为title。
let popupTemplate = {
 title: function(event) {
    return locatorTask
      .locationToAddress({
        location: event.graphic.geometry
      })
      .then(function(response) {
        // This value must be a string
        return response.address;
      });
  },
 outFields: ["*"]
};

4.内容设置(PopupTemplate.content)

content是PopupTemplate的主体内容,除了像title一样可以为String、Function、Promise类型之外,最常用的形式是构造一个对象数组content:[{obj 1},{obj 2},…,{obj n}]。

每个对象有两个属性,type和**Infos(fieldInfos、mediaInfos……等),arcgis支持的type有text、media、fields、attachments、custom,详细来看:

  • text
    最简单的文本形式的内容。
layer.popupTemplate = {
  content: [{
    type: "text", 
    text: "The {expression/predominance-tree} species occurs more often"
      + " than other tree species in the area."
  }]
};
  • fields(最常用)
    在内容中可以显示数据中已有的字段。
layer.popupTemplate = {
  title: "Population in {NAME}",
  content: [{
    type: "fields", 
    fieldInfos: [{
      fieldName: "POP_2015",//字段名
      label: "Total population (2015)",//在content中显示的标签
      format: {
        digitSeparator: true
      }//数据格式
    }, {
      fieldName: "expression/per-asian"
    }]
  }]
};

field类型的效果大致如下图所示,会以默认形式的表格展示。
在这里插入图片描述

  • media
    可用来显示图表、照片媒体文件等。
layer.popupTemplate.content = [{
  type: "media",
  mediaInfos: [{
    title: "<b>Count by type</b>",
    type: "pie-chart", //饼状图
    value: {
      fields: ["relationships/0/Point_Count_COMMON"],
      normalizeField: null,
      tooltipField: "relationships/0/COMMON"
    }
  }, {
    title: "<b>Mexican Fan Palm</b>",
    type: "image", //图像
    caption: "tree species",
    value: {
      sourceURL: "https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg"
    }
  }]
}];

media类型的效果大致如下图所示:
在这里插入图片描述

5.动作按钮设置(PopupTemplate.actions)

popoupTemplate中可以设置一些动作按钮,以完成想要的交互操作。默认自带一个zoomTo按钮,可以通过设置overwriteActions = true将其去除掉。具体实现方法是,在actions数组中放入obj类型的按钮,并为按钮设置响应事件。

首先定义一个action的obj:

var zoomOutAction = {
  title: "Zoom out",//页面显示的按钮名字
  id: "zoom-out",//按钮id
  className: "esri-icon-zoom-out-magnifying-glass"
};

将这个action放入PopupTemplate.actions数组中:

popupTemplate = {
  content: [{
    ……
  }],
  actions:[zoomOutAction],
  overwriteActions:true
};

也可以这样写:

popupTemplate.actions.push(zoomOutAction);
layer.popupTemplate = popupTemplate;

然后在popup的"trigger-action"监听中根据action的id为它定义方法:

function zoomOut() {
  view.goTo({
    center: view.center,
    zoom: view.zoom - 2
  });
}
view.popup.on("trigger-action", function(event){
  if(event.action.id === "zoom-out"){
    zoomOut();
  }
});

至此,一个popupTemplate就定义好啦,点击图层要素,就可以在popup中展示自己定义的内容啦。

byebye啦~

  • 1
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值