Question

这是我的Polymer元素。它基本上是openlayers的绘图示例的副本。

这是有效的fiddle这证明我的剧本中没有错误，而且它与Polymer有关。

<link rel="import" href="/static/bower_components/polymer/polymer.html">
<script src="/static/bower_components/openlayers3/build/ol.js" type="text/javascript"></script>
<polymer-element name="my-map">

    <template>

<link rel="stylesheet" href="/static/bower_components/openlayers3/build/ol.css" type="text/css">
        <style>


            .map {
                height: 100%;
                width: 100%;
            }
        </style>

        <h2>My Map</h2>
        <div id="map" class="map"></div>
    </template>

    <script>
        Polymer({

            domReady: function() {


                this.map = new ol.Map({
                    target: this.$.map,
                    layers: [
                      new ol.layer.Tile({
                        source: new ol.source.MapQuest({layer: 'sat'})
                      })
                    ],
                    view: new ol.View({
                      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
                      zoom: 4
                    })
                    });

                var featureOverlay = new ol.FeatureOverlay({
                  style: new ol.style.Style({
                    fill: new ol.style.Fill({
                      color: 'rgba(255, 255, 255, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                      color: '#ffcc33',
                      width: 2
                    }),
                    image: new ol.style.Circle({
                      radius: 7,
                      fill: new ol.style.Fill({
                        color: '#ffcc33'
                      })
                    })
                  })
                });
                featureOverlay.setMap(this.map);


                var modify = new ol.interaction.Modify({
                  features: featureOverlay.getFeatures(),
                  // the SHIFT key must be pressed to delete vertices, so
                  // that new vertices can be drawn at the same position
                  // of existing vertices
                  deleteCondition: function(event) {
                    return ol.events.condition.shiftKeyOnly(event) &&
                        ol.events.condition.singleClick(event);
                  }
                });
                this.map.addInteraction(modify);


                var draw = new ol.interaction.Draw({
                    features: featureOverlay.getFeatures(),
                    type: "LineString"
                });
                this.map.addInteraction(draw);


            }

        })
    </script>


</polymer-element>

以下是我使用元素的方法。

<html>

<head>
    <link rel="import" href="/static/bower_components/polymer/polymer.html">
    <link rel="import" href="/static/bower_components/my-map/my-map.html">
    <style>
      html, body {
        margin: 0;
        height: 100%;
      }
    </style>
  </head>


  <body unresolved>
    <my-map longitude="37.5" latitude="55.5" zoom="9">
    </my-map>


  </body>

</html>

Answer 1

绘制交互不起作用，因为代码在处理事件[1]之前检查是否正确定义了地图。由于地图视口位于阴影中，因此test [2]条件为false，并且不会继续执行该事件。

（简而言之：你的代码很好，这是一个openlayers bug）

[1] https://github.com/openlayers/ol3/blob/master/src/ol/interaction/drawinteraction.js#L251

[2] https://github.com/openlayers/ol3/blob/master/src/ol/map.js#L1140

绘图在使用Polymer的openlayers3中不起作用

1 个答案: