ArcGIS Pro 要素弹出窗口中添加图片

目录

问题

如何在 ArcGIS Pro 中实现要素的弹出窗口中插入图片？

解决方案

1. 使用 html 插入图片

2. 添加 Raster 字段存储图片

3. 添加图片附件

声明

---

问题

如何在 ArcGIS Pro 中实现要素的弹出窗口中插入图片？

解决方案

1. 使用 html 插入图片

    优点：① 既可以使用本地图片，也可以通过 url 使用网络图片；

               ② 借助 html 语言，可以对多张图片进行排列；

               ③ 发布要素服务后，前端的弹出窗口也可以正常显示图片（仅限通过url添加的图片）。

    缺点：需要有一定的 html 基础。

    具体实现方法：

• 在要素属性表中添加一个 text 文本字段，建议将长度值设置得大一些，防止无法完整写入html语句：
• 在文本字段中写入html语句，并保存编辑：

 常用示例：①插入一张位于C:\Users\admin\Desktop，名称为001.jpg的图片，长宽均为300：

                     <img src="C:\Users\admin\Desktop\001.jpg" width='300' height='300'/>

    ②插入两张图片竖着排列，需要使用div容器：

<div><img src="https://picx.zhimg.com/v2-526bef7571c9af28859f6022bcbccfff_xl.jpg?source=32738c0c" width='100' height='100'/></div>
<div><img src="https://picx.zhimg.com/v2-526bef7571c9af28859f6022bcbccfff_xl.jpg?source=32738c0c" width='100' height='100'/></div>
 

③插入三张图片，希望第一排两张（两张图片间有空隙），第二排一张。此时需要使用margin：

<div><img src="C:\Users\admin\Desktop\001.jpg" width='47%' height='100%'style="margin-right:6%;"/><img src="C:\Users\admin\Desktop\001.jpg" width='47%' height='100%'/></div>
<div><img src="C:\Users\admin\Desktop\001.jpg" width='100%' height='100%'/></div>

• 如果发现弹出窗口的属性中没有刚才的图片字段，可以对该图层击右键，打开配置弹出窗口，点击 field 字段右上角的编辑，勾选上刚才的文本字段即可：

2. 添加 Raster 字段存储图片

   优点：会将图片直接存储在要素类中，即使本地图片删除了，也可以正常显示。

   缺点：①只能添加本地的一张图片；

              ②发布要素服务后，前端的要素弹出窗口无法正常显示；

              ③无法调整图片的显示大小。

具体实现方法：

• 在要素属性表中添加一个raster 字段：

  

• 打开 Edit 菜单栏 -> Attributes对话框，选择要素，可以为raster字段添加图片：
• 然后对该图层击右键，打开配置弹出窗口，点击 field 字段右上角的编辑：
• 勾选上 raster 字段的可见性：

  

• 此时，我们点击要素的弹出窗口，就有 raster 字段及我们刚才添加进去的图片了：

3. 添加图片附件

  优点：①会将图片作为附件存储在要素类中，即使本地图片删除了，也可以正常显示；

             ②可以添加多张图片。

  缺点：①无法调整图片的显示大小；

             ②发布要素服务后，需要点击图片附件，才能显示：

             

  具体实现方法：

• 使用启用附件工具，启用要素类的附件功能：

• 在属性表中选中要素，对其击右键，点击管理附件：
• 在弹出的附件窗口中，将本地图片添加进来：

  

• 也可以打开 Edit 菜单栏 -> Attributes对话框，选择要素，在附件 attachment 中添加图片：
• 然后对该图层击右键，打开配置弹出窗口，点击图片 image 选项，添加一个图片框，再点击图片 image 框的右上角编辑：
• 在图片选项中，修改名称、描述等，并且在来源中选择使用附件：

  

• 此时弹出窗口中就能显示我们刚才加入的图片了。多个图片可以点击小三角 next 显示：

  

声明

        测试工作主要由 xinying 完成（xinying的技术专栏_ArcEngine,arcgis-runtime-sdk-for-net,ArcGIS Pro-CSDN博客），本人仅做整理归纳。