OpenLayers 3 Polymer 1.0模塊

Question

我正在嘗試制作一個與OpenLayers 3一起使用並顯示openstreetmaps的Polymer模塊。 我知道有一個使用傳單的很棒的模塊，但是我需要一些特定的功能，例如地圖方向。

無論如何，我編寫了一些代碼，並且工作了，除了我無法弄清的一件事：頁面加載時，僅顯示命令（Zoom + / Zoom-），而不顯示地圖（並且不顯示任何東西，例如標記等） 。 但是，如果我調整窗口大小（我的意思是Chrome窗口），地圖就會出現，並且一切正常！ 我在想也許與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
  });
},