如何动态更新kml文件/图层？ [英] How to update kml file/layer dynamically?
问题描述
我使用 kml 文件来显示带有自定义边界线的地图。该kml文件是从某个网站下载的。在该文件中，在地标标记中，显示图标不存在
< Placemark>
<名称> Spot 2< / name>
< description> .....< / description>
< styleUrl> ....< / styleUrl>
< MultiGeometry>< Polygon>< outerBoundaryIs>< LinearRing>< coordinates>
.........
< / coordinates>< / LinearRing>< / outerBoundaryIs>< / Polygon>< / MultiGeometry>
< /地标>
这就是 1）如何为所有 ie）我需要以下内容： 注意： 这是我的html文件， 这是我的样本kml文件， geoxml3将KML解析为本地google.maps.Polygon对象。您可以在 获取多边形的质心： 请注意，以上只对正多边形真正起作用，所以不规则的多边形凹面边缘的中心可能不在在多边形。 I am using a That is what 1) How can I add i.e) I need the following Note: I am using geoxml3 parser to display kml layer in google maps. This is my html file, This is my sample kml file,
geoxml3 parses the KML to native google.maps.Polygon objects. You can process those polygons in the To get the centroid of the polygon: Note that the above only "really works" for regular polygons, so irregular polygons with concave edges the center might not be "in" the polygon. 这篇关于如何动态更新kml文件/图层？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
地标<>添加点 / code>标签。有什么办法可以动态添加吗？我的kml文件有5000个以上的地标。 2）点标记坐标将引用多边形的中心。
<标>
<名称> Spot 2< / name>
< description> .....< / description>
< styleUrl> ....< / styleUrl>
< MultiGeometry>< Polygon>< outerBoundaryIs>< LinearRing>< coordinates>
.........
< / coordinates>< / LinearRing>< / outerBoundaryIs>< / Polygon>< / MultiGeometry>
< Point>
<坐标> 144.253，-36.6632,0< /坐标>
< / Point>
< /地标>
pre> <！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title> KML层< / title>
< style>
html，body，＃map-canvas {
height：100％;
margin：0px;
填充：0px
}
< / style>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true>< / script>
< script type =text / javascriptsrc =http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js>< / script>
< script type =text / javascriptsrc =http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js>< / script>
< script>
函数initialize（）{
var usa = new google.maps.LatLng（41.875696，-87.624207）;
var mapOptions = {
zoom：4，
center：usa，
mapTypeId：google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）;
var myParser = new geoXML3.parser（{
map：map
}）;
var kml = myParser.parse（'http：//localhost/test/DFWNorth.kml'）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map-canvas>< / div>
< / body>
< / html>
<？xml version =1.0encoding =UTF-8？>
< kml xmlns =http://www.opengis.net/kml/2.2
xmlns：gx =http://www.google.com/kml/ext/2.2> ;
<文件>
<名称>房地产门户美国地块< /名称>
< open> 1< / open>
< Style id =parcel>
< LineStyle>
< color> ff48a7ff< / color>
< width> 1< / width>
< / LineStyle>
< PolyStyle>
< outline> 1< / outline>
< color> 00ffffff< / color>
< / PolyStyle>
< / style>
< Style id =hl_parcel>
< IconStyle>
< scale> 0.3< / scale>
<图标>
< href> http：//bus.w.pw/R.png< / href>
< /图标>
< / IconStyle>
< LabelStyle>
< color> 9900ffff< / color>
< scale> 1< / scale>
< / LabelStyle>
< LineStyle>
< color> ff00ffff< / color>
< width> 1.5< / width>
< / LineStyle>
< PolyStyle>
< outline> 1< / outline>
< color> 5f000000< / color>
< / PolyStyle>
< / style>
<文件夹>
< open> 1< / open>
<名称>选定宗地< /名称>
<地标>
< name><！[CDATA [1100 N 27TH Ave]]>< / name>
< description>
............
< / description>
< styleUrl>＃hl_parcel< / styleUrl>
< MultiGeometry>
< Polygon>
< outerBoundaryIs>
< LinearRing>
将坐标> -97.032117983752471,32.928768626517076 -97.024643584146915,32.923035186813181 -97.024619516424863,32.923056622674181 -97.023311876445746,32.922172553473487 -97.023027365973348,32.921986354508512 -97.022978167636879,32.921954156605246 -97.022101518923066,32.921458657105333 -97.021852382220004,32.921328433111441 -97.021603007761968,32.921212207649802 -97.021353262564418,32.921103685381986 -97.020040739077089 ，32.92059307329437 -97.019977072943703,32.920561642411542 -97.019978949582082,32.920357989560173 -97.019981935486342,32.920034178750491 -97.032338461906804,32.92018039810069 -97.03217983292177,32.928807043604458 -97.032117983752471,32.928768626517076< / coordinates>
< / LinearRing>
< / outerBoundaryIs>
< / Polygon>
< / MultiGeometry>
< /地标>
.........
...........
afterParse 函数中处理这些面：
$ b
var myParser =新的geoXML3.parser（{
map：map，
afterParse：useTheData
}）;
var kml = myParser.parse（'kml / SO_20150619a.kml'）;
函数useTheData（doc）{
for（var i = 0; i< doc [0] .gpolygons.length; i ++）{
var centroid = new google.maps.Marker {map：map，position：get_polygon_centroid（doc [0] .gpolygons [i] .getPath（）。getArray（））}）;
//来自http://stackoverflow.com/questions/9692448/how-can-you-find-the-centroid-of- a-concave-irregular-polygon-in-javascript
function get_polygon_centroid（pts）{
var first = pts [0]，last = pts [pts.length-1]; （first.lat（）！= last.lat（）|| first.lng（）！= last.lng（））pts.push（first）;
if（first.lat
var twicearea = 0，
x = 0，y = 0，
nPts = pts.length，
p1，p2，f; （var i = 0，j = nPts-1; i< nPts; j = i ++）{
p1 = pts [i]; p2 = pts [j];
f = p1.lat（）* p2.lng（） - p2.lat（）* p1.lng（）;
两次地区+ = f;
x + =（p1.lng（）+ p2.lng（））* f;
y + =（p1.lat（）+ p2.lat（））* f;
}
f =两次地区* 3;
返回新的google.maps.LatLng（y / f，x / f）;
}
kml file for displaying map with custom boundary lines. That kml file is downloaded from some website. In that file, inside the placemark tag there is no point tag for display icons. Eg:<Placemark>
<name>Spot 2</name>
<description>.....</description>
<styleUrl>....</styleUrl>
<MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>
.........
</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>
</Placemark>
placemark tag contains in my kml file. And I need,point tag for all placemark tag. Is there any way to add dynamically?. My kml file has 5000 and above placemarks. 2) Point tag coordinates will refers to the center of the polygon.<Placemark>
<name>Spot 2</name>
<description>.....</description>
<styleUrl>....</styleUrl>
<MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>
.........
</coordinates></LinearRing></outerBoundaryIs></Polygon></MultiGeometry>
<Point>
<coordinates>144.253,-36.6632,0</coordinates>
</Point>
</Placemark>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script>
function initialize() {
var usa = new google.maps.LatLng(41.875696,-87.624207);
var mapOptions = {
zoom: 4,
center: usa,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var myParser = new geoXML3.parser({
map: map
});
var kml = myParser.parse('http://localhost/test/DFWNorth.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2"
xmlns:gx="http://www.google.com/kml/ext/2.2">
<Document>
<name>Real Estate Portal USA Parcels</name>
<open>1</open>
<Style id="parcel">
<LineStyle>
<color>ff48a7ff</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<outline>1</outline>
<color>00ffffff</color>
</PolyStyle>
</Style>
<Style id="hl_parcel">
<IconStyle>
<scale>0.3</scale>
<Icon>
<href>http://bus.w.pw/R.png</href>
</Icon>
</IconStyle>
<LabelStyle>
<color>9900ffff</color>
<scale>1</scale>
</LabelStyle>
<LineStyle>
<color>ff00ffff</color>
<width>1.5</width>
</LineStyle>
<PolyStyle>
<outline>1</outline>
<color>5f000000</color>
</PolyStyle>
</Style>
<Folder>
<open>1</open>
<name>Selected Parcels</name>
<Placemark>
<name><![CDATA[1100 N 27TH Ave]]></name>
<description>
............
</description>
<styleUrl>#hl_parcel</styleUrl>
<MultiGeometry>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>-97.032117983752471,32.928768626517076 -97.024643584146915,32.923035186813181 -97.024619516424863,32.923056622674181 -97.023311876445746,32.922172553473487 -97.023027365973348,32.921986354508512 -97.022978167636879,32.921954156605246 -97.022101518923066,32.921458657105333 -97.021852382220004,32.921328433111441 -97.021603007761968,32.921212207649802 -97.021353262564418,32.921103685381986 -97.020040739077089,32.92059307329437 -97.019977072943703,32.920561642411542 -97.019978949582082,32.920357989560173 -97.019981935486342,32.920034178750491 -97.032338461906804,32.92018039810069 -97.03217983292177,32.928807043604458 -97.032117983752471,32.928768626517076</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</MultiGeometry>
</Placemark>
.........
...........
afterParse function:var myParser = new geoXML3.parser({
map: map,
afterParse: useTheData
});
var kml = myParser.parse('kml/SO_20150619a.kml');
function useTheData(doc) {
for (var i=0; i < doc[0].gpolygons.length; i++) {
var centroid = new google.maps.Marker({map:map,position: get_polygon_centroid(doc[0].gpolygons[i].getPath().getArray())});
}
}
// from http://stackoverflow.com/questions/9692448/how-can-you-find-the-centroid-of-a-concave-irregular-polygon-in-javascript
function get_polygon_centroid(pts) {
var first = pts[0], last = pts[pts.length-1];
if (first.lat() != last.lat() || first.lng() != last.lng()) pts.push(first);
var twicearea=0,
x=0, y=0,
nPts = pts.length,
p1, p2, f;
for ( var i=0, j=nPts-1 ; i<nPts ; j=i++ ) {
p1 = pts[i]; p2 = pts[j];
f = p1.lat()*p2.lng() - p2.lat()*p1.lng();
twicearea += f;
x += ( p1.lng() + p2.lng() ) * f;
y += ( p1.lat() + p2.lat() ) * f;
}
f = twicearea * 3;
return new google.maps.LatLng(y/f, x/f);
}
