Вот мой полимерный элемент. Это в основном копия примера рисования из 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>
