英文:
How to completely remove parsed geoXml from map
问题
从地图上删除由geoXml3解析的KML形状。
英文:
how to remove drawn kml shape from map which is parsed by geoXml3 so that we can parse and draw a newone.
I am only seeing method of hideDocument and showDocument on geoXml but it doesn't completely remove.
let filename = "http://localhost:5002/Nevada-2.kml";
let myLocation = { lat: 36.737061, lng: -119.7912549 };
function initialize() {
let lat = 43.502745;
let lng = -116.240845;
myLatLng = new google.maps.LatLng(lat, lng);
let zoom = 12;
let myOptions = {
zoom,
center: myLatLng,
};
// create the map
let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
let geoXml = new geoXML3.parser({
map: map,
});
geoXml.parse(filename);
google.maps.event.addListenerOnce(geoXml, "parsed", function () {
let exist = false;
for (let i = 0; i < geoXml.docs[0].placemarks.length; i++) {
let placemark = geoXml.docs[0].placemarks[i];
if (placemark.polygon) {
if (
google.maps.geometry?.poly.containsLocation(
new google.maps.LatLng(myLocation),
placemark.polygon
)
) {
exist = true;
break;
}
}
}
if (exist) {
new google.maps.Marker({
map: map,
position: myLocation,
});
console.log("EXIST");
} else {
console.log("Doesn't Exist");
console.log("geoXml: ", geoXml);
}
});
}
remove drawn kml shape from map which is parsed by geoXml3
答案1
得分: 1
不确定为什么您想要完全删除 geoXml
对象。
如果您想要这样做,请从其声明中删除 let
,然后使用 delete geoXml;
将其删除。
如果您希望 geoXml.showDocument()
不显示加载的多边形(或标记或折线),请调用 geoXml.hideDocument()
(隐藏与该KML关联的所有对象),然后使用 geoXml.docs.splice(0);
删除该文档的保存数据。
将发布的代码更改为以下内容(当 exist
为 false
时将删除该数据):
if (exist) {
new google.maps.Marker({
map: map,
position: myLocation,
});
console.log("EXIST");
} else {
console.log("Doesn't Exist");
console.log("geoXml: ", geoXml);
geoXml.hideDocument();
geoXml.docs.splice(0);
console.log("geoXml: ", geoXml);
geoXml.showDocument(); // 没有效果
}
有效的代码段:
var map;
var geoXml;
let myLocation = {
lat: 36.737061,
lng: -119.7912549
};
function initialize() {
let lat = 43.502745;
let lng = -116.240845;
myLatLng = new google.maps.LatLng(lat, lng);
let zoom = 12;
let myOptions = {
zoom,
center: myLatLng,
};
// 创建地图
let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
let marker = new google.maps.Marker({
position: myLocation,
map: map
});
geoXml = new geoXML3.parser({
map: map,
});
geoXml.parseKmlString(kml_string, geoXml.docs[0]);
let exist = false;
for (let i = 0; i < geoXml.docs[0].placemarks.length; i++) {
let placemark = geoXml.docs[0].placemarks[i];
if (placemark.polygon) {
if (
google.maps.geometry.poly.containsLocation(
new google.maps.LatLng(myLocation),
placemark.polygon
)
) {
exist = true;
break;
}
}
}
if (exist) {
new google.maps.Marker({
map: map,
position: myLocation,
});
console.log("EXIST");
} else {
console.log("Doesn't Exist");
console.log("geoXml: ", geoXml);
geoXml.hideDocument();
geoXml.docs.splice(0);
console.log("geoXml: ", geoXml);
geoXml.showDocument();
}
}
google.maps.event.addDomListener(window, "load", initialize);
var kml_string =
'<?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" xmlns:kml="http://www.opengis.net/kml/2.2"><Document><name>Untitled Project</name><Style id="polystyle"><LineStyle><color>ffd27619</color><width>3</width></LineStyle><PolyStyle><color>40d27619</color></PolyStyle></Style><Placemark id="0EFB380192295F306ADE"><name>Nevada</name><styleUrl>#polystyle</styleUrl><Polygon><outerBoundaryIs><LinearRing><coordinates>-119.9458168217553,42.09815848435698,1743.184968098506 -120.0136280431517,39.03898130098839,2759.571314474606 -114.6631133100423,35.02872903370762,148.2287681444774 -114.5754736462533,35.17759811926493,79.29195844202908 -114.7826439443366,36.09795001682222,504.6518724848692 -114.3826515827073,36.16850980887606,437.3265696852947 -114.2618037412561,35.94731934456748,1150.628738692156 -114.1585582237959,36.05914932215794,850.8799007465507 -114.0253602522288,36.21632653587633,722.0045967883513 -114.0424536177013,42.04153913557552,1577.542008078014 -119.9458168217553,42.09815848435698,1743.184968098506</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Document></kml>';
CSS:
html,
body,
#map_canvas {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Import KML</title>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
请注意,我已将代码中的 HTML 实体引用(如 "
)更改为正常的引号以使代码更易阅读。
英文:
Not sure why you want to completely remove the geoXml
object.
If you want to do that remove the let
from its declaration then use delete geoXml;
to delete it.
If you want to make it so geoXml.showDocument()
doesn't display the loaded polygon (or markers or polylines), call geoXml.hideDocument()
(to hide all the objects associated with that KML), then use geoXml.docs.splice(0);
to remove that document's saved data.
change the posted code to this (will remove that data when exist
is false
):
if (exist) {
new google.maps.Marker({
map: map,
position: myLocation,
});
console.log("EXIST");
} else {
console.log("Doesn't Exist");
console.log("geoXml: ", geoXml);
geoXml.hideDocument();
geoXml.docs.splice(0);
console.log("geoXml: ", geoXml);
geoXml.showDocument(); // has no effect
}
working code snippet:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
var map;
var geoXml;
let myLocation = {
lat: 36.737061,
lng: -119.7912549
};
function initialize() {
let lat = 43.502745;
let lng = -116.240845;
myLatLng = new google.maps.LatLng(lat, lng);
let zoom = 12;
let myOptions = {
zoom,
center: myLatLng,
};
// create the map
let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
let marker = new google.maps.Marker({
position: myLocation,
map: map
});
geoXml = new geoXML3.parser({
map: map,
});
geoXml.parseKmlString(kml_string, geoXml.docs[0]);
// google.maps.event.addListenerOnce(geoXml, "parsed", function() { // parseKmlString is sychronous, no need to wait for event
let exist = false;
for (let i = 0; i < geoXml.docs[0].placemarks.length; i++) {
let placemark = geoXml.docs[0].placemarks[i];
if (placemark.polygon) {
if (
google.maps.geometry.poly.containsLocation(
new google.maps.LatLng(myLocation),
placemark.polygon
)
) {
exist = true;
break;
}
}
}
if (exist) {
new google.maps.Marker({
map: map,
position: myLocation,
});
console.log("EXIST");
} else {
console.log("Doesn't Exist");
console.log("geoXml: ", geoXml);
geoXml.hideDocument();
geoXml.docs.splice(0);
console.log("geoXml: ", geoXml);
geoXml.showDocument();
}
// });
}
google.maps.event.addDomListener(window, "load", initialize);
var kml_string =
'<?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" xmlns:kml="http://www.opengis.net/kml/2.2"><Document><name>Untitled Project</name><Style id="polystyle"><LineStyle><color>ffd27619</color><width>3</width></LineStyle><PolyStyle><color>40d27619</color></PolyStyle></Style><Placemark id="0EFB380192295F306ADE"><name>Nevada</name><styleUrl>#polystyle</styleUrl><Polygon><outerBoundaryIs><LinearRing><coordinates>-119.9458168217553,42.09815848435698,1743.184968098506 -120.0136280431517,39.03898130098839,2759.571314474606 -114.6631133100423,35.02872903370762,148.2287681444774 -114.5754736462533,35.17759811926493,79.29195844202908 -114.7826439443366,36.09795001682222,504.6518724848692 -114.3826515827073,36.16850980887606,437.3265696852947 -114.2618037412561,35.94731934456748,1150.628738692156 -114.1585582237959,36.05914932215794,850.8799007465507 -114.0253602522288,36.21632653587633,722.0045967883513 -114.0424536177013,42.04153913557552,1577.542008078014 -119.9458168217553,42.09815848435698,1743.184968098506</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Document></kml>';
<!-- language: lang-css -->
html,
body,
#map_canvas {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Import KML</title>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论