syvainjule/locator

基于开源服务/Mapbox的地图和地理定位字段

维护者

详细信息

github.com/sylvainjule/kirby-locator

源代码

问题

资助包维护！
syvainjule
www.paypal.me/sylvainjl

安装次数: 22,753

依赖项: 0

建议者: 0

安全: 0

星标: 97

关注者: 3

分支: 14

开放问题: 0

语言:Vue

类型:kirby-plugin

2.0.0 2024-03-08 20:23 UTC

Requires

MIT af6e3fa24d6f333660a3fb6c26d1296158e6347a

  • Sylvain Julé <contact.woop@sylvain-jule.fr>

This package is auto-updated.

Last update: 2024-09-08 21:33:03 UTC

README

一个简单的基于开源服务和Mapbox构建的地图和地理定位字段。

screenshot


概述

此插件完全免费，并采用MIT许可证发布。但是，如果您在商业项目中使用它并希望帮助我维护，请考虑随意捐赠。


1. 安装

Kirby 3: 1.1.4及以下. Kirby 4: 2.0.0+

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

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


2. 设置

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

请注意，这些服务受严格的使用政策约束，请始终检查您的使用是否兼容。否则，请设置字段使用Mapbox，详细信息见下文。

您也可以直接输入纬度/经度坐标，绕过地理定位（格式如下：15.23456, -30.67890）。

mymap:
  label: Location
  type: locator

3. 栅格服务器

3.1. 开源/免费栅格

tiles-opensource-2

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

  1. wikimedia (使用条款) → 现已禁止公共使用
  2. openstreetmap (使用条款)
  3. positron（默认，使用条款 [在免费底图服务条款下]）
  4. voyager (使用条款 [在免费底图服务条款下]）
mymap:
  type: locator
  tiles: positron

您也可以在安装的主config.php中全局设置此选项，这样您就不必在每个蓝图中进行配置

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

3.2. Mapbox栅格

tiles-mapbox-2

  1. mapbox.outdoors → mapbox/outdoors-v11（默认mapbox主题）
  2. mapbox.streets → mapbox/streets-v11
  3. mapbox.light → mapbox/light-v10
  4. mapbox.dark → mapbox/dark-v10

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

您必须在安装的主config.php中设置您想使用的栅格的id以及您的mapbox public key。

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

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

mymap:
  type: locator
  tiles: mapbox

您也可以在安装的主config.php中全局设置此选项，这样您就不必在每个蓝图中进行配置

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

4. 地理编码服务

4.1. 开源API（Nominatim）

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

mymap:
  type: locator
  geocoding: nominatim

4.2. Mapbox API

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

如果您还没有做，您必须在安装的主config.php文件中设置您的mapbox public key。

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

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

mymap:
  type: locator
  geocoding: mapbox

您也可以在安装的主config.php中全局设置此选项，这样您就不必在每个蓝图中进行配置

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

5. 字段选项

5.1. center

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

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

5.2. zoom

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

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

5.3. saveZoom

字段是否应该存储标记添加时的地图缩放级别，并在之后将其用作默认缩放值。默认是 false。

mymap:
  type: locator
  saveZoom: false

5.4. autoSaveZoom

字段是否应该存储用户手动更改缩放时的地图缩放级别，并在之后将其用作默认缩放值。默认是 false。

mymap:
  type: locator
  autoSaveZoom: false

5.5. display

要在面板中显示的信息。请注意，它将仅从面板视图中隐藏它们，但它们仍将存储在.txt文件中（如果可用）。可以从 lat、lon、number、address、postcode、city、region、country 和 countryCode 中选择。默认包括它们所有，但不包括 countryCode。

如果您正在使用Nominatim，字段还将在 osm 键下存储OpenStreetMap ID，您也可以将其添加到列表中显示。

如果您不希望显示任何信息，请将其设置为 false。

mymap:
  type: locator
  display:
    - lat
    - lon
    - number
    - address
    - postcode
    - city
    - region
    - country
    - countryCode

5.6. draggable

如果设置为 true，则在搜索结果不够精确时，标记将可重新定位。移动后，只存储新的 lat 和 lng。默认是 true。

5.7. autocomplete

如果设置为 true，在键入请求时，将显示最多5个建议（当Mapbox用于地理编码时）。默认是 true。

5.8. liststyle

liststyle

信息块的样式，可以是 columns 或 table。默认是 table。

mymap:
  type: locator
  liststyle: table

5.9. marker

使用的标记颜色，可以是 dark、light 或您的自己的HEX值。默认是 dark。

mymap:
  type: locator
  marker: dark

5.10. language

如果此选项设置为ISO 639-1代码（en、fr、de等），如果可用，地理编码服务将以请求的语言返回结果。默认是 false。

mymap:
  type: locator
  language: false # or 'de' | 'fr' | 'en' | …

5.11. dblclick

地图上的双击是否应触发缩放（zoom）或添加标记/将现有标记移动到单击事件的坐标（marker）。默认是 zoom。

mymap:
  type: locator
  dblclick: zoom # or 'marker'

6. 全局选项

相同的选项在全局范围内可用，这意味着您可以在安装的config.php文件中设置它们所有，而不用担心之后逐个设置。

return array(
    'sylvainjule.locator.center.lat'   => 48.864716,
    'sylvainjule.locator.center.lon'   => 2.349014,
    'sylvainjule.locator.zoom.min'     => 2,
    'sylvainjule.locator.zoom.default' => 12,
    'sylvainjule.locator.zoom.max'     => 18,
    'sylvainjule.locator.saveZoom'     => false,
    'sylvainjule.locator.autoSaveZoom' => false,
    'sylvainjule.locator.display'      => array('lat','lon','number','address','postcode','city','country'),
    'sylvainjule.locator.draggable'    => true,
    'sylvainjule.locator.autocomplete' => true,
    'sylvainjule.locator.liststyle'    => 'columns',
    'sylvainjule.locator.marker'       => 'dark',
    'sylvainjule.locator.language'     => false,
    'sylvainjule.locator.dblclick'     => 'zoom',
);

7. 前端使用

位置数据以YAML格式存储，因此需要使用yaml方法或使用toLocation方法（见下文）进行解码。

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

可能的存储键包括

  • lat（纬度）
  • lon（经度）
  • number（街道号码）
  • address（街道/道路/地点）
  • city（城市/村庄）
  • region（地区/州）
  • country（国家）
  • countryCode（国家代码）
  • osm（OpenStreetMap ID，如果使用Nominatim）

可能找到的位置可能没有这些键之一，因此将不会保存。始终检查键是否存在并且不为空非常重要。以下是一种方法：

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

if(!empty($location['postcode'])) {
    // there is a filled 'postcode' key
}
else {
    // there is no / an empty 'postcode' key
}

或者，您可以使用toLocation方法将值转换为新的集合，并使用它以kirby风格。

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

// You now have access to
// $location->lat()
// $location->lon()
// ...

if($location->has('postcode')) {
    if($location->postcode()->isNotEmpty()) {
        // there is a filled 'postcode' key
    }
    else {
        // there is an empty 'postcode' key
    }
}
else {
  // there is no 'postcode' key
}

8. 致谢

服务

K2字段


9. 许可证

MIT