Question

我似乎无法使用谷歌地图样式向导生成的样式和ngx-leaflet angular插件。对于一个实例，我使用谷歌地图样式向导来减少地图上显示的标签数量。

想要在代码中的哪个地方申请给定由样式向导创建的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"
        }
      ]
    }
  ];

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

Answer 1

我也想为自己的地图制作自定义样式，但是我没有找到一种方法可以像使用Google Maps一样容易。不过，您可以尝试使用here提供的某些样式。为了添加样式，您只需要在地图上添加图层即可。

在您的组件类中：

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

tileLayer中的

对应于CartoDB.Voyager所选样式。

我希望这种替代方法可能有用。

使用ngx传单的Google地图样式

1 个答案: