时间戳

首页 > 解决方案 > 带有 ngx 传单的 Google 地图样式

angular - 带有 ngx 传单的 Google 地图样式

问题描述

我似乎无法使用带有 ngx-leaflet 角度插件的谷歌地图样式向导生成的样式。例如，我使用谷歌地图样式向导来减少地图上显示的标签数量。

想问在代码中的何处应用由样式向导创建的给定 json 对象。

我有以下html：

<div leaflet 
 [leafletOptions]="options" 
 [leafletLayers]="layers" 
 [leafletLayersControl]="layersControl" 
 [leafletFitBounds]="fitBounds" 
 (leafletMapReady)="onMapReady($event)">
</div>

这个生成的样式：

 style = [
    {
      "featureType": "poi",
      "elementType": "labels.text",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi.business",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "transit",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    }
  ];

无法在文档中找到它并尝试了多种方式。有没有办法做到这一点？

标签： angularngx-leaflet

解决方案

我也想为我的地图制作一个自定义样式，但我没有找到一种方法来做到这一点，因为它可以使用谷歌地图完成。尽管如此，您可以尝试这里提供的一些样式。为了添加样式，您只需将图层添加到地图中。

在您的组件类中：

this.mapOptions = {
    layers: [
        tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png',
            { attribution: '&copy; OpenStreetMap contributors' })
    ],
    ...
};

在您的模板中：

<div style="height: 369px;" leaflet [leafletOptions]="mapOptions"></div>

作为参数给出的链接：

https://cartodb-basemaps- {s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}{r}.png

intileLayer对应于CartoDB.Voyager所选样式。

我希望这个替代方案有用。

推荐阅读