README

Cowegis Draw Widget Bundle 提供了一个用于在 Contao CMS 内绘制和管理矢量元素的定制小部件。它设计用于无缝集成 Contao，为用户提供了一个直观的界面来创建和编辑地图矢量绘制。

要求

• PHP: ^8.2
• Contao: ^5.3

安装

要安装 Draw Widget Bundle，请使用 Composer。在您的终端中运行以下命令

composer require cowegis/cowegis-contao-draw-widget-bundle

配置

该小部件使用 cowegis-editor HTML 元素，使用令人惊叹的 geoman.io 编辑器。它旨在调整编辑器配置。您可以自定义初始地图设置和编辑器工具栏。配置以 JSON 编码，因此您无法在此处直接使用 JavaScript。

$GLOBALS['TL_DCA']['tl_example']['fields']['vectors'] = [
    'inputType' => 'cowegis_draw',
    'sql'       => 'blob NULL',
    'eval'      => [
        // Height of the widget, defaults to 500px
        'height'  => '500px',
        // Toolbar options, see https://www.geoman.io/docs/toolbar
        // Default:
        'toolbar' => [
            'position' => 'bottomleft',
        ],
        // Leaflet map options, see https://leaflet.npmjs.net.cn/reference.html#map-option
        // Default:
        'map' => [
            "maxZoom" => 15,
            "minZoom" => 2,
            "center"  => [0, 0],
            "zoom"    => 2,
        ],
        // Maximum number of vector elements. Toolbar draw buttons get disabled when used.
        'limit' => null
    ]
];

如果您需要自定义整个配置，可以定义一个回调。请参阅 \Cowegis\Bundle\ContaoDrawWidget\Widget\DrawWidget::editorOptions() 中的初始配置。

$GLOBALS['TL_DCA']['tl_example']['fields']['vectors'] = [
    'inputType' => 'cowegis_draw',
    'eval'      => [
        'callback' => function (array $options) {
            var_dump($options);
            
            return $options;
        }
    ]
];

GeoJSON 数据

GeoJSON 不提供有关圆形或圆形标记的信息，因为 Leaflet 提供了这些信息。为了克服这一限制，此小部件将 GeoJSON 属性 type 和 radius 添加到几何形状中。

圆形

圆的半径以米为单位定义，请参阅 https://leaflet.npmjs.net.cn/reference.html#circle。

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "type": "circle",
    "radius": 100
  }
}

圆形标记

圆形标记的半径以像素为单位定义，请参阅 https://leaflet.npmjs.net.cn/reference.html#circlemarker。

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "type": "circleMarker",
    "radius": 10
  }
}