javascript - 将 GeoJson LineString 格式化为虚线

Question

这是我的 GeoJson:

{
    "type" : "FeatureCollection",
    "created" : "2014/07/08 03:00:55 GMT",
    "announced_date" : "2017/07/10 03:00:55 GMT",
    "features" : [{
            "type" : "Feature",
            "properties" : {
                "name" : "n18",
                "analized_date" : "2013/07/08 10:00:00 GMT"
            },
            "geometry" : {
                "type" : "GeometryCollection",
                "geometries" : [{
                        "type" : "Point",
                        "coordinates" : [134.7, 37.3]
                    }, {
                        "type" : "LineString",
                        "coordinates" : [[134.7, 37.3], [134.6, 37.1]]
                    }
                ]
            }
        }]
}

我可以用普通线显示，但我想用虚线显示。 我谷歌了一下，有一种方法:使用 Polyline 但我不知道如何将其转换为 Polyline。

请帮忙。谢谢 :)。

Answer 1

要使折线变为虚线，您必须创建原生的 google.maps.Polyline目的。一种方法是使用数据层加载 GeoJSON，然后使用其方法从 GeoJSON 创建折线:

代码片段:

function initialize() {
  // Create a simple map.
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 8,
    center: {
      lat: 37,
      lng: 134
    }
  });
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  // process the loaded GeoJSON data.
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    if (e.feature.getGeometry().getType() === 'GeometryCollection') {
      var geometry = e.feature.getGeometry().getArray();
      for (var i = 0; i < geometry.length; i++) {
        if (geometry[i].getType() === 'Point') {
          map.setCenter(geometry[i].get());
          new google.maps.Marker({
            map: map,
            position: geometry[i].get()
          });
        } else if (geometry[i].getType() === 'LineString') {
          new google.maps.Polyline({
            map: map,
            path: geometry[i].getArray(),
            // make the polyline dashed. From the example in the documentation:
            // https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-dashed
            strokeOpacity: 0,
            icons: [{
              icon: {
                path: 'M 0,-1 0,1',
                strokeOpacity: 1,
                scale: 4
              },
              offset: '0',
              repeat: '20px'
            }]
          })
        }
      }
    }
    map.data.setMap(null);
  });
  map.data.addGeoJson(data);
}
google.maps.event.addDomListener(window, 'load', initialize);
var data = {
"type" : "FeatureCollection",
"created" : "2014/07/08 03:00:55 GMT",
"announced_date" : "2017/07/10 03:00:55 GMT",
"features" : [{
        "type" : "Feature",
        "properties" : {
            "name" : "n18",
            "analized_date" : "2013/07/08 10:00:00 GMT"
        },
        "geometry" : {
            "type" : "GeometryCollection",
            "geometries" : [{
                    "type" : "Point",
                    "coordinates" : [134.7, 37.3]
                }, {
                    "type" : "LineString",
                    "coordinates" : [[134.7, 37.3], [134.6, 37.1]]
                }
            ]
        }
    }]
};

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}
#map-canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>