时间戳

首页 > 解决方案 > MapBox GL CSP 版本不渲染图块

javascript - MapBox GL CSP 版本不渲染图块

问题描述

我正在尝试使用CSP 版本来渲染地图。

正如您从JSFiddle和下面的代码中看到的那样，除了渲染图块之外，一切似乎都在工作。

控制台中不会抛出任何错误。

<div id='map'></div>

mapboxgl.accessToken = 'ACCESS_TOKEN';
mapboxgl.workerUrl = 'https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl-csp-worker.js';

var el = document.createElement('div');
 el.style.backgroundImage = 'url(https://placekitten.com/g/40/40/)';
 el.style.width = 40 + 'px';
 el.style.height = 40 + 'px';

var map = window.map = new mapboxgl.Map({
    container: 'map',
    zoom: 12.5,
    center: [-74.5, 40],
    style: 'mapbox://styles/mapbox/streets-v11',
    hash: true
});

new mapboxgl.Marker(el)
   .setLngLat([ -74.5, 40 ])
   .addTo(map);

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

标签： javascriptmapboxmapbox-gl-jscontent-security-policymapbox-gl

解决方案

我为 Mapbox 工作 - 我相信这是因为 Salesforce 不允许加载工作脚本。每个Salesforce：

您无法从第三方站点加载 JavaScript 资源，即使它是 CSP 受信任站点。要使用来自第三方站点的 JavaScript 库，请将其添加到静态资源中，然后将静态资源添加到您的组件中。从静态资源加载库后，您可以正常使用它。

静态 资源是包含您要在 Salesforce 中访问的文件的存档文件。所以简短的版本是 Salesforce 的安全策略只会加载 mapbox-gl-csp-worker.js 的本地副本。您需要使用该文件创建一个静态资源才能使您的地图正常工作：

  1. 下载mapbox-gl-csp-worker.js文件的副本。
  2. 创建一个包含工作文件的 zip 或 jar 存档。
  3. https://help.salesforce.com/articleView?id=pages_static_resources_create.htm&type=5到 Salesforce。
  4. 将代码中的工作人员 URL 更改为资源的相对路径。

要记住几件事：

  • 确保将脚本标记指向 GL JS 的 CSP 构建：<script src='https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl-csp.js'></script>
  • 每当您想更新 GL JS 时，您都需要下载新版本的 csp 构建，并更新 Salesforce 上的静态资源。

祝你好运！

布兰迪

推荐阅读