Question

我在为要素图层设置图标时遇到一些问题。我不断收到<body ng-app="numberExample"> <script> angular.module('numberExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.age = 5; $scope.roundNo = function(){ $scope.age = (Math.round($scope.age * 2) / 2); }; $scope.save = function(){ } }]); </script> <form name="myForm" ng-controller="ExampleController"> <input type="number" name="input" ng-model="age" min="0" max="1000" step="0.5" ng-change="roundNo()" required> </form> <button ng-click="save()">Save</button> </body>和类似的错误。如何更改此图层的图标样式？

layer.setIcon is not a function

Answer 1

您可以查看https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/和http://leafletjs.com/examples/custom-icons/以获取更多信息，但显然您可能符合您的需求：

使用您自己的图标样式。（第一）

和/或

使用 geoJSON文件图标样式。（第二）

代码：

var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 9);
var layer = L.mapbox.featureLayer().addTo(map);

layer.on('layeradd', function(e) {
    var marker = e.layer,feature = marker.feature;

    // TWO POSSIBILITIES

    // FIRST // your own method to define how icon will be rendered   
    marker.setIcon(L.mapbox.marker.icon({
        'marker-color': '#8834bb',
        'marker-size': 'large',
        'marker-symbol': 'restaurant' 
    }));

    // SECOND // use json directly to define how icon will be rendered   
    //marker.setIcon(L.mapbox.marker.icon(feature.properties.icon));
});

layer.setGeoJSON(geoJson);

假设geoJSON文件如下所示：

var geoJson = [{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-75.00, 40]
    },
    "properties": {
        "title": "Small astronaut",
        "icon": {
            'marker-color': '#0034bb',
            'marker-size': 'large',
            'marker-symbol': 'restaurant' 
        }
    }
}, {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-74.00, 40]
    },
    "properties": {
        "title": "Big astronaut",
        "icon": {
            'marker-color': '#8834bb',
            'marker-size': 'large',
            'marker-symbol': 'restaurant' 
        }
    }
}];

Answer 2

我不知道为什么，但提议的解决方案都不适合我。相反，我必须遍历图层的各个层。

        layer.on('layeradd', function(e) {
            var marker = e.layer, feature = marker.feature;
            e.layer.getLayers().forEach(function(marker) {
                marker.setIcon(L.mapbox.marker.icon({
                    'marker-color': '#8834bb',
                    'marker-size': 'large',
                    'marker-symbol': 'restaurant'
                }));
            })
        });

Answer 3

您可以使用简单样式规范来设置geojson的样式。在将其添加到要素图层之前，似乎需要执行此操作。一旦geojson具有您想要的样式/图标，您可以尝试运行eachLayer而不是for循环，然后将该图层添加到另一个要素图层。这是从原始example修改的。或者您可以使用Leaflet pointToLayer函数，如下所示。

var key = 'your key here'
L.mapbox.accessToken = key;
var map = L.mapbox.map('map')
  .setView([37.8, -96], 3);

var geojson = [
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-77.031952, 38.913184]
    },
    properties: {
      title: 'Title'
    }
  }
 ];
//Option A - set the properties of the geojson using the simple style spec supported in mapbox.js for mapbox feature layers

/*for(i = 0; i < geojson.length; i++) {
  geojson[i].properties['marker-color'] = '#63b6e5';
  geojson[i].properties['marker-size'] = 'large';
  geojson[i].properties['marker-symbol'] = 'rocket';
}*/

//Option B - use the native leaflet function for points - very simple and extendable to other icon plugins
var features = L.geoJson(geojson, { 
  pointToLayer: function(feature, latlng){
    return new L.marker(latlng, {
      icon: L.mapbox.marker.icon({
        'marker-color': '#00f',
        'marker-symbol': 'star'
        })
    })
  }
 }).addTo(map);

body { margin:0; padding:0; }
    .map { position:absolute; top:0; bottom:0; width:100%; }

<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<div id='map' class='map'></div>

要为featureLayer设置Mapbox图标

3 个答案: