Question

我是openlayers的新手，也是javascript的初学者，但我现在已经尝试了3天3夜。我的代码似乎还可以，但有些东西我错过了，只是无法搞清楚我有这个问题，我在地图上找不到几何点。我的代码是这样的： // HTML

<!doctype html>
<head>
    <title> Me OpenStreetMap </title>
    <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
    <link rel="stylesheet" href="../assets/ol3/css/samples.css" type="text/css" />
</head>
<body>

    <div id="map"></div>
    <script src="../assets/ol3/js/ol.js"></script>

    <script>

// style for geometric layer
var meStyle = new ol.style.Circle({
  radius: 20,
  fill: new ol.style.Fill({
    color: '#ff9900',
    opacity: 1
  }),
  stroke: new ol.style.Stroke({
    color: '#ffcc00',
    opacity: 1
  })
});
// geometric layer
var geoLayer = new ol.layer.Vector({
source : new ol.source.Vector({
projection : 'EPSG:3857',
url : '../data/json.json',
format: new ol.format.GeoJSON(),
style: meStyle
})
});

        // create layer
        var osmLayer = new ol.layer.Tile({
        source : new ol.source.OSM()
        });


        // create view 
        var yaounde = new ol.proj.transform([11.5653, 3.86617], 
        'EPSG:4326', 'EPSG:3857'
        );
        var view = new ol.View({
        center: yaounde,
        zoom: 15
        });

        // create map 
        var map = new ol.Map({
        target: 'map'
        });

        map.addLayer(osmLayer, geoLayer);
        map.setView(view);
    </script>

</body>
</html>

//以GeoJSON

{"type":"FeatureCollection",

    "features":
    [
    {"type":"Feature","properties":{"Name":"","Description":""},"geometry":{"type":"Point","coordinates":[0.0,0.0]}},
    {"type":"Feature","properties":{"Name":"1","Description":""},"geometry":{"type":"Point","coordinates":[11.50728,3.87471,0.0]}},
    {"type":"Feature","properties":{"Name":"2","Description":""},"geometry":{"type":"Point","coordinates":[11.5072,3.8759,0.0]}},
    {"type":"Feature","properties":{"Name":"3","Description":""},"geometry":{"type":"Point","coordinates":[11.5032,3.87556,0.0]}},
    {"type":"Feature","properties":{"Name":"4","Description":""},"geometry":{"type":"Point","coordinates":[11.50291,3.87552,0.0]}},
    {"type":"Feature","properties":{"Name":"5","Description":""},"geometry":{"type":"Point","coordinates":[11.50278,3.87573,0.0]}},
    {"type":"Feature","properties":{"Name":"6","Description":""},"geometry":{"type":"Point","coordinates":[11.50316,3.87621,0.0]}},
    {"type":"Feature","properties":{"Name":"7","Description":""},"geometry":{"type":"Point","coordinates":[11.50347,3.87611,0.0]}},
    {"type":"Feature","properties":{"Name":"8","Description":""},"geometry":{"type":"Point","coordinates":[11.50314,3.8763,0.0]}},
    {"type":"Feature","properties":{"Name":"9","Description":""},"geometry":{"type":"Point","coordinates":[11.50325,3.87652,0.0]}},
    {"type":"Feature","properties":{"Name":"10","Description":""},"geometry":{"type":"Point","coordinates":[11.50356,3.87558,0.0]}},
    {"type":"Feature","properties":{"Name":"11","Description":""},"geometry":{"type":"Point","coordinates":[11.5033,3.87564,0.0]}},
    {"type":"Feature","properties":{"Name":"12","Description":""},"geometry":{"type":"Point","coordinates":[11.50397,3.87586,0.0]}},
    {"type":"Feature","properties":{"Name":"13","Description":""},"geometry":{"type":"Point","coordinates":[11.50299,3.87641,0.0]}},
    {"type":"Feature","properties":{"Name":"14","Description":""},"geometry":{"type":"Point","coordinates":[11.50279,3.8771,0.0]}},
    {"type":"Feature","properties":{"Name":"15","Description":""},"geometry":{"type":"Point","coordinates":[11.50269,3.87723,0.0]}},
    {"type":"Feature","properties":{"Name":"16","Description":""},"geometry":{"type":"Point","coordinates":[11.50258,3.87722,0.0]}},
    {"type":"Feature","properties":{"Name":"17","Description":""},"geometry":{"type":"Point","coordinates":[11.49122,3.8738,0.0]}},
    {"type":"Feature","properties":{"Name":"18","Description":""},"geometry":{"type":"Point","coordinates":[11.48567,3.87447,0.0]}},
    {"type":"Feature","properties":{"Name":"19","Description":""},"geometry":{"type":"Point","coordinates":[11.48548,3.88107,0.0]}},
    {"type":"Feature","properties":{"Name":"20","Description":""},"geometry":{"type":"Point","coordinates":[11.48526,3.8812,0.0]}},
    {"type":"Feature","properties":{"Name":"21","Description":""},"geometry":{"type":"Point","coordinates":[11.48614,3.88044,0.0]}},
    {"type":"Feature","properties":{"Name":"22","Description":""},"geometry":{"type":"Point","coordinates":[11.48638,3.88033,0.0]}},
    {"type":"Feature","properties":{"Name":"23","Description":""},"geometry":{"type":"Point","coordinates":[11.48641,3.88053,0.0]}},
    {"type":"Feature","properties":{"Name":"24","Description":""},"geometry":{"type":"Point","coordinates":[11.4868,3.88029,0.0]}},
    {"type":"Feature","properties":{"Name":"25","Description":""},"geometry":{"type":"Point","coordinates":[11.48772,3.87994,0.0]}},
    {"type":"Feature","properties":{"Name":"26","Description":""},"geometry":{"type":"Point","coordinates":[11.4887,3.88057,0.0]}},
    {"type":"Feature","properties":{"Name":"27","Description":""},"geometry":{"type":"Point","coordinates":[11.48869,3.88057,0.0]}},
    {"type":"Feature","properties":{"Name":"28","Description":""},"geometry":{"type":"Point","coordinates":[11.48868,3.8807,0.0]}},
    {"type":"Feature","properties":{"Name":"29","Description":""},"geometry":{"type":"Point","coordinates":[11.4888,3.88071,0.0]}},
    {"type":"Feature","properties":{"Name":"30","Description":""},"geometry":{"type":"Point","coordinates":[11.49206,3.8775,0.0]}},
    {"type":"Feature","properties":{"Name":"31","Description":""},"geometry":{"type":"Point","coordinates":[11.49251,3.87748,0.0]}},
    {"type":"Feature","properties":{"Name":"32","Description":""},"geometry":{"type":"Point","coordinates":[11.4923,3.87783,0.0]}},
    {"type":"Feature","properties":{"Name":"33","Description":""},"geometry":{"type":"Point","coordinates":[11.49273,3.87822,0.0]}}
    ]
}

OpenStreet地图显示我无法找到分数

Answer 1

解决起来非常简单：

map.addLayer(osmLayer);
map.addLayer(geoLayer);

addLayer方法接受一个图层，只接受一个图层。使用您的代码working demo。

openlayer几何点不会显示

1 个答案: