在openlayers中设置要素的位置

时间:2016-06-25 16:43:29

标签: openlayers-3

我一直在研究这个问题,似乎无法在最新的openlayers(编写本文时的第3版)的文档中找到信息......

我实际上是在拉我的头发!

我需要知道的是如何在地图上的特定位置放置一个特征(ol.feature)。

我已经使用函数服务器端抽象了经度和纬度,并使用模板标签将它们传递给js代码。

目前它正把它放在非洲海岸的海洋中间......

到目前为止我的代码是;

<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 500px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.16.0/build/ol.js" type="text/javascript"></script>
    <title>pickup point selection</title>
  </head>
  <body>
    <h2>Choose your pickup point</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var customerCoordinates = new ol.geom.Point([ {{longitude}}, {{latitude}} ]);
      var iconFeature = new ol.Feature({
        geometry: customerCoordinates,
        name: '{{postcode}}'
      });

      iconFeature.

      var iconStyle = new ol.style.Style({
        text: new ol.style.Text({
          text: '\uf015',
          font: 'normal 50px FontAwesome',
          textBaseline: 'Bottom',
          fill: new ol.style.Fill({
            color: 'black',
          })
        })
      });

      iconFeature.setStyle(iconStyle);
      iconFeature.setG

      var vectorSource = new ol.source.Vector({
        features: [iconFeature]
      });

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

      var rasterLayer = new ol.layer.Tile({
        source: new ol.source.OSM()});

      var map = new ol.Map({
          layers: [rasterLayer, vectorLayer],
          target: document.getElementById('map'),
          view: new ol.View({
              center: ol.proj.fromLonLat([ {{longitude}}, {{latitude}} ]),
              zoom: 17
              })
          });

    </script>
  </body>
</html>

非常感谢任何帮助

如果您需要更多信息,请告诉我们!

1 个答案:

答案 0 :(得分:1)

改变这个: var customerCoordinates = new ol.geom.Point([ {{longitude}}, {{latitude}} ])

对此 var customerCoordinates = new ol.geom.Point([ ol.proj.fromLonLat([ {{longitude}}, {{latitude}} ]) ])