arcgis api for js 4.x弹出框popuptemplate

最新推荐文章于 2023-05-25 14:53:52 发布
最新推荐文章于 2023-05-25 14:53:52 发布
阅读量1.8k 收藏 4
点赞数 2
分类专栏： ArcGIS API For JavaScript 文章标签： arcgis popupTemplate
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ANNENBERG/article/details/110437789
版权

 

案例一

let illigalMessage = {
      title: "违建核查",
      id: 'illigalMessage',
      image: './src/assets/img/edit.png'
    }
let illigalWordMessage = {
      title: "图斑整治情况",
      id: 'illigalWordMessage',
      image: './src/assets/img/illigalWordMessage.png'
    }
let historyMessage = {
      title: "批转历史记录",
      id: 'history',
      image: './src/assets/img/history.png'
    }
// 以上为按钮编辑
let template = {
      title: '违建信息',
      content: [{
          type: 'fields',
          fieldInfos: [
            {
              fieldName: 'ZJMC',
              label: '所属镇'
            },
            {
              fieldName: 'TBBM',
              label: '图斑编号'
            },
            {
              fieldName: 'QQZT',
              label: '建筑状态'
            },
            {
              fieldName: 'XZCMC',
              label: '所属村'
            },
            {
              fieldName: 'ZDMJ',
              label: '面积',
              format: {
                places: 2,
                digitSeparator: true
              }
            },
            {
              fieldName: 'expression/illigalExpression'
            }
          ]
      }],
      expressionInfos: [{
        name: "illigalExpression",
        title: "是否核查",
        expression: `
          return Decode($feature.STATE,1,"已核查",0,"未核查","更新状态请刷新")
        `
      }],
      actions: [illigalMessage, illigalWordMessage, historyMessage]
    }

先编辑完按钮，然后加入popuptemplate的action中就行。

使用：

