简体   繁体   中英

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

GeoJson file coordinates are in [X, Y] meters not in [lng, lat]. How to display it on google map?

GeoJson data

{
  "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?

also we must have to use addGeoJson or loadGeoJson method because we have 200MB data in GeoJson file.

Converting in the backend would be better but there's a JS way too -- using proj4js and epsg.io to find the corresponding datums.

Important point: the first and last positions of the linear ring need to be identical. Otherwise your GeoJSON is not valid . So notice how my points array starts and ends w/ the same point.


After installing / importing 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:

在此处输入图片说明

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM