本文介绍了将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格式化为虚线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!