如何将自定义本地/离线地图样式应用于 OpenLayers 地图答案

【问题标题】：How to apply a custom local/offline map style to an OpenLayers Map如何将自定义本地/离线地图样式应用于 OpenLayers 地图
【发布时间】：2018-08-04 11:07:11
【问题描述】：

我有一个本地网页作为更大的桌面应用程序的一部分。我想将 Open Layer 地图的默认样式更改为 "Klokantech Basic"。我已经下载了样式 JSON 的副本，但努力将其应用于地图。目前我的代码如下：

var map = new ol.Map({
        layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
        target: 'map',
        style: './mapStyle.json',
        view: new ol.View({
            center: ol.proj.fromLonLat([-0.146953, 51.493758]),
            zoom: 15
        })

但是设置样式不起作用，我在网上查了一下，似乎有地图框，但这使用了一个 API 密钥，我不想使用/维护。

整个页面及其资源都存储在本地，有没有什么方法可以在没有API的情况下引用本地样式文件？

Here is my current code.

【问题讨论】：

标签： javascript html mapbox openlayers openmaptiles

【解决方案1】：

mapbox 样式用于矢量平铺源，我假设您将其用于矢量图层。

Openlayers 似乎不支持 MVT 的 Mapbox 样式。它使用样式函数应用于矢量切片。您可以在此处查看exemple Openlayers 如何为矢量切片制作style function。

【讨论】：

正如你所说，OpenLayers 不直接支持 Mapbox 样式，而是使用 ol-mapbox-style github.com/boundlessgeo/ol-mapbox-style（一个插件），它通过将这些样式转换为 OpenLayers 样式语法来实现
应该解释如何迁移样式。回答“使用插件”不是答案。该插件需要一些在线资源，因此在您为 localhost 或 Intranet 目的准备地图时，它不会成为解决方案。