绘图在带有Polymer的openlayers3中不起作用

Question

Here is my Polymer element. 这是我的聚合物元素。 It's basically a copy of drawing example from openlayers. 它基本上是来自openlayers的绘图示例的副本。

Here is working fiddle That proves that I have no errors in my script and it's related to Polymer. 这是工作小提琴，证明我的脚本没有错误，并且与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>

Here is how I use my 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

The draw interaction doesn't work because the code checks if the map is correctly defined before processing the event [1]. 绘制交互不起作用，因为代码在处理事件[1]之前会检查地图是否正确定义。 Because the map viewport is in a shadowdom, the test [2] condition is false and the event is not proceeded. 由于地图视口处于阴影区域，因此test [2]条件为false，并且事件不会继续进行。

(in short: your code is fine, it's an openlayers bug) （简而言之：您的代码很好，这是一个openlayers错误）

[1] https://github.com/openlayers/ol3/blob/master/src/ol/interaction/drawinteraction.js#L251 [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 [2] https://github.com/openlayers/ol3/blob/master/src/ol/map.js#L1140

绘图在带有Polymer的openlayers3中不起作用

问题描述

1 个解决方案

解决方案1
0 2015-03-04 17:03:13

绘图在带有Polymer的openlayers3中不起作用

问题描述

1 个解决方案

解决方案1 0 2015-03-04 17:03:13

解决方案1
0 2015-03-04 17:03:13