Question

我正在了解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' }, geometry: { type: 'Point', coordinates: [-84.440434, 37.998757] } },
    { type: 'Feature', properties: { Name: 'Central Baptist Hospital', Address: '1740 Nicholasville Rd' }, geometry: { type: 'Point', coordinates: [-84.512283, 38.018918] } },
    { type: 'Feature', properties: { Name: 'VA Medical Center -- Cooper Dr Division', Address: '1101 Veterans Dr' }, geometry: { type: 'Point', 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',
    'type': 'symbol',
    'source': {
      'type': 'geojson',
      'data': hospitals
    },
    layout: {
      'icon-image': 'hospital-15',
      'icon-allow-overlap': true
    },
    paint: { }
  });

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

Answer 1

您的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,
      },
    });
  });

问题使用geojson添加标记层

1 个答案: