个人中心
gpt4 book ai didi

leaflet - 将 GeoJSON 放在传单 map 上 : Invalid GeoJSON object. 抛出新错误 ('Invalid GeoJSON object.' );

转载 作者：行者123 更新时间：2023-12-01 10:46:53 27 4
gpt4 key购买 nike

我在构建 GeoJSON 并将其放在 map 上的传单代码方面遇到了一些麻烦。

GeoJSON 是根据服务的 XML 响应构建的。

错误是

无效的 GeoJSON 对象。 throw new Error('Invalid GeoJSON object.');

我的代码是...

<html>
<head>
<title>Prova caricamento WMS Indirizzi del PCN</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>   
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet-src.js"></script>

<script>

    var browser = navigator.userAgent.toLowerCase();
    var isIE = (browser.indexOf("msie")>-1 || browser.indexOf("trident")>-1);


    if (isIE && window.XDomainRequest) {
                    if (window.XDomainRequest) {
                        var query = 'http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/wfs/Numeri_Civici_2012.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=IN.NUMERICIVICI.2012&SRSNAME=EPSG:4326&bbox=7.719,44.849,7.72,44.85&outputFormat=GML2';
                        var xdr = new XDomainRequest();
                        if (xdr) {
                            xdr.onload = function () {
                                addressPCN(data);                               
                            }
                            xdr.onerror = function () { 
                                alert("KO");
                            }
                            xdr.open('GET', query);
                            xdr.send();
                        }
                    }
                }
                else {
                    var query = 'http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/wfs/Numeri_Civici_2012.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=IN.NUMERICIVICI.2012&SRSNAME=EPSG:4326&bbox=7.719,44.849,7.72,44.85&outputFormat=GML2';
                    $.ajax({
                        type: "GET",
                        url: query,
                        dataType: "text",
                        crossDomain: true,
                        success: function (data) {
                                       addressPCN(data);                                
                        },
                        error: function (response, textStatus, errorThrown) {
                            alert("KO");
                            alert(errorThrown);
                        }
                    });
                }   


    var map = L.map('map').setView([42, 12], 5);

    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'examples.map-20v6611k'
    }).addTo(map);

            function addressPCN (addressList) {

             //alert("In function addressList");
             //alert(addressList);

                     var addressPCN = '{"type": "FeatureCollection","features":[';
                     $xmlData = $.parseXML(addressList);
                     $features = $('gml\\:featureMember, featureMember', $xmlData);
                     //alert($features.length);
                     $features.each(function () {
                               var $this = $(this);
                               //alert($this.find('ms\\:nome, nome').text() + ' - ' + $this.find('ms\\:civico, civico').text());
                               addressPCN = addressPCN + '{"type": "Feature", "properties": { "popupContent": "' + $this.find('ms\\:nome, nome').text() + ' ' + $this.find('ms\\:civico, civico').text() + '", ' + '"show_on_map": true }, "geometry": { "type": "Point", "coordinates": [' + $this.find('gml\\:Point, Point').find('gml\\:coordinates, coordinates').text() + ']}},'
                     });                         
                     var addressPCN = addressPCN + ']}';

                     alert(addressPCN);

             function onEachFeature(feature, layer) {
                      if (feature.properties && feature.properties.popupContent) {
                         layer.bindPopup(feature.properties.popupContent);
                      }
                     }


                     //var addressPCN = {"type": "FeatureCollection","features":[{"type": "Feature", "properties": { "popupContent": "Via Pegolo 9", "show_on_map": true }, "geometry": { "type": "Point", "coordinates": [7.719490,44.849197]}},{"type": "Feature", "properties": { "popupContent": "Via Pegolo 8", "show_on_map": true }, "geometry": { "type": "Point", "coordinates": [7.719490,44.849197]}},]};
             L.geoJson(addressPCN, {
                   onEachFeature: onEachFeature
             }).addTo(map);
            }

</script>


您可以复制/粘贴它并在您的台式机/笔记本电脑上工作。

请注意，如果您取消注释该行.... 
//var addressPCN = {"type": "FeatureCollection","features":[{"type": "Feature", "properties": { "popupContent": "Via Pegolo 9", "show_on_map": true }, "geometry": { "type": "Point", "coordinates": [7.719490,44.849197]}},{"type": "Feature", "properties": { "popupContent": "Via Pegolo 8", "show_on_map": true }, "geometry": { "type": "Point", "coordinates": [7.719490,44.849197]}},]};

