将GeoJson LineString格式化为虚线 [英] Format GeoJson LineString to Dashed

问题描述

这是我的GeoJson：

  {
type：FeatureCollection，
创建：2014/07/08 03:00:55 GMT，
announce_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]] 
} 
] 
} 
}] 
} 
  

我可以用普通线显示它，但我想显示为虚线。
我google和有一种方法：使用Polyline，但我不知道如何将其转换为Polyline。

请帮忙。谢谢:)。

解决方案

为了使多行虚线，你必须创建一个本地 google.maps.Polyline 对象。一种方法是使用数据层加载GeoJSON，然后使用它的方法从GeoJSON创建多段线：

代码片段：

  function initialize（）{//创建一个简单的地图。 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（）;}）; //处理加载的GeoJSON数据。 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（），//使折线变成虚线。从文档示例中：// https://developers.google.com/ maps / documentation / javascript / examples / overlay-symbol-dashed strokeOpacity：0，图标：[{图标：{path：'M 0，-1 0,1'，strokeOpacity：1，scale：4}，off set：'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，announce_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>

This is my 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]]
                    }
                ]
            }
        }]
}

I can display it in normal line but I want display as dashed line . I google and there is a way : use Polyline but I don't know how to convert it to Polyline .

Please help . Thank you :) .

解决方案

To make the poly line dashed, you have to create a native google.maps.Polyline object. One way to do that is to use the data layer to load the GeoJSON, then use its methods to create the polyline from the GeoJSON:

code snippet:

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>

这篇关于将GeoJson LineString格式化为虚线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！