README

允许您在Craft CMS网站上显示英国地形测量局地图。

要求

此插件需要Craft CMS 3.0.0-beta.23或更高版本。

安装

要安装插件，请按照以下说明操作。

打开您的终端并转到您的Craft项目
```
cd /path/to/project
```

然后告诉Composer加载插件

composer require burnthebook/craft3-osmaps

在控制面板中，转到设置 → 插件，并点击OS Maps的“安装”按钮。

配置

在控制面板的插件设置页面上添加您的OS Maps API密钥。
设置最大缩放级别值。如果您不允许显示OS MasterMap Topography层，这通常是10。

使用OS Maps

将以下内容添加到您的twig模板中，并根据需要修改。

{% do view.registerAssetBundle("Burnthebook\\OSMaps\\assetbundles\\OSMaps\\OSMapsAsset") %}

{% set tileUrl = craft.osMaps.getApiUrl() %}
{% set maxZoomLevel = craft.osMaps.getMaxZoomLevel() %}
{% set zoomLevel = 10 %}
{% set lat = 52.921309 %}
{% set long = -1.475118 %}

<div id="map" style="height: 500px; width: 500px;"></div>

{% js %}
    var map = createOSMap('map', '{{ tileUrl }}', { maxZoom: {{ maxZoomLevel }} });
    var latlng = [{{ lat }}, {{ long }}];
   
    map.setView(latlng, {{ zoomLevel }});
    L.marker(latlng).addTo(map);
{% endjs %}

有关使用L JavaScript对象的参考，请参阅Leaflet文档。

请注意，createOSMap()函数返回一个Leaflet Map对象。

高级使用

getApiUrl()方法接受一个包含选项的对象。

有关更多详细信息，请参阅OS Maps文档。

我们定义的默认选项如下

{% set tileUrl = craft.osMaps.getApiUrl({
    'service': 'WMTS',
    'request': 'GetTile',
    'version': '1.0.0',
    'layer': 'Road 27700',
    'style': 'true',
    'format': 'image/png',
    'tileMatrixSet': 'EPSG:27700',
    'tileMatrix': 'EPSG:27700:{z}',
    'tileRow': '{y}',
    'tileCol': '{x}'
}) %}

如果您在控制面板中使用Google Maps（例如，地图插件），则需要将Google Maps缩放级别转换为OS Maps缩放级别

{% set zoomLevel = craft.osMaps.convertGMapsZoomLevel(entry.map.zoom) %}

createOSMap() JavaScript函数接受以下参数

id : 地图HTML元素的ID
tileUrl : 获取瓦片的URL
tileLayerOptions : Leaflet TileLayer对象的选项。有关更多详细信息，请参阅Leaflet文档。
mapOptions : Leaflet Map对象的选项。有关更多详细信息，请参阅Leaflet文档。
crs : 可选的CRS对象。有关创建CRS对象的说明，请参阅Leaflet和/或Proj4leaflet文档。

函数返回一个标准的Leaflet Map对象。您可以随意使用它。

Leaflet库（JS中的L对象）也全局暴露，以便您可以使用它，例如添加标记或操作地图。

关于性能的注意事项

我们通过插件（Craft）代理所有瓦片请求，以隐藏OS API密钥。这不是性能最佳的方法，但这是OS的要求。

为了说明这一点

地图（前端）<--> OS Maps插件（Craft）<--> OS Maps API

当用户与地图（缩放/平移）交互时，这将触发对您的服务器的大量请求——每个瓦片一个请求！如果您网站上有很多用户和很多地图，这可能会成为一个问题！

一个可能的解决方案是将您的网站部署到CDN上，例如CloudFlare，并启用对所有请求到/actions/os-maps/api/*的完整页面缓存，其中/actions/是您的actionTrigger配置设置（默认为actions）。

请注意，当OS更新任何瓦片时，您必须清除CDN缓存。

有用资源

由Burnthebook提供

devkokov / craft3-osmaps

维护者

详细信息

README

要求

安装

配置

使用OS Maps

高级使用

关于性能的注意事项

有用资源