.... 你有我正在构建的 GeoJSON(你可以将它与警报消息相匹配......)。

在这种情况下，一切正常。

注意:您现在必须使用 Firefox 或 Chrome，我的代码仍然无法在 IE 中运行。

任何建议表示赞赏!

先感谢您!!

切萨雷

最佳答案

问题是我试图将字符串用作 JSON 对象。

解决方法是使用 jQuery.parseJSON 使用我的 JSON 代码 (addressPCN1) 将我的字符串转换为 Javascript JSON 对象的函数。

这是有效的代码......

<!DOCTYPE html>
<html>
 <head>
  <title>Prova caricamento WMS Indirizzi del PCN</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
 </head>
 <body>
  <div id="map" style="width: 600px; height: 400px"></div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>   
  <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet-src.js"></script>

  <script>

    var browser = navigator.userAgent.toLowerCase();
    var isIE = (browser.indexOf("msie")>-1 || browser.indexOf("trident")>-1);


    if (isIE && window.XDomainRequest) {
                    if (window.XDomainRequest) {
                        var query = 'service_url';
                        var xdr = new XDomainRequest();
                        if (xdr) {
                            xdr.onload = function () {
                          addressPCN(xdr.responseText);                             
                            }
                            xdr.onerror = function () { 
                                alert("KO");
                            }
                            xdr.open('GET', query);
                            xdr.send();
                        }
                    }
                }
                else {
                    var query = 'service_url';
                    $.ajax({
                        type: "GET",
                        url: query,
                        dataType: "text",
                        crossDomain: true,
                        success: function (data) {
                                    //alert("OK");
                                    //alert(data);
                                    addressPCN(data);                               
                                    alert($this.find('ms\\:nome, nome').text() + ' - ' + $this.find('ms\\:civico, civico').text());
                        },
                        error: function (response, textStatus, errorThrown) {
                            alert("KO");
                            alert(errorThrown);
                        }
                    });
                }   


    var map = L.map('map').setView([42, 12], 5);

    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'examples.map-20v6611k'
    }).addTo(map);

            function addressPCN (addressList) {

                     var addressPCN = '{"type": "FeatureCollection","features":[';
                     $xmlData = $.parseXML(addressList);
                     $features = $('gml\\:featureMember, featureMember', $xmlData);
                     $features.each(function () {
                               var $this = $(this);
                               //alert($this.find('ms\\:nome, nome').text() + ' - ' + $this.find('ms\\:civico, civico').text());
                               addressPCN = addressPCN + '{"type": "Feature", "properties": { "popupContent": "' + $this.find('ms\\:nome, nome').text() + ' ' + $this.find('ms\\:civico, civico').text() + '", ' + '"show_on_map": true }, "geometry": { "type": "Point", "coordinates": [' + $this.find('gml\\:Point, Point').find('gml\\:coordinates, coordinates').text() + ']}},'
                     });                         
                     var addressPCN = addressPCN + ']}';

                     alert(addressPCN);

                     var addressPCN1 = addressPCN.replace(',]}',']}');

                     alert(addressPCN1);

                     var addressPCN2 = jQuery.parseJSON(addressPCN1);

                     alert(addressPCN2);

             function onEachFeature(feature, layer) {
                      if (feature.properties && feature.properties.popupContent) {
                         layer.bindPopup(feature.properties.popupContent);
                      }
                     }

             L.geoJson(addressPCN2, {
                   onEachFeature: onEachFeature
             }).addTo(map);
            }

  </script>
 </body>
</html>

关于leaflet - 将 GeoJSON 放在传单 map 上 : Invalid GeoJSON object. 抛出新错误 ('Invalid GeoJSON object.' );，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25216165/

27 4 0
文章推荐： visual-studio - 如何在 Visual Studio 解决方案中嵌入数据库？
文章推荐： meteor :Deps.autorun 内的 collection.find().fetch() 失败
文章推荐： ipython - 为 ipython 控制台(终端)设置默认工作目录
文章推荐： r - 在 R 中访问或解析 summary() 中的元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com