GeoJSON FeatureCollection 中的 LineString Feature 对象中的显式笔划颜色

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 中指定颜色，你可以在特征的 properties 中设置 strokeColor，然后你可以检索它getProperty:

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

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

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

proof of concept fiddle

代码片段：

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%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<title>LineString Colors</title>
<div id="map"></div>

GeoJSON FeatureCollection 中的 LineString Feature 对象中的显式笔划颜色

Explicit stroke color in LineString Feature objects in GeoJSON FeatureCollection

geojson

google-maps-api-3