简体   繁体   English

如何在 javascript google map API 上显示带有米的 geojson 数据

[英]How to display geojson data with meters on javascript google map API

GeoJson file coordinates are in [X, Y] meters not in [lng, lat]. GeoJson 文件坐标以 [X, Y] 米而不是 [lng, lat] 为单位。 How to display it on google map?如何在谷歌地图上显示?

GeoJson data GeoJson 数据

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [
                360590,
                555610
              ],
              [
                360590,
                555555.0128
              ],
              [
                360590,
                555540
              ],
              [
                360592.4439,
                555540
              ],
              [
                360600,
                555540
              ],
              [
                360600,
                555518.8277
              ]
            ]
          ]
        ]
      }
    }
  ]
}

here, [360590, 555610] - [X, Y] coordinates is in meters, Now we need to display this coordinates on google map, Is there any solution for this?这里,[360590, 555610] - [X, Y] 坐标以米为单位,现在我们需要在谷歌地图上显示这个坐标,有什么解决办法吗?

also we must have to use addGeoJson or loadGeoJson method because we have 200MB data in GeoJson file.我们还必须使用 addGeoJson 或 loadGeoJson 方法,因为我们在 GeoJson 文件中有 200MB 数据。

Converting in the backend would be better but there's a JS way too -- using proj4js and epsg.io to find the corresponding datums.在后端转换会更好,但也有一种 JS 方式——使用proj4jsepsg.io来查找相应的数据。

Important point: the first and last positions of the linear ring need to be identical.重点:线性环的第一个和最后一个位置需要相同。 Otherwise your GeoJSON is not valid .否则您的 GeoJSON无效 So notice how my points array starts and ends w/ the same point.所以请注意我的points组如何以相同的点开始和结束。


After installing / importing proj4js :安装/导入proj4js

// from https://epsg.io/27700
const EPSG_27700_DATUM = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs";

// from https://epsg.io/4326
const WGS84_DATUM = "+proj=longlat +datum=WGS84 +no_defs";

const points = [[360590,555610],[360590,555555.0128],[360590,555540],[360592.4439,555540],[360600,555540],[360600,555518.8277],[360590,555610]];

const converted_points = points.map(([lon, lat]) => {
    return proj4(EPSG_27700_DATUM, WGS84_DATUM, [lon, lat]);
});

console.info({ converted_points });

Validating that your polygon is indeed inside of GB:验证您的多边形确实在 GB 内:

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在加载的GeoJSON功能上设置地图中心,或者在使用Google Maps的3.16 JavaScript API完成loadGeoJson完成后发送什么事件? - How to set map center on loaded GeoJSON features or what event is sent upon loadGeoJson completion with 3.16 javascript API for Google Maps? 使用Google Map Javascript API从JavaScript变量渲染GeoJSON多边形叠加层 - using Google Map Javascript API to render a GeoJSON Polygon overlay from JavaScript Variable 读取Multipolygon geoJson数据并显示在传单地图上 - Read Multipolygon geoJson data and display on Leaflet map Google地图多边形距离(以米为单位) - Google Map Polygon Distance in Meters 如何通过Web Mercator Meters / Feet在Google Map上绘制图形 - How to draw graphics on Google Map from Web Mercator Meters/Feet 如何使用 GeoJSON 在地图框地图多边形上显示标签 - How to display label on mapbox map polygon with GeoJSON 如何将GeoJSON(MultiLineString)图层添加到Google Map - How to add GeoJSON(MultiLineString) layer to a Google Map 如何遍历Google Map的GeoJson Feed - How to iterate through GeoJson Feed for Google Map 谷歌地图导入geojson - Google map import geojson Google Map Javascript:如何仅在geojson城市图层的边界上显示信息窗口 - Google Map Javascript: How to show infowindow only on boundry of geojson city layer
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM