README

作为节点类型或融合组件，简单且灵活地实现 OpenStreetMap。

安装

composer require webexcess/openstreetmap

为 Neos 构建

实现样式

默认 JS & CSS

默认情况下，此插件会加载一个 JS 和 CSS 文件。

最佳实践是将它们包含在您的自定义构建中，并删除默认资产

prototype(Neos.Neos:Page) {
  head.stylesheets.openStreetMap >
  body.javascripts.openStreetMap >
}

编辑器设置

默认设置

WebExcess:
  OpenStreetMap:
    tilesUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    minZoom: 6
    maxZoom: 18
    style: ~ # ~, grayscale or dark
    ratio: '3:2'
    address: ~ # Talisker Distillery, Carbost, Scotland
    lat: ~ # 57.302387
    lon: ~ # -6.356159
    paddingTopLeft: [100, 100]
    paddingBottomRight: [100, 100]
    mapOptions: []

仅融合实现

禁用节点类型

'WebExcess.OpenStreetMap:Map':
  abstract: true

简单

map = WebExcess.OpenStreetMap:Map.Component {
  address = 'Talisker Distillery, Carbost, Scotland'
  tooltip = 'Talisker Distillery'
  popup = 'Also have a look at <a href=\\"https:\/\/unsplash.com\/search\/photos\/talisker-bay\\" target=\\"_blank\\">Talisker Bay<\/a>.'
}

高级

map = WebExcess.OpenStreetMap:Map.Component {
  lat = 57.302387
  lon = -6.356159
  style = 'dark'
  ratio = '4:1'
  renderer.content.customOverlay = Neos.Fusion:Tag {
      @position = 'after map'
      content = 'A Special Information..'
  }
}

GeoJSON

与多个标记一起内联...

map = WebExcess.OpenStreetMap:Map.Component {
  json = '[{"type":"Feature","properties":{"tooltip":"Talisker Distillery"},"geometry":{"type":"Point","coordinates":[-6.356159,57.302387]}},{"type":"Feature","properties":{"popup":"Talisker Bay<br \/>&raquo; <a href=\\"https:\/\/unsplash.com\/search\/photos\/talisker-bay\\" target=\\"_blank\\">Photos<\/a>"},"geometry":{"type":"Point","coordinates":[-6.456646,57.283313]}}]'
}

或与外部源一起...

map = WebExcess.OpenStreetMap:Map.Component {
  json = '/talisker-geo.json'
}

EEL Helper

Geocode.latLonFromAddress('Talisker Distillery, Carbost, Scotland')

与 JavaScript 交互

方法

mapIds = window.openStreetMap.getMapIds();
> Array [ "map-d8aaafcf-b2fa-4240-8a28-ed48b6e6143c", "map-b9ffb901-e91e-4261-a127-ec3246bc6350", .. ]

map = window.openStreetMap.getMap('map-d8aaafcf-b2fa-4240-8a28-ed48b6e6143c');
> { MapObject }

markers = window.openStreetMap.getMarkers('map-d8aaafcf-b2fa-4240-8a28-ed48b6e6143c');
> Array [ { MarkerObject }, { MarkerObject }, ... ]

事件

document.addEventListener('initializedOpenStreetMap', e => {
    console.log(e);
});
> { details: { map: { MapObject }, mapId: 'map-123..' }, ...DefaultEventProperties }

document.addEventListener('addedOpenStreetMapMarkers', e => {
    console.log(e);
});
> { details: { map: { MapObject }, mapId: 'map-123..', geoJson: { GeoJSON } }, ...DefaultEventProperties }

标记聚合示例

加载 Leaflet 插件...

<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css" />
<script type="text/javascript" src="https://unpkg.com/leaflet.markercluster@1.1.0/dist/leaflet.markercluster.js"></script>

注册一个 JS 钩子...

prototype(WebExcess.OpenStreetMap:Map.Component) {
  mapHooks.addMarkersLayerHook = 'myAddMarkersLayerHook'
}

使用您的钩子加载插件...

window.myAddMarkersLayerHook = (layer) => {
  const clusterMarkers = L.markerClusterGroup()
  return clusterMarkers.addLayer(layer)
}

Leaflet 地图选项

见 leafletjs.com

通过默认设置

WebExcess:
  OpenStreetMap:
    mapOptions:
      scrollWheelZoom: true

通过融合

prototype(WebExcess.OpenStreetMap:Map.Component) {
  mapOptions {
    scrollWheelZoom = true
  }
}

检查编辑器

请随意添加自定义编辑器以增强您的编辑器体验。

致谢

感谢 OpenStreetMap 提供免费和开放地图数据。还要感谢 leafletjs.com 提供开源 JS 库用于交互式地图。

由 webexcess GmbH 开发