OpenLayers 3 聚合物 1.0 模块

Question

我正在尝试制作一个 Polymer 模块来使用 OpenLayers 3 并显示 openstreetmaps。我知道有一个 great module working with leaflet 但我需要一些特定的功能，例如地图方向。

无论如何，我编写了一些代码并且它正在工作，除了一件事我无法弄清楚：当页面加载时，只有命令显示（缩放 + / 缩放 -）而不是地图（而不是任何类似的东西）作为标记等）。但是如果我调整我的 window（我的 Chrome window 我的意思）地图出现并且一切正常！我在想也许与 DOM 正在加载...

有关

模块代码：

<dom-module id="openlayer-map">
  <link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css">
  <script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>


  <style>
    :host {
      display: block;
    }

    #map
    {
      position: absolute;
      height: 100%;
    }

  </style>
  <template>

    <div id="map" class="map"></div>

    <!-- Tests
    <input is="iron-input" bind-value="{{latitude}}" placeholder="latitude">
    <input is="iron-input" bind-value="{{longitude}}" placeholder="longitude">
    -->

  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'openlayer-map',

      properties:
      {
        currentCenter: Array,
        currentView: ol.View,
        olmap: ol.Map,
        geolocation: ol.Geolocation,
        layer: Object,
        longitude:
        {
          type: Number,
          value:12.889101100000062,
          notify: true,
          observer: '_updateLongitude'

        },
        latitude: 
        {
          type: Number,
          value: 15.7622695,
          notify: true,
          observer: '_updateLatitude'

        },
        geotracking:
        {
          value: false,
          type: Boolean,
          notify: true,
        },

        elemReady: Boolean,


      },


      ready: function()
      {

        console.log('openlayer-map ready');
        this.initialConfig();
        this.elemReady = true;
        this.setCenter(this.latitude,this.longitude);
      },


      initialConfig: function()
      {
            console.log('initial config for the map...');

            this.currentView = new ol.View({
              zoom: 14
            });


            var source = new ol.source.OSM();
            this.layer =  new ol.layer.Tile();
            this.layer.setSource(source); 
            this.olmap = new ol.Map({
              layers: [this.layer],
              target: this.$.map,
              controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                  collapsible: false
                })
              }),
              view: this.currentView
            });

            // Localisation
            this.geolocation = new ol.Geolocation({
              projection: this.currentView.getProjection()
            });

            this.geolocation.setTracking(this.geotracking);
            if(this.geolocation)
            {

              var accuracyFeature = new ol.Feature();

              this.geolocation.on('change:accuracyGeometry', function() {
                accuracyFeature.setGeometry(this.geolocation.getAccuracyGeometry());
              }.bind(this));

              var positionFeature = new ol.Feature();
              positionFeature.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                  radius: 6,
                  fill: new ol.style.Fill({
                    color: '#3399CC'
                  }),
                  stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 2
                  })
                })
              }));
              this.geolocation.on('change:position', function() {
                var coordinates = this.geolocation.getPosition();
                positionFeature.setGeometry(coordinates ?
                new ol.geom.Point(coordinates) : null);
              }.bind(this));

              var featuresOverlay = new ol.layer.Vector({
                map: this.olmap,
                source: new ol.source.Vector({
                  features: [accuracyFeature, positionFeature]
                })
              });
            }
      },


      _updateLatitude: function(newValue, oldValue)
      {
            if(this.elemReady)
            {
              console.log('update latitude from '+oldValue+' to '+newValue);
              this.setCenter(newValue, this.longitude);
            }
            else
            {
              console.log('_updateLatitude: waiting element to be ready');
            }
      },

       _updateLongitude: function(newValue, oldValue)
      {
          if(this.elemReady)
          {
            console.log('update longitude from '+oldValue+' to '+newValue);
            this.setCenter(this.latitude, newValue);
          }
          else
          {
            console.log('_updateLatitude: waiting element to be ready');
          }
      },

      setCenter: function(latitude, longitude)
      {

        var center = [longitude, latitude];
        this.currentCenter = ol.proj.fromLonLat(center);
        console.log('update center of the map with latitude = '+latitude+' and longitude = '+longitude);
        this.currentView.centerOn(this.currentCenter,[400,400], [0,0]);

      },

    });
  })();
</script>

以及 Polymer 中的调用：

<openlayer-map latitude="48.853" longitude="2.35" geotracking></openlayer-map>

有线索吗？

Answer 1

找到了！需要在异步调用中进行地图初始化

attached: function()
{
  this.async(function()
  {
    this.initialConfig(); // Create your ol.Map here
  });
},

OpenLayers 3 聚合物 1.0 模块

OpenLayers 3 Polymer 1.0 module

javascript

openlayers-3

polymer-1.0