如何完全从地图中删除已解析的 geoXml。

huangapple go评论64阅读模式
英文:

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); 删除该文档的保存数据。

将发布的代码更改为以下内容(当 existfalse 时将删除该数据):

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 实体引用(如 &quot;)更改为正常的引号以使代码更易阅读。

英文:

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(&quot;EXIST&quot;);
} else {
console.log(&quot;Doesn&#39;t Exist&quot;);
console.log(&quot;geoXml: &quot;, geoXml);
geoXml.hideDocument();
geoXml.docs.splice(0);
console.log(&quot;geoXml: &quot;, 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(&quot;map_canvas&quot;), 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, &quot;parsed&quot;, function() { // parseKmlString is sychronous, no need to wait for event
let exist = false;
for (let i = 0; i &lt; 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(&quot;EXIST&quot;);
} else {
console.log(&quot;Doesn&#39;t Exist&quot;);
console.log(&quot;geoXml: &quot;, geoXml);
geoXml.hideDocument();
geoXml.docs.splice(0);
console.log(&quot;geoXml: &quot;, geoXml);
geoXml.showDocument();
}
// });
}
google.maps.event.addDomListener(window, &quot;load&quot;, initialize);
var kml_string =
&#39;&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;&lt;kml xmlns=&quot;http://www.opengis.net/kml/2.2&quot; xmlns:gx=&quot;http://www.google.com/kml/ext/2.2&quot; xmlns:kml=&quot;http://www.opengis.net/kml/2.2&quot;&gt;&lt;Document&gt;&lt;name&gt;Untitled Project&lt;/name&gt;&lt;Style id=&quot;polystyle&quot;&gt;&lt;LineStyle&gt;&lt;color&gt;ffd27619&lt;/color&gt;&lt;width&gt;3&lt;/width&gt;&lt;/LineStyle&gt;&lt;PolyStyle&gt;&lt;color&gt;40d27619&lt;/color&gt;&lt;/PolyStyle&gt;&lt;/Style&gt;&lt;Placemark id=&quot;0EFB380192295F306ADE&quot;&gt;&lt;name&gt;Nevada&lt;/name&gt;&lt;styleUrl&gt;#polystyle&lt;/styleUrl&gt;&lt;Polygon&gt;&lt;outerBoundaryIs&gt;&lt;LinearRing&gt;&lt;coordinates&gt;-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&lt;/coordinates&gt;&lt;/LinearRing&gt;&lt;/outerBoundaryIs&gt;&lt;/Polygon&gt;&lt;/Placemark&gt;&lt;/Document&gt;&lt;/kml&gt;&#39;;

<!-- language: lang-css -->

html,
body,
#map_canvas {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Import KML&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;map_canvas&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&amp;libraries=geometry&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月26日 13:25:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/76337871.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定