代码之家  ›  专栏  ›  技术社区  ›  Svinjica

OpenLayers 3重投影向量层(v4.3.2)

  •  0
  • Svinjica  · 技术社区  · 7 年前

    在下面的代码中,我试图从EPSG:3765重新投影到EPSG:3857:

        proj4.defs(
            'EPSG:3765',
            '+proj=tmerc +lat_0=0 +lon_0=16.5 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
        );
    
    var map = new ol.Map({
        view: new ol.View({
            zoom: 6,
            center: ol.proj.transform([461152.65, 5108327.47], 'EPSG:3765', 'EPSG:3857')
        }),
        target: 'js-map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: 'test_1.geojson',
                    format: new ol.format.GeoJSON({
                        dataProjection: 'EPSG:3765',
                        featureProjection: 'EPSG:3857'
                    })
                })
    
            })
        ]
    });
    

    geojson文件中的坐标以米为单位,如下所示:

    "coordinates": [ [ [ 461117.98, 5108379.85 ], [ 461124.53, 5108368.39 ], [ 461132.37, 5108354.26 ], [ 461141.13, 5108341.08 ...
    

    enter image description here

    enter image description here

    我做错了什么?这是geojson坐标格式的问题还是我需要以某种方式重新投影geojson,使其与第二张图片中的一样?

    从这里你可以下载geojson并测试你是否喜欢 https://www.dropbox.com/s/ih1bh8bj4zzgutc/test_1.geojson?dl=0

    以帕夫洛斯为例,我编辑了几行,或者更准确地说;我试图使用这段代码加载本地geojson

    var geojsonObject = $.ajax({
      dataType: "json",
      url: "test_1.geojson"
    });
    

    Uncaught TypeError: (0 , Tm[a.type]) is not a function
    

    proj4.defs(
        'EPSG:3765',
        '+proj=tmerc +lat_0=0 +lon_0=16.5 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
    );
    
    var geojsonObject = $.ajax({
        dataType: "json",
        url: "test_1.geojson"
      });
    console.log(geojsonObject);
    
    var styles = {
        'Polygon': new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 5
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 1)'
            })
        })
    };
    
    var styleFunction = function(feature) {
        return styles[feature.getGeometry().getType()];
    };
    
    
    
    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON()).readFeatures(geojsonObject, {
            defaultDataProjection: ol.proj.get('EPSG:3765'),
            featureProjection: 'EPSG:3857'
        })
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
    });
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            vectorLayer
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }),
        view: new ol.View({
            center: ol.proj.transform([461117.98, 5108379.85], 'EPSG:3765', 'EPSG:3857'),
            zoom: 12
        })
    });
    

    更新3

    var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            loader: function() {
                $.ajax({
                    type: 'GET',
                    url:'test_1.geojson',
                    context: this
                }).done(function(data){
                    var format = new ol.format.GeoJSON();
                    this.addFeatures(format.readFeatures(data, {
                        defaultDataProjection: ol.proj.get('EPSG:3765'),
                        featureProjection: 'EPSG:3857'
                    }));
    
                });
            }
        })
    });
    map.addLayer(vectorLayer);
    

    但是现在我看不到我的GeoJSON特性,它似乎加载了,但没有在地图上呈现。

    我必须指出,如果我从readFeatures方法中注释这两行

    defaultDataProjection: ol.proj.get('EPSG:3765'),
    featureProjection: 'EPSG:3857'
    

    geojson确实会渲染,但渲染位置不对,就像第一张图片一样。请帮忙。。。。我真的没有眼泪了。。

    2 回复  |  直到 7 年前
        1
  •  1
  •   pavlos    7 年前

    crs

    检查此小提琴--> https://jsfiddle.net/p_tsagkis/s9vtoaak/ .

    您还需要稍微更改geojson文件。 投影的定义如下:

    {"type":"FeatureCollection",
    "crs": {
              "type": "name",
              "properties": {
                "name": "EPSG:3765"
              }
            },
            "features":[..........
    

    这样地:

    proj4.defs('urn:ogc:def:crs:EPSG::3765', proj4.defs('EPSG:3765'));

    或者将投影定义js行替换为:

    proj4.defs("urn:ogc:def:crs:EPSG::3765","+proj=tmerc +lat_0=0 +lon_0=16.5 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");

    我没有测试它,但它应该可以工作。

    ol3不知道 urn:ogc:def:crs:EPSG::3765 你只要给 proj4.defs("EPSG:3765","+proj=tmerc +lat_0=0 +lon_0=16.5 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"); 因此,您需要知道文件中存在的投影名称。

        2
  •  1
  •   fradal83    7 年前

    https://epsg.io/3765 ,该投影的边界位于意大利东部,而您希望几何图形位于意大利西部。

    我猜想您的geojson文件没有使用EPSG:3765

    推荐文章