mainMap.view.popup.on("trigger-action",async function (event) {
    if (event.action.id === "illigalMessage") {
        // 业务代码
    }
 
}

监听trigger-action变化就行。

三、如果想把原来的zoom to按钮给去除，只需要加上 featureLayer.popupTemplate.overwriteActions = true

案例二 

  1. <head>

  2. <meta charset="UTF-8">

  3. <title>要素服务</title>

  4. <link type="text/css" rel="stylesheet" href="http://localhost/arcgis/esri/css/main.css"/>

  5. <link type="text/css" rel="stylesheet" href="css/index.css"/>

  6. <script>

  7. //高亮显示只能在WebGL渲染时才能生效，该功能目前处于beta阶段

  8. var dojoConfig = {

  9. has: {

  10. "esri-featurelayer-webgl": 1

  11. }

  12. }

  13. </script>

  14. <script src="http://localhost/arcgis/"></script>

  15. </head>

  16. <body>

  17. <div id="viewDiv"></div>

  18.  

  19. <script>

  20. require(["esri/Map", "esri/views/MapView", "esri/config", "esri/layers/FeatureLayer", "dojo/domReady"], function (Map, MapView, esriConfig, FeatureLayer) {

  21. esriConfig.request.corsEnabledServers.push("localhost:6443");//设置地图服务器已允许跨域

  22. esriConfig.request.corsEnabledServers.push("localhost:63342");

  23. var map = new Map({

  24. // basemap: "streets"//ESRI提供的底 图

  25. basemap: "dark-gray"

  26. });

  27. //二维视图，并初始化视图位置

  28. var view = new MapView({

  29. container: "viewDiv",

  30. map: map,

  31. extent: {

  32. xmin: 111.27418783887504,

  33. ymin: 27.65361115167269,

  34. xmax: 119.18589568326072,

  35. ymax: 30.663629324047992,

  36. spatialReference: 4326

  37. }

  38. });

  39. //乡镇级属性模版

  40. var popupTemplate = {

  41. title: "乡镇数据",

  42. content: [{

  43. type: "fields",

  44. fieldInfos: [{

  45. fieldName: "name",

  46. label: "行政单位名称",

  47. format: {

  48. places: 0,

  49. digitSeparator: true

  50. }

  51. }, {

  52. fieldName: "code",

  53. label: "行政单位代码",

  54. format: {

  55. places: 0,

  56. digitSeparator: true

  57. }

  58. }, {

  59. fieldName: "supercode",

  60. label: "上级行政单位代码",

  61. format: {

  62. places: 0,

  63. digitSeparator: true

  64. }

  65. }, {

  66. fieldName: "level",

  67. label: "行政单位等级",

  68. format: {

  69. places: 0,

  70. digitSeparator: true

  71. }

  72. }]

  73. }]

  74. };

  75. var town = new FeatureLayer({

  76. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/0",

  77. outFields: ["*"],

  78. popupTemplate: popupTemplate

  79. });//乡镇级数据

  80. popupTemplate.title = "县级数据";

  81. var county = new FeatureLayer({

  82. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/1",

  83. outFields: ["*"],

  84. popupTemplate: popupTemplate

  85. });//县级数据

  86. popupTemplate.title = "市级数据";

  87. var city = new FeatureLayer({

  88. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/2",

  89. outFields: ["*"],

  90. popupTemplate: popupTemplate

  91. });//市级数据

  92. popupTemplate.title = "省级数据";

  93. var province = new FeatureLayer({

  94. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/3",

  95. outFields: ["*"],

  96. popupTemplate: popupTemplate

  97. });//省级数据

  98. map.add(town);

  99. map.add(county);

  100. map.add(city);

  101. map.add(province);

  102. //点击视窗进行碰撞检测，检测点击的目标graphic

  103. view.on("click", function (evt) {

  104. view.hitTest(evt).then(function (response) {

  105. var result = response.results[0];

  106. if (result && result.graphic) {

  107. console.log(result);

  108. var graphic = result.graphic;

  109. //自定义高亮

  110. //这里的几何图形是面状，配置graphic的symbol为fillSymbol

  111. graphic.symbol = {

  112. type: "simple-fill",

  113. color: "red",

  114. outline: {

  115. color: [128, 128, 128, 0.5],

  116. width: "0.5px"

  117. }

  118. };

  119. view.graphics.removeAll();//清除上一次点击目标

  120. view.graphics.add(graphic);//添加新的点击目标

  121. }

  122. })

  123. });

  124. })

  125. </script>

  126. </body>

  127. </html>

二维模式效果图：

三维模式代码：

 

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>要素服务</title>

  6. <link type="text/css" rel="stylesheet" href="http://localhost/arcgis/esri/css/main.css"/>

  7. <link type="text/css" rel="stylesheet" href="css/index.css"/>

  8. <script src="http://localhost/arcgis/init.js"></script>

  9. </head>

  10. <body>

  11. <div id="viewDiv"></div>

  12. <script>

  13. require(["esri/Map", "esri/views/SceneView", "esri/config", "esri/layers/FeatureLayer", "dojo/domReady"], function (Map, SceneView, esriConfig, FeatureLayer) {

  14. esriConfig.request.corsEnabledServers.push("localhost:6443");//设置地图服务器已允许跨域

  15. esriConfig.request.corsEnabledServers.push("localhost:63342");

  16. var map = new Map({

  17. basemap: "dark-gray"

  18. });

  19. //二维视图，并初始化视图位置

  20. var view = new SceneView({

  21. container: "viewDiv",

  22. map: map,

  23. extent: {

  24. xmin: 111.27418783887504,

  25. ymin: 27.65361115167269,

  26. xmax: 119.18589568326072,

  27. ymax: 30.663629324047992,

  28. spatialReference: 4326

  29. }

  30. });

  31. //乡镇级属性模版

  32. var popupTemplate = {

  33. title: "乡镇数据",

  34. content: [{

  35. type: "fields",

  36. fieldInfos: [{

  37. fieldName: "name",

  38. label: "行政单位名称",

  39. format: {

  40. places: 0,

  41. digitSeparator: true

  42. }

  43. }, {

  44. fieldName: "code",

  45. label: "行政单位代码",

  46. format: {

  47. places: 0,

  48. digitSeparator: true

  49. }

  50. }, {

  51. fieldName: "supercode",

  52. label: "上级行政单位代码",

  53. format: {

  54. places: 0,

  55. digitSeparator: true

  56. }

  57. }, {

  58. fieldName: "level",

  59. label: "行政单位等级",

  60. format: {

  61. places: 0,

  62. digitSeparator: true

  63. }

  64. }]

  65. }]

  66. };

  67. var town = new FeatureLayer({

  68. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/0",

  69. outFields: ["*"],

  70. popupTemplate: popupTemplate

  71. });//乡镇级数据

  72. popupTemplate.title = "县级数据";

  73. var county = new FeatureLayer({

  74. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/1",

  75. outFields: ["*"],

  76. popupTemplate: popupTemplate

  77. });//县级数据

  78. popupTemplate.title = "市级数据";

  79. var city = new FeatureLayer({

  80. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/2",

  81. outFields: ["*"],

  82. popupTemplate: popupTemplate

  83. });//市级数据

  84. popupTemplate.title = "省级数据";

  85. var province = new FeatureLayer({

  86. url: "https://localhost:6443/arcgis/rest/services/jiangxi/FeatureServer/3",

  87. outFields: ["*"],

  88. popupTemplate: popupTemplate

  89. });//省级数据

  90. map.add(town);

  91. map.add(county);

  92. map.add(city);

  93. map.add(province);

  94. })

  95. </script>

  96. </body>

  97. </html>

三维模式效果图：

ANNENBERG
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ArcGIS API for JavaScript v3.x与v4.x最新版本api与sdk开发包资源下载
06-08
提供ArcGIS API for JavaScript v3.x与v4.x最新的api与sdk开发包资源下载，2021.06.08最新版本为v3.36及v4.19，分享文件包含以往旧的资源包，因CSDN上传限制，现将资源包整合至天翼云（下载不会限速），以后将在天翼云持续更新，有需要的话建议在这里进行下载。
ArcGIS for JS---PopupTemplate for Feature
adminHD的博客
07-29 665
本文主要介绍如何获取弹窗内容里面的动态数据，同时也简单的展示如何设置地图弹窗
arcgis for js 修改infowindow样式
shileimohan的专栏
08-17 3360
function popup() {     $(".esriPopup .titlePane").css({ 'background-color':'rgba(64,64,64,0.8)'     })     $(".esriPopup .contentPane").css({ 'background-color':'rgba(64,64,64,0.8)', 'color':'#
arcgis api for javascript 4.x 聚合
07-23
实现4.x在三维上的点的聚合，可用于sceneview和mapview
ArcGIS API之图层缩放
11-03
该代码基于ArcGIS API for JavaScript实现了图层缩放至某个范围
ArcGIS API for JS4.7加载FeatureLayer，点击弹出信息并高亮显示
做GIS梦的人
07-27 8074
      我加载的是ArcGIS Server本地发布的FeatureService，ArcGIS API for JS4.7记载FeatureLayer时，在二维需要通过代码启用WebGL渲染，在三维模式下，则不需要。不启用WebGL，则无法显示进行高亮显示。我在二维模式下，高亮接口是没有生效，因此，二维模式下，自己写了一个高亮，三维还是用的自带的高亮。 二维模式代码： &lt;!DOC...
ArcGIS For JavaScript API Feature layer hover(功能图层的悬浮)————（二十六）
X-rapido的专栏
01-21 9504
描述：  在”South Carolina南卡罗来纳州“的县上进行鼠标悬浮，跳出提示框。鼠标事件进行控制其显示方式。 重要代码： （1）控制显示的州 var southCarolinaCounties = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services
arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（七）—— PopupTemplate使用
花姐夫JUN的博客
05-25 917
为特定层或图形格式化和定义 Popup 的内容。当选择视图中的要素时，用户还可以使用 PopupTemplate 访问要素属性的值和 Arcade 表达式返回的值。包含 title 和 content 属性，它们充当用于将要素的属性转换为 HTML 表示的模板。语法 {fieldName} 或 {expression/expressionName} 执行参数替换。Graphic 的默认行为是在单击 Graphic 后显示视图的 Popup。此默认行为需要 PopupTemplate。
ArcGIS JS API popup弹窗
suntongxue100的博客
07-05 3698
一、要素服务popup 原始弹窗由popup微件控制，view对象都自带默认的popup，格式可以由Featurelayer的popupTemplate属性控制。 测试代码（Vue中）： <template> <div id="viewDiv"> <InfoWindow v-show="this.showWindow"></InfoWindow> </div>
arcgis api for js 自定义弹出信息提示框
qq_43725946的博客
11-30 2620
一、要素图层中有些字段，我们并不想直接显示，比如我们一般用0表示未完成，1表示完成。在popuptemplate弹出框中，字段自定义显示挺有用。下面演示这种用法。 二、代码演示。 let template = { title: '违建信息', content: [{ type: 'fields', fieldInfos: [ { fieldName: 'ZJMC',
ArcGIS API For JavaScript 4.x 获取地图经纬度坐标（附完整代码）
01-07
ArcGIS API For JavaScript 4.x 获取地图经纬度坐标（附完整代码，即开即用）
ArcGIS API for JavaScript 4.x 基础之绘制点、线、面、标注、图片（完整代码）
01-08
ArcGIS API for JavaScript 4.x 基础之绘制点、线、面、标注、图片的完整代码；
arcgis api for javascript(一)使用自定义数据对FeatureLayer进行渲染
热门推荐
芙兰泣露的博客
06-27 1万+
为arcgis api for javascript中的FeatureLayer添加数据，修改数据，仅限于client端，修改的数据不保存到server端
【ARCGIS】- 01、arcgisjs4.x自定义dom元素作为popup、label添加到地图上显示
汪同学丶的博客
06-01 1336
arcgis实现自定义的label、popup到地图上显示，并实现跟随鼠标移动
arcgis for js 4.X自定义气泡点击地图对象弹出对话框
左直拳的马桶_日用桶
12-07 1215
题目的意思是，arcgis for js 4.X自定义气泡，点击地图对象弹出对话框，而不是弹出气泡。对话框是vue页面组成的自定义对话框，不是地图页面的对象。
ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）...
weixin_30508241的博客
02-18 627
这节对Popups这一章的最后两个例子进行介绍和解析。 第一个【Popup Actions】介绍了弹窗中如何自定义工具按钮（名为actions），以PopupTemplate+FeatureLayer的形式测量要素的长度为例子进行介绍。 第二个【Custom popup actions per feature】则是上一个的升级，如果说上一个例子的功能是写死的，那么这个例子就把这个功能...
ArcGIS API for Silverlight 点击地图弹出自定义窗体
爱吃肉的熊猫
11-04 1061
在之前的博客中，关于弹出窗体，样式比较单一，不能满足自定义各种样式，源连接地址：http://blog.csdn.net/taomanman/article/details/7333612 　　下面是通过新建一个Silverlight的UserControl类，里面自定义样式，只要你能想到的，都可以做出来，然后在地图中点击点，实例化该类即可，主要代码如下： using System; usi
arcgis api for js 从客户端建立FeatureLayer
coderxsj
05-05 817
arcgis api for js 实现光柱图
vue+arcgis api开发实例
ANNENBERG的博客
01-15 4210
1.首先和传统的开发一样，需要引入js文件和css文件，但是因为是用vue来开发，所以传统的通过标签的方式来引入的方法不适用了，arcgis官网给我们提供了一个工具"esriLoader"，这是他的npm地址esri-loader。（命令：npm install --save esri-loader） 2. 在项目中新建一个arcgis的配置文件，名称叫mapConfig.js（这个名字可以自...
arcgis api for javascript 4.x
最新发布
06-28
ArcGIS API for JavaScript 4.x 是由 Esri 公司提供的 JavaScript API，用于在 web 应用程序中使用 ArcGIS 地图和地理空间数据。它提供了一组用于创建丰富地图应用程序的工具，包括地图显示、图层控制、查询和分析等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值