问题使用geojson添加标记层

问题描述

我正在了解mapBox js api / sdk。

我已按照mapBox网站上的教程创建了具有等色层的地图。

我正在尝试为标记添加图层。会出现同色层，但标记不会。我的addlayer（）有什么问题的想法吗？

map.addLayer({
        'id:': 'hospitals','type': 'symbol','source': {
          'type': 'geojson','data': hospitals
        },layout: {
          'icon-image': 'hospital-15','icon-allow-overlap': true
        },paint: { }
      });

这是我的医院json

    var hospitals = {
      type: 'FeatureCollection',features: [
    { type: 'Feature',properties: { Name: 'VA Medical Center -- Leestown Division',Address: '2250 Leestown Rd' },geometry: { type: 'Point',coordinates: [-84.539487,38.072916] } },{ type: 'Feature',properties: { Name: 'St. Joseph East',Address: '150 N Eagle Creek Dr' },coordinates: [-84.440434,37.998757] } },properties: { Name: 'Central Baptist Hospital',Address: '1740 Nicholasville Rd' },coordinates: [-84.512283,38.018918] } },properties: { Name: 'VA Medical Center -- Cooper Dr Division',Address: '1101 Veterans Dr' },coordinates: [-84.506483,38.02972] } },]
  };

我正在地图加载功能中添加图层。

    map.on('load',function() {
 
 
      // When the map loads,add the source and layer
     map.addSource('iso',{
        type: 'geojson',data: {
          "type": 'FeatureCollection',"features": []
        }
      });
     
    map.addLayer({
        'id': 'isoLayer','type': 'fill',// Use "iso" as the data source for this layer
        'source': 'iso','layout': {},'paint': {
          // The fill color for the layer is set to a light purple
          'fill-color': '#5a3fc0','fill-opacity': 0.3
        }
      },"poi-label");

   map.addLayer({
    'id:': 'hospitals','source': {
      'type': 'geojson','data': hospitals
    },layout: {
      'icon-image': 'hospital-15','icon-allow-overlap': true
    },paint: { }
  });

     // Make the API call
      getIso();
    });

解决方法

您的icon-image可能是问题所在。得到标记以显示在this example之后。

map.on('load',function(){
    map.loadImage(
      'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',function(error,image) {
      if (error) throw error;
      map.addImage('cat',image);
    });

    map.addLayer({
      'id': 'hospitals','type': 'symbol','source': {
        'type': 'geojson','data': hospitals
      },'layout': {
        'icon-image': 'cat','icon-size': 0.2,},});
  });