Question

我想创建一个包含2层的OpenLayers地图：

实际地图。
红点，标志着城市的中心。

我写了以下代码：

function createView() {
    return new ol.View({
        center: ol.proj.transform([132.183333, 43.35], 'EPSG:4326', 'EPSG:3857'),
        zoom: 13
    });
}
function createMapLayer() {
    return new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'osm'}),
        visibility: true
    });
}

function createCenterOfCityLayer() {
    var coordinates = [132.183333, 43.35];
    var features = new Array(1);

    features[0] = new ol.Feature(new ol.geom.Point(coordinates));

    var source = new ol.source.Vector({
        features: features
    });

    var style = [new ol.style.Circle({
        radius: 100,
        stroke: new ol.style.Stroke({
            color: 'red'
        }),
        fill: new ol.style.Fill({
            color: 'red'
        })
    })];

    var layer = new ol.layer.Vector({
        source: source,
        style: style
    });

    return layer;
}

function createMap() {
    return new ol.Map({
        target: 'map',
        layers: [
            createMapLayer(),
            createCenterOfCityLayer()
        ],
        view: createView()
    });
}
(function(){
    var app = angular.module('city-editor', [  ]);

    app.controller('CityEditorController', function(){
        this.map = createMap();
    });
})();

第一层（实际地图）在createMapLayer函数内创建，红点图层在createCenterOfCityLayer中。但是当我打开网页时，视图的中心没有显示红点。

您可以找到完整的源代码here。

我的代码有什么问题（如何更改它以便在[132.183333, 43.35]点显示红点？）

Answer 1

矢量数据必须位于视图的同一投影中，因此您必须将矢量坐标从EPSG：4326转换为EPSG：3857。

另一个选项是手工转换，而是使用矢量源中的projection属性。

干杯。

我的OpenLayers Vector层出了什么问题？

1 个答案: