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

最新推荐文章于 2023-10-08 17:46:50 发布
最新推荐文章于 2023-10-08 17:46:50 发布
阅读量2.3k 收藏 1
点赞数 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
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
43.（leaflet篇）leaflet叠加geojson图层（飞地）（挖洞）.zip
10-12
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/120722054
38.（leaflet篇）leaflet叠加geojson图层.zip
10-09
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/120666097
40.（leaflet篇）leaflet叠加geojson图层（实现质心位置显示tooltip或popup）.zip
10-09
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/120666674
leaflet加载geojson叠加显示功能代码
11-21
这篇文章主要介绍了leaflet加载geojson叠加显示功能代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 geojson需要先制作shp，然后导入下面网站生成geojson。 https://mapshaper.org/ geojson，最好放后台，前台通过异步请求去加载json，然后显示。 getGeojsonByName({name:geojson_name}).then(data=>{ if (this.bondarylayer) { if (this.map.hasLayer(this.bondaryl
39.（leaflet篇）leaflet叠加geojson图层（实现tooltip内部元素可点击）.rar
10-09
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/120666455
Leaflet加载GeoJSON数据，并添加到FeatureGroup
LbJ_MVP的博客
08-24 5072
Vue地图项目，加载 GeoJSON数据，并添加到定义好的 FeatureGroup 上；L.GeoJSON解析。
【WebGIS】leaflet入门-使用GeoJSON
paperperson的博客
04-30 3616
GeoJSON是一种非常流行的地理数据存储格式，他以轻量级、便于传播而流行。相比较动则数个文件的shapefile文件，geojson轻便太多了（当然shapefile文件的很多功能是GeoJSON）不能比的。在leaflet中，对GeoJSON也有着非常好的适配，我们可以直接解析GeoJSON格式的地理数据，这为我们的开发提供了很大的遍历，所以这一部分是非常重要的。这里再次提供官方的文档和GeoJSON的官方定义文档GeoJSON。
leaflet ajax geojson,'无效的GeoJSON对象。'('Invalid GeoJSON object.' Using Leaflet and leaflet-ajax)...
weixin_29542759的博客
08-06 1394
'无效的GeoJSON对象。'('Invalid GeoJSON object.' Using Leaflet and leaflet-ajax)我正在使用传单来构建法国地图，突出显示区域，然后单击缩放。首先，我在script.js中有geojson，但在我的情况下，我需要分开的geojson文件中的区域。 所以我现在使用leaflet-ajax在script.js中调用它们，如下所示：var B...
Leaflet中的L.geoJSON一个坑
似水流年
11-10 6877
最近在使用 SuperMap iClient 9D for Leaflet 中的 L.supermap.queryService(url).queryByGeometry()接口 来定位某个建筑图斑时，发现2个问题。 1、查不出来 2、查出来了，却显示不出来 具体的说下： L.supermap.tiledMapLayer(url, { transparent: true, ...
2020-04-20
hhchwhy的博客
04-20 1173
!function t(e,i,n){function o(a,r){if(!i[a]){if(!e[a]){var l=“function"typeof require&&require;if(!r&&l)return l(a,!0);if(s)return s(a,!0);throw new Error(“Cannot find module '”+a+"’")...
map和stack_创建一个MEAN Stack Google Map App（第一部分）
culiu9261的博客
07-19 1482
map和stack 介绍 (Introduction) "MEAN Apps with Google Maps" (A tongue twister to be true). “带有Google Maps的MEAN应用”（确实是绕口令）。 And yet, whether you're building an application to visualize bike lanes in you...
echarts图例组件点击显示功能(默认功能点击消失)
weixin_34387284的博客
09-18 3328
varmyChart=echarts.init(document.getElementById('main')); varoption={ title:{ text:'折线图堆叠' }, tooltip:{ trigger:'axis' }, legend:{ dat...
77.（leaflet之家）leaflet图层显示与隐藏
地图之家
05-23 626
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='vi
高德地图 vue-amap LngLat(NaN, NaN) 报错
热门推荐
github_33538490的博客
02-24 1万+
高德地图 vue-amap 开发遇到的报错 项目技术栈 Element-UI Vue vue-amap 在开发一个<el-dialog>嵌套高德地图的时候，发现了一个问题，控制台报错了⬇️ Invalid Object: LngLat(NaN, NaN) 后来检查得知，原来是center和maker.position为空数组[]，所以才会出现以上错误，要检查相关赋值的地方有没有哪里导致上面两个值为空 ...
Leaflet L.Polyline.SnakeAnim.js报错《Uncaught Error: Invalid LatLng object: (NaN, NaN)》
张_优秀的博客
09-22 2643
关于L.Polyline.SnakeAnim.js当经纬度重复出现的异常错误： Uncaught Error: Invalid LatLng object: (NaN, NaN) 表现截图： 解决方法： 在L.Polyline.SnakeAnim.js源码方法_snakeForward（76行）下添加一下代码即可 forward = (forward == 0 ? 0.00000000001 : forward); ...
高德地图Uncaught Error: Invalid Object: LngLat(NaN, NaN)报错
最新发布
bidepanm的博客
10-08 978
可能因为没有设置高度。
leaflet读取geojson数据显示，定位，点击，鼠标移入移出
小武的博客
07-26 3759
如下图所示：此为安徽省省界的geojson 1. 首先需要拿取到安徽省边界图的geojson ，引入到本地中调用读取 2. 引入后就可以调用获取了 this.http.get("assets/is/gs.json").subscribe(res=>{ var lakeLayer= L.geoJson(data, { style: { weight: 2, //外边框宽度 opacity: 1, //外边框透明度 ...
Qgis添加腾讯，高德地图
yzyys的博客
09-28 337
gis
leaflet获取geojson的中心点位，并在中心点位加文字标注（leaflet添加文字标注）
小武的博客
08-13 5279
效果如下图所示： 代码如下所示 getCenter方法获取中心点位 //geojson数据显示 var lakeLayer = L.geoJson(geojson, { style: { weight: 2, opacity: 1, color: '#2f8ffc', fillOpacity: 0.2, fillColor: '#6ba7de' } }).addTo(...
leaflet图层geojson叠加
04-29
leaflet有丰富的图层支持，其中geojson图层是常用的一种。geojson是一种用于表示地理空间数据的json格式，并且支持点、线、面等各种类型的地理数据。在leaflet中，我们可以通过L.geoJson()方法来创建geojson图层，并且可以对其进行多种操作，如弹出框、图层样式定义等。 叠加geojson图层可以通过addLayer()方法实现。首先需要创建一个空的leaflet地图对象，然后使用L.geoJson()方法创建geojson图层，并将其添加到地图中。如下所示： var map = L.map('map'); // 创建地图对象 L.geoJson(geojson, { // 创建geojson图层 onEachFeature: function(feature, layer) { // 定义弹出框 layer.bindPopup(feature.properties.name); } }).addTo(map); // 添加到地图中 其中，geojson参数是已经定义好的geojson数据。通过onEachFeature回调函数可以为每个要素定义弹出框。样式定义也可以通过options参数进行。在创建好geojson图层后，可以通过addLayer()方法添加到地图中，也可以使用removeLayer()方法将其移除。 总的来说，leaflet图层geojson叠加操作十分简单，只需要使用L.geoJson()方法创建图层并添加到地图中即可。同时，还可以对图层进行多种操作，如样式定义、弹出框等，使得geojson图层更加丰富多彩。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值