README

Craft Geoman

此插件向Craft CMS添加了“Geoman”字段类型，该类型通过geoman.io的leaflet-geoman提供几何编辑功能。

要求

此插件需要Craft CMS 4.0或更高版本。

安装

您可以从插件商店或使用Composer安装此插件。

从插件商店

转到项目控制面板中的插件商店，搜索“Craft Geoman”。然后在模态窗口中点击“安装”按钮。

使用Composer

打开终端并运行以下命令

# go to the project directory
cd /path/to/my-project

# tell Composer to load the plugin
composer require handplant/craft-geoman

# tell Craft to install the plugin
./craft plugin/install craft-geoman

简单的前端示例

<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<div id="map" style="height: 500px; border: 1px solid black;"></div>
<div id="geojson" style="display: none;">
    {{ entry.geoman }}
</div>

<!-- prettier-ignore -->
<script>
var map = L.map(document.getElementById('map')).setView([47.9034, 8.10577], 10);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Data ©<a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 18
}).addTo(map);

var layer = L.featureGroup().addTo(map);

var geojson = document.getElementById('geojson');
if (geojson.innerHTML) {
    var geojsonLayer = L.geoJson(JSON.parse(geojson.innerHTML), {
        pointToLayer: (feature, latlng) => {
            if (feature.properties.radius) {
                return new L.Circle(latlng, feature.properties.radius)
            } else if (feature.properties.shape == "CircleMarker") {
                return new L.CircleMarker(latlng)
            } else {
                return new L.Marker(latlng)
            }
            return
        },
    })
    geojsonLayer.eachLayer(function (l) {
      layer.addLayer(l)
    })
    map.fitBounds(layer.getBounds())
}
</script>