leaflet加载geoJSON图层数据时报Invalid LatLng object

最新推荐文章于 2024-09-23 10:48:59 发布
最新推荐文章于 2024-09-23 10:48:59 发布
阅读量2.7k 收藏 2
点赞数 1
分类专栏： GIS JavaScript leaflet 文章标签： javascript leaflet gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwr888/article/details/126374334
版权
GIS 同时被 3 个专栏收录
26 篇文章 4 订阅
订阅专栏
JavaScript
23 篇文章 0 订阅
订阅专栏
leaflet
6 篇文章 0 订阅
订阅专栏

leaflet加载geoJSON图层数据时报Invalid LatLng object
一、问题leaflet加载geoJSON图层数据时报：Uncaught Error:Invalid LatLng object错误，如下所示
(1)Uncaught Error: Invalid LatLng object: (undefined, undefined)


(2)Uncaught Error: Invalid LatLng object: (121,39, 123,41)


二、经测试排查问题原因为geometry对象中type属性与coordinates属性不一致引起。
(1)报错代码"geometry":{ "type": "MultiPolygon", "coordinates": [[[123,41],[121,39],[126,41]]]}


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }
      #mapDiv {
        width:100%;
        height:600px;
      }
    </style>
  </head>
  <body>
    <!-- 创建一个 地图的div id 必须有 但是自定义 -->
    <div id="mapDiv"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

    <script>
    //用的腾讯地图的瓦片
    var url = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';
    //初始化 地图
    var leafletMap = L.map('mapDiv').setView([40, 123], 5);
    //将图层加载到地图上，并设置最大的聚焦还有map样式
    L.tileLayer(url, {
        maxZoom: 18,
        id: 'mapbox.streets'
    }).addTo(leafletMap);
    //增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
    L.marker([41, 123]).addTo(leafletMap);//.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    //增加一个圈，设置圆心、半径、样式
    L.circle([41, 123], 100000, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(leafletMap).bindPopup("I am a circle.");
    //增加多边形
    L.polygon([
        [41, 113],
        [39, 111],
        [41, 116]
    ]).addTo(leafletMap).bindPopup("I am a polygon.");
    //为点击地图的事件 增加popup
    var popup = L.popup();
    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(leafletMap);
    }
    leafletMap.on('click', onMapClick);

    //通过json添加图层MultiPolygon
    var testData={
     "type": "FeatureCollection",
     "name": "TestData",
     "features": [
      {"type":"Feature","properties":{"fillOpacity":0.8,"fill":"rgb(163,224,142)","value":"11"},"geometry":{ "type": "MultiPolygon", "coordinates": [[[123,41],[121,39],[126,41]]]},"id":0}
     ]
    };
    var testLayer = L.geoJSON(testData, {
      style: function (feature) {
        return {color: '#4264fb', fillColor:feature.properties.fill, weight:1, fillOpacity:feature.properties.fillOpacity};
      }
    }).addTo(leafletMap).bindPopup("I am a polygon layer.");


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


修改为"geometry":{ "type": "MultiPolygon", "coordinates": [[[[123,41],[121,39],[126,41]]]]}后正常


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }
      #mapDiv {
        width:100%;
        height:600px;
      }
    </style>
  </head>
  <body>
    <!-- 创建一个 地图的div id 必须有 但是自定义 -->
    <div id="mapDiv"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

    <script>
    //用的腾讯地图的瓦片
    var url = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';
    //初始化 地图
    var leafletMap = L.map('mapDiv').setView([40, 123], 5);
    //将图层加载到地图上，并设置最大的聚焦还有map样式
    L.tileLayer(url, {
        maxZoom: 18,
        id: 'mapbox.streets'
    }).addTo(leafletMap);
    //增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
    L.marker([41, 123]).addTo(leafletMap);//.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    //增加一个圈，设置圆心、半径、样式
    L.circle([41, 123], 100000, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(leafletMap).bindPopup("I am a circle.");
    //增加多边形
    L.polygon([
        [41, 113],
        [39, 111],
        [41, 116]
    ]).addTo(leafletMap).bindPopup("I am a polygon.");
    //为点击地图的事件 增加popup
    var popup = L.popup();
    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(leafletMap);
    }
    leafletMap.on('click', onMapClick);

    //通过json添加图层MultiPolygon
    var testData={
     "type": "FeatureCollection",
     "name": "TestData",
     "features": [
      {"type":"Feature","properties":{"fillOpacity":0.8,"fill":"rgb(163,224,142)","value":"11"},"geometry":{ "type": "MultiPolygon", "coordinates": [[[[123,41],[121,39],[126,41]]]]},"id":0}
     ]
    };
    var testLayer = L.geoJSON(testData, {
      style: function (feature) {
        return {color: '#4264fb', fillColor:feature.properties.fill, weight:1, fillOpacity:feature.properties.fillOpacity};
      }
    }).addTo(leafletMap).bindPopup("I am a polygon layer.");


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


(1)报错代码"geometry":{ "type": "Polygon", "coordinates": [[[[123,41],[121,39],[126,41]]]]}


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }
      #mapDiv {
        width:100%;
        height:600px;
      }
    </style>
  </head>
  <body>
    <!-- 创建一个 地图的div id 必须有 但是自定义 -->
    <div id="mapDiv"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

    <script>
    //用的腾讯地图的瓦片
    var url = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';
    //初始化 地图
    var leafletMap = L.map('mapDiv').setView([40, 123], 5);
    //将图层加载到地图上，并设置最大的聚焦还有map样式
    L.tileLayer(url, {
        maxZoom: 18,
        id: 'mapbox.streets'
    }).addTo(leafletMap);
    //增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
    L.marker([41, 123]).addTo(leafletMap);//.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    //增加一个圈，设置圆心、半径、样式
    L.circle([41, 123], 100000, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(leafletMap).bindPopup("I am a circle.");
    //增加多边形
    L.polygon([
        [41, 113],
        [39, 111],
        [41, 116]
    ]).addTo(leafletMap).bindPopup("I am a polygon.");
    //为点击地图的事件 增加popup
    var popup = L.popup();
    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(leafletMap);
    }
    leafletMap.on('click', onMapClick);

    //通过json添加图层MultiPolygon
    var testData={
     "type": "FeatureCollection",
     "name": "TestData",
     "features": [
      {"type":"Feature","properties":{"fillOpacity":0.8,"fill":"rgb(163,224,142)","value":"11"},"geometry":{ "type": "Polygon", "coordinates": [[[[123,41],[121,39],[126,41]]]]},"id":0}
     ]
    };
    var testLayer = L.geoJSON(testData, {
      style: function (feature) {
        return {color: '#4264fb', fillColor:feature.properties.fill, weight:1, fillOpacity:feature.properties.fillOpacity};
      }
    }).addTo(leafletMap).bindPopup("I am a polygon layer.");


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


修改为"geometry":{ "type": "Polygon", "coordinates": [[[123,41],[121,39],[126,41]]]}后正常


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }
      #mapDiv {
        width:100%;
        height:600px;
      }
    </style>
  </head>
  <body>
    <!-- 创建一个 地图的div id 必须有 但是自定义 -->
    <div id="mapDiv"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

    <script>
    //用的腾讯地图的瓦片
    var url = 'http://rt0.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0';
    //初始化 地图
    var leafletMap = L.map('mapDiv').setView([40, 123], 5);
    //将图层加载到地图上，并设置最大的聚焦还有map样式
    L.tileLayer(url, {
        maxZoom: 18,
        id: 'mapbox.streets'
    }).addTo(leafletMap);
    //增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
    L.marker([41, 123]).addTo(leafletMap);//.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    //增加一个圈，设置圆心、半径、样式
    L.circle([41, 123], 100000, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(leafletMap).bindPopup("I am a circle.");
    //增加多边形
    L.polygon([
        [41, 113],
        [39, 111],
        [41, 116]
    ]).addTo(leafletMap).bindPopup("I am a polygon.");
    //为点击地图的事件 增加popup
    var popup = L.popup();
    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(leafletMap);
    }
    leafletMap.on('click', onMapClick);

    //通过json添加图层MultiPolygon
    var testData={
     "type": "FeatureCollection",
     "name": "TestData",
     "features": [
      {"type":"Feature","properties":{"fillOpacity":0.8,"fill":"rgb(163,224,142)","value":"11"},"geometry":{ "type": "Polygon", "coordinates": [[[123,41],[121,39],[126,41]]]},"id":0}
     ]
    };
    var testLayer = L.geoJSON(testData, {
      style: function (feature) {
        return {color: '#4264fb', fillColor:feature.properties.fill, weight:1, fillOpacity:feature.properties.fillOpacity};
      }
    }).addTo(leafletMap).bindPopup("I am a polygon layer.");


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


三、总结geometry对象中type属性为"MultiPolygon"时coordinates属性为四维数组。geometry对象中type属性为"Polygon"时coordinates属性为三维数组

 

 

