ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
962473c3ab3c7c47ff4440a2b0681a9e97c120ee
openlayers/vectortile/examples/drag-and-drop.html
T
Andreas Hocevar 962473c3ab Add vectortile branch
2015-09-10 15:23:57 +02:00

380 lines
13 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
<script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
<title>Drag-and-Drop example</title>
</head>
<body>
<header class="navbar" role="navigation">
<div class="container" id="navbar-inner-container">
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
</div>
</header>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Drag-and-Drop example</h4>
<p id="shortdesc">Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.</p>
<div id="docs"><p>Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.</p>
</div>
<div id="tags">drag-and-drop, gpx, geojson, igc, kml, topojson</div>
<div id="api-links">Related API documentation: <ul class="inline"><li><a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a></li>,<li><a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a></li>,<li><a href="../apidoc/ol.format.GPX.html" title="API documentation for ol.format.GPX">ol.format.GPX</a></li>,<li><a href="../apidoc/ol.format.GeoJSON.html" title="API documentation for ol.format.GeoJSON">ol.format.GeoJSON</a></li>,<li><a href="../apidoc/ol.format.IGC.html" title="API documentation for ol.format.IGC">ol.format.IGC</a></li>,<li><a href="../apidoc/ol.format.KML.html" title="API documentation for ol.format.KML">ol.format.KML</a></li>,<li><a href="../apidoc/ol.format.TopoJSON.html" title="API documentation for ol.format.TopoJSON">ol.format.TopoJSON</a></li>,<li><a href="../apidoc/ol.interaction.html" title="API documentation for ol.interaction">ol.interaction</a></li>,<li><a href="../apidoc/ol.interaction.DragAndDrop.html" title="API documentation for ol.interaction.DragAndDrop">ol.interaction.DragAndDrop</a></li>,<li><a href="../apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a></li>,<li><a href="../apidoc/ol.layer.Vector.html" title="API documentation for ol.layer.Vector">ol.layer.Vector</a></li>,<li><a href="../apidoc/ol.source.BingMaps.html" title="API documentation for ol.source.BingMaps">ol.source.BingMaps</a></li>,<li><a href="../apidoc/ol.source.Vector.html" title="API documentation for ol.source.Vector">ol.source.Vector</a></li>,<li><a href="../apidoc/ol.style.Circle.html" title="API documentation for ol.style.Circle">ol.style.Circle</a></li>,<li><a href="../apidoc/ol.style.Fill.html" title="API documentation for ol.style.Fill">ol.style.Fill</a></li>,<li><a href="../apidoc/ol.style.Stroke.html" title="API documentation for ol.style.Stroke">ol.style.Stroke</a></li>,<li><a href="../apidoc/ol.style.Style.html" title="API documentation for ol.style.Style">ol.style.Style</a></li></ul></div>
</div>
</div>
<div class="row-fluid">
<div id="source-controls">
<a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
<a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
</div>
<form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
<textarea class="hidden" name="js">var defaultStyle = {
&#x27;Point&#x27;: [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: &#x27;rgba(255,255,0,0.5)&#x27;
}),
radius: 5,
stroke: new ol.style.Stroke({
color: &#x27;#ff0&#x27;,
width: 1
})
})
})],
&#x27;LineString&#x27;: [new ol.style.Style({
stroke: new ol.style.Stroke({
color: &#x27;#f00&#x27;,
width: 3
})
})],
&#x27;Polygon&#x27;: [new ol.style.Style({
fill: new ol.style.Fill({
color: &#x27;rgba(0,255,255,0.5)&#x27;
}),
stroke: new ol.style.Stroke({
color: &#x27;#0ff&#x27;,
width: 1
})
})],
&#x27;MultiPoint&#x27;: [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: &#x27;rgba(255,0,255,0.5)&#x27;
}),
radius: 5,
stroke: new ol.style.Stroke({
color: &#x27;#f0f&#x27;,
width: 1
})
})
})],
&#x27;MultiLineString&#x27;: [new ol.style.Style({
stroke: new ol.style.Stroke({
color: &#x27;#0f0&#x27;,
width: 3
})
})],
&#x27;MultiPolygon&#x27;: [new ol.style.Style({
fill: new ol.style.Fill({
color: &#x27;rgba(0,0,255,0.5)&#x27;
}),
stroke: new ol.style.Stroke({
color: &#x27;#00f&#x27;,
width: 1
})
})]
};
var styleFunction = function(feature, resolution) {
var featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
return featureStyleFunction.call(feature, resolution);
} else {
return defaultStyle[feature.getGeometry().getType()];
}
};
var dragAndDropInteraction = new ol.interaction.DragAndDrop({
formatConstructors: [
ol.format.GPX,
ol.format.GeoJSON,
ol.format.IGC,
ol.format.KML,
ol.format.TopoJSON
]
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: &#x27;Aerial&#x27;,
key: &#x27;Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3&#x27;
})
})
],
target: &#x27;map&#x27;,
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
dragAndDropInteraction.on(&#x27;addfeatures&#x27;, function(event) {
var vectorSource = new ol.source.Vector({
features: event.features
});
map.addLayer(new ol.layer.Vector({
source: vectorSource,
style: styleFunction
}));
map.getView().fit(
vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
});
var displayFeatureInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
features.push(feature);
});
if (features.length &gt; 0) {
var info = [];
var i, ii;
for (i = 0, ii = features.length; i &lt; ii; ++i) {
info.push(features[i].get(&#x27;name&#x27;));
}
document.getElementById(&#x27;info&#x27;).innerHTML = info.join(&#x27;, &#x27;) || &#x27;&amp;nbsp&#x27;;
} else {
document.getElementById(&#x27;info&#x27;).innerHTML = &#x27;&amp;nbsp;&#x27;;
}
};
map.on(&#x27;pointermove&#x27;, function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on(&#x27;click&#x27;, function(evt) {
displayFeatureInfo(evt.pixel);
});
</textarea>
<textarea class="hidden" name="css"></textarea>
<textarea class="hidden" name="html">&lt;div class=&quot;row-fluid&quot;&gt;
&lt;div class=&quot;span12&quot;&gt;
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;span4 offset4 pull-right&quot;&gt;
&lt;div id=&quot;info&quot; class=&quot;alert alert-success&quot;&gt;
&amp;nbsp;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</textarea>
<input type="hidden" name="wrap" value="l">
<input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,http://openlayers.org/en/v3.8.2/css/ol.css,http://openlayers.org/en/v3.8.2/build/ol.js">
</form>
<pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Drag-and-Drop example&lt;/title&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css"&gt;
&lt;script src="http://openlayers.org/en/v3.8.2/build/ol.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container-fluid"&gt;
&lt;div class=&quot;row-fluid&quot;&gt;
&lt;div class=&quot;span12&quot;&gt;
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;span4 offset4 pull-right&quot;&gt;
&lt;div id=&quot;info&quot; class=&quot;alert alert-success&quot;&gt;
&amp;nbsp;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
var defaultStyle = {
&#x27;Point&#x27;: [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: &#x27;rgba(255,255,0,0.5)&#x27;
}),
radius: 5,
stroke: new ol.style.Stroke({
color: &#x27;#ff0&#x27;,
width: 1
})
})
})],
&#x27;LineString&#x27;: [new ol.style.Style({
stroke: new ol.style.Stroke({
color: &#x27;#f00&#x27;,
width: 3
})
})],
&#x27;Polygon&#x27;: [new ol.style.Style({
fill: new ol.style.Fill({
color: &#x27;rgba(0,255,255,0.5)&#x27;
}),
stroke: new ol.style.Stroke({
color: &#x27;#0ff&#x27;,
width: 1
})
})],
&#x27;MultiPoint&#x27;: [new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: &#x27;rgba(255,0,255,0.5)&#x27;
}),
radius: 5,
stroke: new ol.style.Stroke({
color: &#x27;#f0f&#x27;,
width: 1
})
})
})],
&#x27;MultiLineString&#x27;: [new ol.style.Style({
stroke: new ol.style.Stroke({
color: &#x27;#0f0&#x27;,
width: 3
})
})],
&#x27;MultiPolygon&#x27;: [new ol.style.Style({
fill: new ol.style.Fill({
color: &#x27;rgba(0,0,255,0.5)&#x27;
}),
stroke: new ol.style.Stroke({
color: &#x27;#00f&#x27;,
width: 1
})
})]
};
var styleFunction = function(feature, resolution) {
var featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
return featureStyleFunction.call(feature, resolution);
} else {
return defaultStyle[feature.getGeometry().getType()];
}
};
var dragAndDropInteraction = new ol.interaction.DragAndDrop({
formatConstructors: [
ol.format.GPX,
ol.format.GeoJSON,
ol.format.IGC,
ol.format.KML,
ol.format.TopoJSON
]
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: &#x27;Aerial&#x27;,
key: &#x27;Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3&#x27;
})
})
],
target: &#x27;map&#x27;,
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
dragAndDropInteraction.on(&#x27;addfeatures&#x27;, function(event) {
var vectorSource = new ol.source.Vector({
features: event.features
});
map.addLayer(new ol.layer.Vector({
source: vectorSource,
style: styleFunction
}));
map.getView().fit(
vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
});
var displayFeatureInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
features.push(feature);
});
if (features.length &gt; 0) {
var info = [];
var i, ii;
for (i = 0, ii = features.length; i &lt; ii; ++i) {
info.push(features[i].get(&#x27;name&#x27;));
}
document.getElementById(&#x27;info&#x27;).innerHTML = info.join(&#x27;, &#x27;) || &#x27;&amp;nbsp&#x27;;
} else {
document.getElementById(&#x27;info&#x27;).innerHTML = &#x27;&amp;nbsp;&#x27;;
}
};
map.on(&#x27;pointermove&#x27;, function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on(&#x27;click&#x27;, function(evt) {
displayFeatureInfo(evt.pixel);
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="./resources/common.js"></script>
<script src="./resources/prism/prism.min.js"></script>
<script src="loader.js?id=drag-and-drop"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink