# 创建带图像背景层的地图 在地图可视化中，您可将图像用作自定义基本地图。您可能希望在平面图上显示数据。 该带点层的 地图图表显示了办公室平面图。每个气泡定位在员工的办公桌上方。气泡的尺寸和颜色由员工日常处理的客户问题的每周平均值确定。 具有楼层平面图像背景的带点层的地图 示出了员工，这些员工的尺寸由他们已解决的客户问题的数目确定 具有楼层平面图像背景的带点层的地图 示出了员工，这些员工的尺寸由他们已解决的客户问题的数目确定 具有楼层平面图像背景的带点层的地图 示出了员工，这些员工的尺寸由他们已解决的客户问题的数目确定 ![具有楼层平面图像背景的带点层的地图 示出了员工，这些员工的尺寸由他们已解决的客户问题的数目确定](https://help.qlik.com/zh-CN/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_map-image-background-example_point.png) 该 隐藏了默认刻度。图片没有一致的尺寸刻度。地图背景层中图片尺寸也取决于用户为图片边角设置的坐标。 ## 数据集 该 使用了两个表格以及一个背景图片。 [](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/Map/map-backgroundimage-example.htm) #### CustomerIssues CustomerIssues | 日期 | EmployeeNumber | CustomerIssues | | --- | --- | --- | | 8/1/2019 | 1 | 24 | | 8/1/2019 | 2 | 31 | | 8/1/2019 | 3 | 21 | | 8/1/2019 | 4 | 42 | | 8/1/2019 | 5 | 24 | | 8/1/2019 | 6 | 40 | | 8/1/2019 | 7 | 40 | | 8/1/2019 | 8 | 19 | | 8/1/2019 | 9 | 23 | | 8/1/2019 | 10 | 47 | | 8/1/2019 | 11 | 38 | | 8/1/2019 | 12 | 21 | | 8/1/2019 | 13 | 22 | | 8/1/2019 | 14 | 15 | | 8/1/2019 | 15 | 30 | | 8/1/2019 | 16 | 46 | | 8/1/2019 | 17 | 41 | | 8/1/2019 | 18 | 31 | | 8/1/2019 | 19 | 50 | | 8/1/2019 | 20 | 27 | | 8/1/2019 | 21 | 35 | | 8/1/2019 | 22 | 38 | | 8/1/2019 | 23 | 37 | | 8/1/2019 | 24 | 31 | | 8/1/2019 | 25 | 13 | | 8/1/2019 | 26 | 11 | | 8/2/2019 | 1 | 35 | | 8/2/2019 | 2 | 31 | | 8/2/2019 | 3 | 33 | | 8/2/2019 | 4 | 14 | | 8/2/2019 | 5 | 24 | | 8/2/2019 | 6 | 33 | | 8/2/2019 | 7 | 40 | | 8/2/2019 | 8 | 14 | | 8/2/2019 | 9 | 44 | | 8/2/2019 | 10 | 24 | | 8/2/2019 | 11 | 37 | | 8/2/2019 | 12 | 39 | | 8/2/2019 | 13 | 49 | | 8/2/2019 | 14 | 16 | | 8/2/2019 | 15 | 42 | | 8/2/2019 | 16 | 13 | | 8/2/2019 | 17 | 45 | | 8/2/2019 | 18 | 48 | | 8/2/2019 | 19 | 46 | | 8/2/2019 | 20 | 18 | | 8/2/2019 | 21 | 18 | | 8/2/2019 | 22 | 45 | | 8/2/2019 | 23 | 47 | | 8/2/2019 | 24 | 31 | | 8/2/2019 | 25 | 10 | | 8/2/2019 | 26 | 21 | | 8/3/2019 | 1 | 16 | | 8/3/2019 | 2 | 34 | | 8/3/2019 | 3 | 15 | | 8/3/2019 | 4 | 44 | | 8/3/2019 | 5 | 49 | | 8/3/2019 | 6 | 18 | | 8/3/2019 | 7 | 16 | | 8/3/2019 | 8 | 41 | | 8/3/2019 | 9 | 27 | | 8/3/2019 | 10 | 46 | | 8/3/2019 | 11 | 21 | | 8/3/2019 | 12 | 49 | | 8/3/2019 | 13 | 38 | | 8/3/2019 | 14 | 30 | | 8/3/2019 | 15 | 48 | | 8/3/2019 | 16 | 17 | | 8/3/2019 | 17 | 42 | | 8/3/2019 | 18 | 48 | | 8/3/2019 | 19 | 44 | | 8/3/2019 | 20 | 44 | | 8/3/2019 | 21 | 12 | | 8/3/2019 | 22 | 44 | | 8/3/2019 | 23 | 17 | | 8/3/2019 | 24 | 24 | | 8/3/2019 | 25 | 25 | | 8/3/2019 | 26 | 33 | | 8/4/2019 | 1 | 20 | | 8/4/2019 | 2 | 45 | | 8/4/2019 | 3 | 32 | | 8/4/2019 | 4 | 37 | | 8/4/2019 | 5 | 32 | | 8/4/2019 | 6 | 50 | | 8/4/2019 | 7 | 41 | | 8/4/2019 | 8 | 14 | | 8/4/2019 | 9 | 37 | | 8/4/2019 | 10 | 39 | | 8/4/2019 | 11 | 28 | | 8/4/2019 | 12 | 35 | | 8/4/2019 | 13 | 24 | | 8/4/2019 | 14 | 19 | | 8/4/2019 | 15 | 25 | | 8/4/2019 | 16 | 26 | | 8/4/2019 | 17 | 23 | | 8/4/2019 | 18 | 45 | | 8/4/2019 | 19 | 48 | | 8/4/2019 | 20 | 36 | | 8/4/2019 | 21 | 40 | | 8/4/2019 | 22 | 21 | | 8/4/2019 | 23 | 10 | | 8/4/2019 | 24 | 42 | | 8/4/2019 | 25 | 35 | | 8/4/2019 | 26 | 26 | | 8/5/2019 | 1 | 24 | | 8/5/2019 | 2 | 28 | | 8/5/2019 | 3 | 44 | | 8/5/2019 | 4 | 19 | | 8/5/2019 | 5 | 34 | | 8/5/2019 | 6 | 37 | | 8/5/2019 | 7 | 14 | | 8/5/2019 | 8 | 26 | | 8/5/2019 | 9 | 38 | | 8/5/2019 | 10 | 25 | | 8/5/2019 | 11 | 41 | | 8/5/2019 | 12 | 35 | | 8/5/2019 | 13 | 48 | | 8/5/2019 | 14 | 36 | | 8/5/2019 | 15 | 36 | | 8/5/2019 | 16 | 37 | | 8/5/2019 | 17 | 31 | | 8/5/2019 | 18 | 44 | | 8/5/2019 | 19 | 21 | | 8/5/2019 | 20 | 28 | | 8/5/2019 | 21 | 13 | | 8/5/2019 | 22 | 10 | | 8/5/2019 | 23 | 50 | | 8/5/2019 | 24 | 35 | | 8/5/2019 | 25 | 11 | | 8/5/2019 | 26 | 39 | | 8/6/2019 | 1 | 26 | | 8/6/2019 | 2 | 14 | | 8/6/2019 | 3 | 45 | | 8/6/2019 | 4 | 27 | | 8/6/2019 | 5 | 33 | | 8/6/2019 | 6 | 21 | | 8/6/2019 | 7 | 14 | | 8/6/2019 | 8 | 45 | | 8/6/2019 | 9 | 41 | | 8/6/2019 | 10 | 35 | | 8/6/2019 | 11 | 35 | | 8/6/2019 | 12 | 13 | | 8/6/2019 | 13 | 35 | | 8/6/2019 | 14 | 26 | | 8/6/2019 | 15 | 40 | | 8/6/2019 | 16 | 14 | | 8/6/2019 | 17 | 20 | | 8/6/2019 | 18 | 23 | | 8/6/2019 | 19 | 11 | | 8/6/2019 | 20 | 23 | | 8/6/2019 | 21 | 31 | | 8/6/2019 | 22 | 48 | | 8/6/2019 | 23 | 39 | | 8/6/2019 | 24 | 50 | | 8/6/2019 | 25 | 47 | | 8/6/2019 | 26 | 40 | | 8/7/2019 | 1 | 49 | | 8/7/2019 | 2 | 39 | | 8/7/2019 | 3 | 16 | | 8/7/2019 | 4 | 28 | | 8/7/2019 | 5 | 46 | | 8/7/2019 | 6 | 37 | | 8/7/2019 | 7 | 36 | | 8/7/2019 | 8 | 15 | | 8/7/2019 | 9 | 18 | | 8/7/2019 | 10 | 25 | | 8/7/2019 | 11 | 12 | | 8/7/2019 | 12 | 37 | | 8/7/2019 | 13 | 40 | | 8/7/2019 | 14 | 35 | | 8/7/2019 | 15 | 11 | | 8/7/2019 | 16 | 12 | | 8/7/2019 | 17 | 22 | | 8/7/2019 | 18 | 16 | | 8/7/2019 | 19 | 46 | | 8/7/2019 | 20 | 39 | | 8/7/2019 | 21 | 41 | | 8/7/2019 | 22 | 26 | | 8/7/2019 | 23 | 25 | | 8/7/2019 | 24 | 34 | | 8/7/2019 | 25 | 50 | | 8/7/2019 | 26 | 41 | [](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/Map/map-backgroundimage-example.htm) #### EmployeeData EmployeeData | Employee | EmployeeNumber | 纬度 | 经度 | | --- | --- | --- | --- | | Nehru Pollard | 1 | 2.1 | -2.1 | | Duncan Bell | 2 | 1.675 | -2.1 | | Arthur Miller | 3 | 2.1 | -1.6 | | Latifah Randall | 4 | 1.675 | -1.6 | | Glenna Giles | 5 | 2.1 | -1.1 | | Chaim Gates | 6 | 1.675 | -1.1 | | Elijah Mcgowan | 7 | 2.1 | -0.585 | | Serina Richards | 8 | 1.675 | -0.585 | | Nora Odonnell | 9 | 2.1 | 0.595 | | Fiona Craig | 10 | 1.675 | 0.595 | | Kirestin Mcguire | 11 | 2.1 | 1.155 | | Francesca Wilkerson | 12 | 1.675 | 1.155 | | Virginia Sanford | 13 | 2.1 | 1.6 | | Beau Weeks | 14 | 1.675 | 1.6 | | Justin Cook | 15 | 2.1 | 2.2 | | Lisandra Sloan | 16 | 1.675 | 2.2 | | Brody Ball | 17 | 2.1 | 2.6 | | Kirk Welch | 18 | 1.675 | 2.6 | | Julian Mcgee | 19 | 0.7 | 3.25 | | Geoffrey Wheeler | 20 | 0.7 | 3.7 | | Carter Leonard | 21 | 0.14 | 3.25 | | Noel Watson | 22 | 0.14 | 3.7 | | Damian Everett | 23 | -0.3 | 3.25 | | Justina Frazier | 24 | -0.3 | 3.7 | | MacKenzie Garcia | 25 | -0.85 | 3.25 | | Germane Carey | 26 | -0.85 | 3.7 | [](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/Map/map-backgroundimage-example.htm) #### 背景图片 背景图片 背景图片 背景图片 ![背景图片](https://help.qlik.com/zh-CN/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_map-image-background-example.png) ## 如何构建此项 信息注释包含对外部资源的资源请求的 URL 必须在内容安全策略中将其来源列入许可名单，否则将不会加载资源。WMS 资源必须将 img-src 和 connect-src 指令都列入白名单。 另请参阅：[管理内容安全策略](https://help.qlik.com/zh-CN/cloud-services/Subsystems/Hub/Content/Sense_Hub/Admin/mc-administer-content-security-policy.htm) ### 在您开始之前 必须将以下来源添加到您的租户的内容安全策略的允许列表中：https://help.qlik.com。使用 img-src 指令添加源。这由管理员在 Administration 活动中心完成。 有关更多信息，请参阅[创建 CSP 条目](https://help.qlik.com/zh-CN/cloud-services/Subsystems/Hub/Content/Sense_Hub/Admin/mc-administer-content-security-policy.htm#AddEntry)。 ### 构建地图 执行以下操作： 1. 将数据源添加到您的应用程序，并使用每个表格中的 EmployeeNumber 字段关联表格。 2. 在工作表中，添加地图图表。 3. 在地图设置中执行以下操作： * 将基本地图更改为无。 * 将投影更改为用户定义（度）。 4. 在外观 > 演示中，进行以下操作： * 将比例尺切换为关。 * 将限制缩放级别设置为自定义并将缩放设置为 7 倍缩放 - 8 倍缩放。 5. 将背景层添加至地图图表，并在数据中，执行以下操作： * 在格式中，选择图像。 * 将 URL 设置为 https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Resources/Images/ui\_map-image-background-example.png。 * 设置左上角时，将顶部（纬度）设置为 2.5，将左侧（经度）设置为 -4.1。 * 设置右下角时，将底部（纬度）设置为 -2.5，将右侧（经度）设置为 4.1。 信息注释 在示例的这一点上，图像尚未出现。使用下一步添加点图层后，地图将使用正确的比例和图像位置进行更新。 6. 将点层添加至地图图表，并执行以下操作： * 在数据中，将员工作为字段添加。 * 在位置中，选择纬度和经度字段。将 Lat 设置为纬度字段并将 Longitude 设置为经度字段。 * 在尺寸和形状中，设置尺寸设置 Avg(CustomerIssues)。 * 在颜色中，执行以下操作： * 将颜色设置为自定义并按度量着色。 * 选择 Avg(CustomerIssues) 作为度量。 * 选择 Diverging classes 作为配色方案。 要获得与页面顶部图像相同的外观和感觉，请将应用程序主题设置为 Sense Classic。