Question

为FeatureCollection GeoJSON对象的构造函数中的每个Feature对象指定内联颜色内联的正确方法是什么？我正在尝试多种方法将其设置为蓝色，但结果仍然是默认的黑色笔触颜色。谢谢！

  <head>
    <title>LineString Colors</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 33.9720, lng: -81.0527},
    zoom: 6
  });
  map.data.addGeoJson({
        "type": "FeatureCollection", 
        "features": [
            {"type": "Feature", 
             "geometry": 
                {"type": "LineString",
                 "coordinates": [[-81.0527, 33.9720], 
                                 [-79.6651, 34.9167], 
                                 [-85.0252, 38.6221]], 
                 "strokeColor": "#0000FF", 
                },
             "strokeColor": "#0000FF", 
             "style": {"strokeColor": "#0000FF"}
            }
        ],
       "strokeColor": "#0000FF"
    });
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>

Answer 1

请参阅Styling GeoJson data

上的文档

如果您只想让所有折线都变成蓝色，那么您只需要：

map.data.setStyle(function (feature) {
    return {
        strokeColor: "#0000FF"
    };
});

但是，如果您在标题中暗示，您想要指定GeoJSON中的颜色，则可以在功能的strokeColor中设置properties，然后您可以使用{{ 1}}：

getProperty

然后使用它来动态设置折线的颜色：

var strokeColor = feature.getProperty('strokeColor');

proof of concept fiddle

代码段

map.data.setStyle(function (feature) {
    var strokeColor = feature.getProperty('strokeColor');
    return {
        strokeColor: strokeColor,
        strokeWeight: 2
    };
});

var map;

function initMap() {
  var gbounds = new google.maps.LatLngBounds();
  gbounds.extend(new google.maps.LatLng(33.9720039368, -81.052734375));
  gbounds.extend(new google.maps.LatLng(34.9167518616, -79.6651229858));
  map = new google.maps.Map(document.getElementById('map'), {
    center: gbounds.getCenter(),
    zoom: 6
  });

  map.data.setStyle(function(feature) {
    var strokeColor = feature.getProperty('strokeColor');
    return {
      strokeColor: strokeColor,
      strokeWeight: 2
    };
  });
  map.data.addGeoJson({
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-81.052734375, 33.9720039368],
          [-79.665122985799997, 34.916751861599998],
          [-85.025260925300003, 38.622150421100002]
        ],
      },
      properties: {
        "strokeColor": "#0000FF"
      }
    }, {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-80.1, 33.9],
          [-79.6, 34.916751861599998],
          [-85.1, 39.6]
        ],
      },
      properties: {
        "strokeColor": "#FF0000"
      }
    }]
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

GeoJSON FeatureCollection

1 个答案: