MapBox GL CSP版本未渲染图块

Question

我正在尝试使用CSP version绘制地图。

[除了渲染图块之外，一切似乎都可以正常工作，正如您从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%;
}

Answer 1

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

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

A Static Resource是一个存档文件，其中包含您要在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上更新静态资源。

祝你好运！

白兰地