javascript - 查看传单 geojson 时出现扭曲

Question

我一直在尝试在浏览器中查看一些带有传单的 GIS 文件。当我在其他页面(如 http://lsi.iiit.ac.in:8095/lsiviewer)中查看它们时或http://mapshaper.org/它们显示正确。但是，当我在传单中查看它们时，文件没有按应有的方式显示 - 它们被扭曲了。

这是 shapefile 文件: https://drive.google.com/drive/folders/0BxYlN9E2saSzSnEwMHVoRGhBYTQ?usp=sharing

以下是形状显示的“好”和“坏”方式的 2 个屏幕截图: https://drive.google.com/drive/folders/1eH89girZ7uGEos87SCY-t26IaWdauSc3?usp=sharing

我的代码:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import * as shp from 'shpjs';
import * as L from 'leaflet';

@Component({
  selector: 'page-oportunidaddetalles',
  templateUrl: 'oportunidaddetalles.html',
})
export class OportunidaddetallesPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {

    var map = L.map('map', {
        center: [51.505, -0.09],
        zoom: 13
    });


    shp("./assets/my/RETINA").then(function(geojson){
      L.geoJSON(geojson).addTo(map);
  	});


    }

}

#map{
    position: relative !important;
    height: 1200px;
    width: 900px;
  }

<!--this is from the ionic page, so it's just a div-->
<div id="map">

</div>

Answer 1

使用类似 https://mygeodata.cloud/converter/shp-to-geojson 的转换工具检查您的 SHP 文件，它似乎使用 Belge 1972/Belgian Lambert 72 (EPSG:31370) 坐标系。

图书馆Shapefile.js (即 npm 包 "shpjs" )您使用的似乎期望此投影信息位于 *.dbf 文件中，而您的数据中缺少该信息。

一旦您的 SHP 文件转换为 WGS 84 (EPSG:4326)，它就会在 Leaflet 中正常显示:

您可以使用上面链接的工具将您的文件直接转换为 GeoJSON 和 WGS 84 坐标系，这样您就不再需要 Shapefile.js。