README

通过绘制标记、路径和形状在 Kirby 中标注地图并生成 GeoJSON。

概览

此插件完全免费，并使用 MIT 许可证发布。但是，如果您正在将其用于商业项目并希望帮助我进行维护，请考虑通过 GitHub Sponsors 或 Paypal 或通过我的联盟链接购买您的许可证来捐赠。

1. 安装
2. 设置
3. 栅格服务器
- 3.1. 开源/免费栅格
- 3.2. Mapbox 栅格
4. 地理编码服务
- 4.1. 开源 API (Nominatim)
- 4.2. Mapbox API
5. 字段选项
6. 全局选项
7. 前端使用
8. 致谢
9. 许可证

1. 安装

下载并将此存储库复制到 /site/plugins/mapnotator

或者，您可以使用 composer 安装它：composer require sylvainjule/mapnotator

2. 设置

默认情况下，字段设置为使用开源服务，既用于地理编码（Nominatim）也用于栅格渲染（Positron），无需任何 API 密钥要求。

请注意，这些服务受严格的用法政策约束，请始终确保您的使用符合要求。否则，请设置字段以使用 Mapbox，以下将提供详细信息。

mymap:
  label: My map
  type: mapnotator

3. 栅格服务器

3.1. 开源/免费栅格

您可以选择其中 4 个免费的栅格服务器之一

~~wikimedia (使用条款)~~ → 现已禁止公共使用
openstreetmap (使用条款)
positron（默认，使用条款 [在 免费基础地图使用条款服务 下]）
voyager（《使用条款》（在 免费基础地图使用条款服务 下]）

mymap:
  type: mapnotator
  tiles: positron

您也可以在安装的主 config.php 中全局设置此内容，然后您就不必在每一个蓝图中进行配置。

return array(
    'sylvainjule.mapnotator.tiles' => 'positron',
);

3.2. Mapbox 栅格

~~mapbox.outdoors~~ → mapbox/outdoors-v11（默认 Mapbox 主题）
~~mapbox.streets~~ → mapbox/streets-v11
~~mapbox.light~~ → mapbox/light-v10
~~mapbox.dark~~ → mapbox/dark-v10

如果您的使用不符合上述政策（或者如果您不想依赖这些服务），您可以设置字段以使用 Mapbox 栅格。

您必须在安装的主 config.php 中设置您想要使用的栅格的 id 和您的 Mapbox public key。

return array(
    'sylvainjule.mapnotator.mapbox.id'    => 'mapbox/outdoors-v11',
    'sylvainjule.mapnotator.mapbox.token' => 'pk.vdf561vf8...',
);

现在您可以在您的蓝图明确定义您想要使用 Mapbox 栅格。

mymap:
  type: mapnotator
  tiles: mapbox

您也可以在安装的主 config.php 中全局设置此内容，然后您就不必在每一个蓝图中进行配置。

return array(
    'sylvainjule.mapnotator.tiles' => 'mapbox',
);

4. 地理编码服务

4.1. 开源 API (Nominatim)

这是默认的地理编码服务。它不需要任何额外的配置，但请确保您的需求符合 Nominatim 使用政策。

mymap:
  type: mapnotator
  geocoding: nominatim

4.2. Mapbox API

如果您的使用不符合上述政策（或者如果您不想使用 Nominatim），您可以设置字段以使用 Mapbox API。

如果您尚未设置，您必须在安装的主 config.php 文件中设置 Mapbox 的 public key

return array(
    'sylvainjule.mapnotator.mapbox.token' => 'pk.vdf561vf8...',
);

现在，您可以在蓝图明确声明您希望使用 Mapbox 作为地理编码服务

mymap:
  type: mapnotator
  geocoding: mapbox

Mapbox API 具有自动完成搜索的能力。默认启用，您可以通过将 autocomplete 选项设置为 false 来禁用它。

mymap:
  type: mapnotator
  geocoding: mapbox
  autocomplete: false

您也可以在安装的主 config.php 中全局设置此内容，然后您就不必在每一个蓝图中进行配置。

return array(
    'sylvainjule.mapnotator.geocoding' => 'mapbox',
);

5. 字段选项

5.1. `center`

如果没有存储值，地图中心的坐标。默认为 {lat: 48.864716, lon: 2.349014}（法国巴黎）。

一旦画出一个形状，它将自动找到其初始中心以显示所有形状。

mymap:
  type: mapnotator
  center:
    lat: 48.864716
    lon: 2.349014

5.2. `zoom`

min、default 和 max 缩放值，其中 default 将用于地图的每次首次加载。默认值为：{min: 2, default: 12, max: 18}。

一旦画出一个形状，它将自动找到其初始缩放级别以显示所有形状。

mymap:
  type: mapnotator
  zoom:
    min: 2
    default: 12
    max: 18

5.3. `shapes`

