12859


OpenLayers 3でol.geom.Pointが示す位置にマーカーを表示しようとしていますが、意図した位置に表示されません。  
以下のように記述しましたが、どうやら[0,0]の位置に表示されているようです。  
ol.geom.Pointが示す位置にマーカーを表示するにはどのようにすればよいのでしょうか？

[code]

    var pos = map.getView().getCenter();
    var point = new ol.geom.Point(pos, 'XY');
    var pointer = new ol.Feature({
        geometry: point
    });
    
    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 1],
            anchorXUnits: 'fraction',
            anchorYUnits: 'fraction',
            opacity: 0.85,
            src: 'data/marker.png'
        }))
    });
    
    pointer.setStyle(iconStyle);
    
    var vectorSource = new ol.source.Vector({
        features: [pointer]
    });
    
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    
    map.addLayer(vectorLayer);
    
[/code]


CC BY-SA 3.0
2015-07-30T04:16:48.623
12821
2015-07-31T01:51:01.060
2015-07-31T01:51:01.060
10722
10722
question
openlayers
OpenLayers 3でマーカーを表示


mapとviewの作成を埋めて動くものをつくりました。これで絵は出ましたよ。  
一応中身を説明すると、mapのbaseはOpenStreetMapで投影法は球体メルカトル、地点の座標はWGS84というWebでありがちなパターンです。  
WGS84をメルカトルにtransfromした座標を使えば地図の上にマーカーを打つことができます。  
<http://openlayers.org/en/v3.6.0/examples/>
に豊富な例があるのでこんな拙いプログラムが無くてもそれを読めばたいていのことはわかりますが。

[code]

    <html>
    <head>
    <script src="ol.js"></script>
    <link type="text/css" rel="stylesheet" href="ol.css">
    </head>
    <body>
    <div id="map">
    </div>
    </body>
    <script>
    var map_ele = document.getElementById('map');
    
    var view = new ol.View({
    //      center: [0, 0],
            zoom: 10
    });
    var map = new ol.Map({
            view: view,
            layers:[
                    new ol.layer.Tile({
                            name :'Base layer by OSM',
                            source : new ol.source.MapQuest({layer:'osm'})
                    })
            ],
            target: map_ele
    });
    
    var mtfuji = [ 138.730883, 35.362859 ]; //富士山三角点 in WGS84
    var pos = ol.proj.transform(mtfuji, 'EPSG:4326', 'EPSG:3857');
    view.setCenter(pos);
    
    var point = new ol.geom.Point(pos, 'XY');
    var pointer = new ol.Feature({
            geometry: point
    });
    
    var iconStyle = new ol.style.Style({
            image: new ol.style.Icon({
                    anchor: [0.5, 1],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'fraction',
                    opacity: 0.85,
                    src: 'data/marker.png'
            })
    })
    
    pointer.setStyle(iconStyle);
    
    var vectorSource = new ol.source.Vector({
            features: [pointer]
    });
    
    var vectorLayer = new ol.layer.Vector({
            source: vectorSource
    });
    
    map.addLayer(vectorLayer);
    </script>
    </html>
    
[/code]


CC BY-SA 3.0
2015-07-31T00:05:30.093
12859
2015-07-31T00:05:30.093
8136
12821
answer