javascript - 我的 OpenLayers 矢量图层出了什么问题？

Question

我想创建一个包含 2 层的 OpenLayers map :

1. 实际 map 。
2. 一个红点，标志着城市的中心。

我写了以下代码:

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();
    });
})();

第一层(实际 map )是在 createMapLayer 函数内创建的，即红点图层 - 在 createCenterOfCityLayer 中。但是当我打开网页时， View 中心没有显示红点。

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

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

Answer 1

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

另一种选择，而不是手动进行变换，是使用矢量源中的projection属性。

干杯。