Question

我试图在开放层3中的地图上显示标记。下面是我使用的代码。有人可以帮我找到问题，因为它没有在给定的位置显示任何图标。

var app = angular.module('Openlayers', []);

//The list of points to be connected
var dataSource1 = [{
    "title": 'Duero',
    "lat": '40.480243',
    "lng": '-3.866172',
    "description": 'This is Duero'
}, {
    "title": 'Reyes Catolicos',
    "lat": '49.47806',
    "lng": '-1.870937',
    "description": 'This is Reyes Catolicos'
}, {
    "title": 'Guadarrama',
    "lat": '58.478998',
    "lng": '-2.878755',
    "description": 'This is Guadarrama'
}];

var defaultIconPath = 'images/location.jpg';
var centerPosition = dataSource1[1];
var vehicleIconpath = 'images/vehicle.ico';

我使用下面的调用来调用方法：

 $scope.populateMarkers($scope.dataPoints, defaultIconPath);



$scope.populateMarkers = function (data, iconPath) {
        var features = [];

        angular.forEach(data, function (value, key) {
            debugger;

            var iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([value.lng, value.lat], 'EPSG:4326',
                'EPSG:3857'))
            });


            var iconStyle = new ol.style.Style({
                image: new ol.style.Icon(({
                    anchor: [0.5, 46],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    opacity: 0.75,
                    src: iconPath
                }))
            });

            iconFeature.setStyle(iconStyle);
            features.push(iconFeature);
        });
        var vectorSource = new ol.source.Vector({
            features: features
        });

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });

        map.addLayer(vectorLayer);
    }

Answer 1

Openlayers不喜欢数据格式错误的情况。
您的坐标必须为NUMERIC ，但现在它们是字符串。只是做：

var iconFeature = new ol.Feature({
     geometry: new ol.geom.Point(ol.proj.transform([parseFloat(value.lng), parseFloat(value.lat)], 'EPSG:4326', 'EPSG:3857'))
});

将它们解析为漂浮，你会没事的。

如何在Open layer 3

1 个答案: