本文介绍了将GeoJson LineString格式化为虚线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我的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。



请帮忙。谢谢:)。

解决方案

为了使多行虚线,你必须创建一个本地对象。一种方法是使用数据层加载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格式化为虚线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-05 08:06