坐标转换

坐标转换也是矢量地图经常会遇到的问题,比如当前地图用的是EPSG:3857,但是矢量地图用的是EPSG:4326,这样就需要进行坐标转换。 由于OpenLayers 3为我们内置了地图格式解析器,那么自然只能依靠它来处理。 上一节中使用的.geojson文件内的坐标使用的是wgs84坐标,那么如果我们地图使用EPSG:3857,该怎么来加载?

详细实现参见代码:

<div id="map" style="width: 100%"></div>
<script type="text/javascript">

    //创建地图
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),

        ],
        view: new ol.View({ 
            center: ol.proj.fromLonLat([-72.980624870461128, 48.161307640513321]),
            zoom: 8
        }), 
        target: 'map'
    });

    // 加载矢量地图
    function addGeoJSON(src) {
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: (new ol.format.GeoJSON()).readFeatures(src, {     // 用readFeatures方法可以自定义坐标系
                    dataProjection: 'EPSG:4326',    // 设定JSON数据使用的坐标系
                    featureProjection: 'EPSG:3857' // 设定当前地图使用的feature的坐标系
                })
            })
        });
        map.addLayer(layer);
    }

    // 使用ajax获取矢量地图数据
    $.ajax({
        url: '../data/geojson/line-samples.geojson',
        success: function(data, status) {
            // 成功获取到数据内容后,调用方法添加到地图
            addGeoJSON(data);
        }
    });
</script>

代码稍微麻烦了一点,是因为目前ol.format.GeoJSON的构造参数不支持设定创建feature的坐标系,如果要支持也并不麻烦,期望后续官网能够改进。

注意,该方法可以适用于其他几种矢量地图。readFeatures这个方法在内置的几个解析类中都有。