编辑器允许在地图上绘制的形状。它们都默认启用

mymap:
  type: mapnotator
  shapes:
    - marker
    - polyline
    - rectangle
    - polygon
    - circle
    - circleMarker

5.4. `tools`

编辑器允许使用的工具/形状修改器。它们都默认启用

mymap:
  type: mapnotator
  tools:
    - edit
    - drag
    - cut
    - remove
    - rotate

5.5. `size`

字段的高度。默认为 full，这将使字段填充视口的整个高度。选项包括

full（整个视口高度）
large（适合工具栏中的所有按钮）
medium（适合工具栏中的 8 个按钮）
small（适合工具栏中的 6 个按钮）

5.6. `color`

您可以通过将此选项设置为任何有效的颜色值来更改形状/标记的颜色。默认为蓝色（#2281f7）。

mymap:
  type: mapnotator
  color: '#2281f7'

6. 全局选项

相同的选项全局可用，这意味着您可以在安装的 config.php 文件中设置它们，之后无需单独设置

return array(
    'sylvainjule.mapnotator.token'        => '',
    'sylvainjule.mapnotator.id'           => 'mapbox.outdoors',
    'sylvainjule.mapnotator.tiles'        => 'positron',
    'sylvainjule.mapnotator.zoom.min'     => 2,
    'sylvainjule.mapnotator.zoom.default' => 12,
    'sylvainjule.mapnotator.zoom.max'     => 18,
    'sylvainjule.mapnotator.center.lat'   => 48.864716,
    'sylvainjule.mapnotator.center.lon'   => 2.349014,
    'sylvainjule.mapnotator.shapes'       => ['marker', 'polyline', 'rectangle', 'polygon', 'circle', 'circleMarker'],
    'sylvainjule.mapnotator.tools'        => ['edit', 'drag', 'cut', 'remove', 'rotate'],
    'sylvainjule.mapnotator.size'         => 'full',
    'sylvainjule.mapnotator.geocoding'    => 'nominatim',
    'sylvainjule.mapnotator.autocomplete' => true,
    'sylvainjule.mapnotator.color'        => '#2281f7',
);

7. 前端使用

GeoJSON 以 YAML 格式存储，因此需要使用 yaml 方法进行解码。

$location = $page->mymap()->yaml();

然后您可以使用 Kirby 的工具包将其编码为 JSON

$json = Json::encode($location);

7.1. circle 和 circleMarker

GeoJSON 语法不支持圆形或 circleMarker。它们默认以点形式存储（有关更多详细信息，请参阅此 Medium 帖子）。

因此，字段在其坐标旁边存储了附加属性，以便您可以在项目中重新创建它们

{
    "type": "Feature",
    "properties": {
        "shape": "CircleMarker"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [6.862806, 47.967742]
    }
},
{
    "type": "Feature",
    "properties": {
        "shape": "Circle",
        "radius": 241.85391410521
    },
    "geometry": {
        "type": "Point",
        "coordinates": [6.84809, 47.969121]
    }
}

将 GeoJSON 导入项目时，您需要检查这些属性，以便将它们转换为适当的形状。例如，使用 Leaflet，它看起来像

L.geoJSON(myGeoJSON, {
    pointToLayer: (feature, latlng) => {
        if (feature.properties.shape == 'Circle') {
            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);
        }
    }
}).addTo(myMap)

8. 致谢

服务

Openstreetmap、Carto 或 Mapbox 作为瓦片服务器。
Nominatim 或 Mapbox Search 作为地理编码 API
Leaflet 作为映射库。
Geoman 作为 GeoJSON 编辑器。

9. 许可证

MIT

sylvainjule / mapnotator

维护者

详细信息

README

概览

1. 安装

2. 设置

3. 栅格服务器

3.1. 开源/免费栅格

3.2. Mapbox 栅格

4. 地理编码服务

4.1. 开源 API (Nominatim)

4.2. Mapbox API

5. 字段选项

5.1. `center`

5.2. `zoom`

5.3. `shapes`

5.4. `tools`

5.5. `size`

5.6. `color`

6. 全局选项

7. 前端使用

7.1. circle 和 circleMarker

8. 致谢

9. 许可证

sylvainjule / mapnotator

维护者

详细信息

README

概览

1. 安装

2. 设置

3. 栅格服务器

3.1. 开源/免费栅格

3.2. Mapbox 栅格

4. 地理编码服务

4.1. 开源 API (Nominatim)

4.2. Mapbox API

5. 字段选项

5.1. center

5.2. zoom

5.3. shapes

5.4. tools

5.5. size

5.6. color

6. 全局选项

7. 前端使用

7.1. circle 和 circleMarker

8. 致谢

9. 许可证

5.1. `center`

5.2. `zoom`

5.3. `shapes`

5.4. `tools`

5.5. `size`

5.6. `color`