cwr888
关注
专栏目录
Leaflet加载JSON文件，并自定义icon显示
TechNovaX的博客
08-17 356
然后，我们创建一个标记，并将其添加到地图，使用刚才创建的自定义图标和地点名称作为弹出窗口的内容。最后，我们将main.js文件保存在与HTML页面相同的目录下，并确保JSON文件和自定义图标文件（例如icon.png）也位于相同的目录下。在上面的代码中，我们首先创建了一个地图容器，并设置初始的中心视图。接下来，我们需要创建一个HTML页面，并引入Leaflet库和相关的CSS文件。在上面的模板中，我们引入了Leaflet库和一个名为main.js的JavaScript文件。
leaflet ajax geojson,'无效的GeoJSON对象。'('Invalid GeoJSON object.' Using Leaflet and leaflet-ajax)...
weixin_29542759的博客
08-06 1556
'无效的GeoJSON对象。'('Invalid GeoJSON object.' Using Leaflet and leaflet-ajax)我正在使用传单来构建法国地图，突出显示区域，然后单击缩放。首先，我在script.js中有geojson，但在我的情况下，我需要分开的geojson文件中的区域。 所以我现在使用leaflet-ajax在script.js中调用它们，如下所示：var B...
Invalid Object: LngLat(NaN, NaN)高德地图报错
最新发布
2301_80636534的博客
09-23 444
解决方法：地图初始化之后，先进行数据渲染，再进行位置标记。原因二：地图渲染比数据渲染快，数据没有跟上导致报错。
Leaflet L.Polyline.SnakeAnim.js报错《Uncaught Error: Invalid LatLng object: (NaN, NaN)》
张_优秀的博客
09-22 2781
关于L.Polyline.SnakeAnim.js当经纬度重复出现的异常错误： Uncaught Error: Invalid LatLng object: (NaN, NaN) 表现截图： 解决方法： 在L.Polyline.SnakeAnim.js源码方法_snakeForward（76行）下添加一下代码即可 forward = (forward == 0 ? 0.00000000001 : forward); ...
Leaflet中的L.geoJSON一个坑
似水流年
11-10 7079
最近在使用 SuperMap iClient 9D for Leaflet 中的 L.supermap.queryService(url).queryByGeometry()接口 来定位某个建筑图斑时，发现2个问题。 1、查不出来 2、查出来了，却显示不出来 具体的说下： L.supermap.tiledMapLayer(url, { transparent: true, ...
Uncaught Invalid geoJson format TypeError: Cannot read properties of undefined (reading ‘length‘)
weixin_39983904的博客
10-29 2279
乡镇、街道使用echart时报错解决，在echart.js中找到函数parseGeoJSON，用下边的将其替换即可 function parseGeoJSON(geoJson, nameProperty) { geoJson = decode(geoJson); return map(filter(geoJson.features, function (featureObj) { // Output of mapshaper may have geometry nul
43.（leaflet篇）leaflet叠加geojson图层（飞地）（挖洞）.zip
10-12
在Leaflet中，我们可以使用`L.geoJSON`函数解析GeoJSON数据并将其转换为可渲染的地图图层。以下是一段示例代码： ```javascript var geojsonData = { "type": "FeatureCollection", "features": [ { "type": ...
39.（leaflet篇）leaflet叠加geojson图层（实现tooltip内部元素可点击）.rar
10-09
在本教程中，我们将深入探讨如何使用Leaflet库叠加GeoJSON图层，并实现图层上的Tooltip内部元素可点击的功能。Leaflet是一个轻量级的JavaScript库，专为Web地图设计，而GeoJSON则是一种用于存储地理数据的标准格式，...
38.（leaflet篇）leaflet叠加geojson图层.zip
10-09
7. **最后加载图层**：将GeoJSON图层添加到地图上。 ```javascript geoJsonLayer.addTo(map); ``` 以上步骤概括了如何在Leaflet地图上叠加GeoJSON图层的基本流程。博客文章可能会包含更多细节，如自定义图标、...
leaflet加载geojson叠加显示功能代码
11-21
在本文中，我们将深入探讨如何使用Leaflet来加载和叠加显示GeoJSON数据。 首先，GeoJSON数据通常需要从其他格式（如ESRI Shapefile，简称shp）转换而来。MapShaper.org是一个在线工具，可以方便地将shp文件转换为...
051：vue+leaflet 加载geojson文件，显示图形
大剑师兰特的GIS世界
02-11 927
第051个本示例的目的是介绍演示如何在vue+leaflet中加载geojson文件，将图形显示在地图上。
全国各省市GeoJson
10-15
GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
使用高德地图报错：Invalid Object: LngLat(NaN, NaN)
m0_73898841的博客
12-19 2367
这样就能显示了。
Echarts 报错 Uncaught Error: Invalid geoJson format coordinate.charCodeAt is not a function
我叫陈小皮。
01-18 2606
地图 下钻时 ，同一个区域点击多次会出现 如下图 报错 原因是 每次引入的JSON文件都是新的，应该对绘图所需的JSON文件进行缓存 因为 echarts 会绘制解析 json 之后 执行 decode 方法 后 会将其 UTF8Encoding 的值 从 true 改为false，第二次绘制 时如果 为 false 则 不需要走 decode 方法，如果每次都是新引入的 json，那每次都走 decode 就会报错 // 问题代码 // chinaJson 中国地图json // names =&gt
echarts bug:Invalid geoJson formatCannot read properties of undefined (reading ‘length‘)
qq_45796592的博客
01-29 759
echarts地图绘画解决出现的问题
Openlayers添加Geojson数据不显示
XIONGDA的博客
10-18 857
很有可能是地图投影的问题
leaflet加载geoJSON格式的点，线，面图层
qq_38436431的博客
12-15 1117
PS： 为了简洁易懂，代码做了简化不能直接运行！
Uncaught Error:Invalid geoJson format Cannot read property ‘length‘ of undefind
song854601134的博客
07-27 891
对比geojson数据发现，出现报错原因是因为数据类型中有GeometryCollection存在。经分析，由于生成的地图里有一个区域为两块不连续的地图块，所以生成的geoJson中此区域的geometry.type===GeometryCollection。然而，echarts中对于此类型没有做处理，详情见访问官方的仓库，issues存在对应的解决方法,https。......
leaflet加载geojson数据_Vue中使用Leaflet加载地图
qq_34736893的博客
05-25 976
https://blog.csdn.net/weixin_39631932/article/details/110516179
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值