openlayers拖拽矢量数据

这个例子不错，根据数据几何类型定义样式，自动聚焦到拖入的要素类，展示要素名称。

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>Drag-and-Drop Image Vector</title>
  5     <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
  6     <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  7     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  8     <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
  9 </head>
 10 <body>
 11 <div id="map" class="map"></div>
 12 <div id="info">&nbsp;</div>
 13 <script>
 14     //定义默认样式
 15     var defaultStyle = {
 16         'Point': new ol.style.Style({
 17             image: new ol.style.Circle({
 18                 fill: new ol.style.Fill({
 19                     color: 'rgba(255,255,0,0.5)'
 20                 }),
 21                 radius: 5,
 22                 stroke: new ol.style.Stroke({
 23                     color: '#ff0',
 24                     width: 1
 25                 })
 26             })
 27         }),
 28         'LineString': new ol.style.Style({
 29             stroke: new ol.style.Stroke({
 30                 color: '#f00',
 31                 width: 3
 32             })
 33         }),
 34         'Polygon': new ol.style.Style({
 35             fill: new ol.style.Fill({
 36                 color: 'rgba(0,255,255,0.5)'
 37             }),
 38             stroke: new ol.style.Stroke({
 39                 color: '#0ff',
 40                 width: 1
 41             })
 42         }),
 43         'MultiPoint': new ol.style.Style({
 44             image: new ol.style.Circle({
 45                 fill: new ol.style.Fill({
 46                     color: 'rgba(255,0,255,0.5)'
 47                 }),
 48                 radius: 5,
 49                 stroke: new ol.style.Stroke({
 50                     color: '#f0f',
 51                     width: 1
 52                 })
 53             })
 54         }),
 55         'MultiLineString': new ol.style.Style({
 56             stroke: new ol.style.Stroke({
 57                 color: '#0f0',
 58                 width: 3
 59             })
 60         }),
 61         'MultiPolygon': new ol.style.Style({
 62             fill: new ol.style.Fill({
 63                 color: 'rgba(0,0,255,0.5)'
 64             }),
 65             stroke: new ol.style.Stroke({
 66                 color: '#00f',
 67                 width: 1
 68             })
 69         })
 70     };
 71 
 72     var styleFunction = function(feature, resolution) {
 73         var featureStyleFunction = feature.getStyleFunction();
 74         if (featureStyleFunction) {
 75             return featureStyleFunction.call(feature, resolution);
 76         } else {
 77             return defaultStyle[feature.getGeometry().getType()];
 78         }
 79     };
 80 
 81     //通过拖放处理矢量数据的输入，指定可拖入的数据类型
 82     var dragAndDropInteraction = new ol.interaction.DragAndDrop({
 83         formatConstructors: [
 84             ol.format.GPX,
 85             ol.format.GeoJSON,
 86             ol.format.IGC,
 87             ol.format.KML,
 88             ol.format.TopoJSON
 89         ]
 90     });
 91 
 92     var map = new ol.Map({
 93         interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
 94         layers: [
 95             new ol.layer.Tile({
 96                 source: new ol.source.BingMaps({
 97                     imagerySet: 'Aerial',
 98                     key: 'AvzM4FgDkpuZwkwP9DPDUwq15NUTJxHNyyUHGSXiA9JwAtAinnlPS31PvwB3hcWh'
 99                 })
100             })
101         ],
102         target: 'map',
103         view: new ol.View({
104             center: ol.proj.transform([117.3,29.2],'EPSG:4326','EPSG:3857'),
105             zoom: 8
106         })
107     });
108 
109     dragAndDropInteraction.on('addfeatures', function(event) {
110         var vectorSource = new ol.source.Vector({
111             features: event.features
112         });
113         map.addLayer(new ol.layer.Vector({
114             renderMode: 'image',//矢量图层呈现为图像。性能出色，但点符号和文本始终随视图一起旋转，像素在缩放动画期间缩放。
115             source: vectorSource,
116             style: styleFunction
117         }));
118         map.getView().fit(vectorSource.getExtent());
119     });
120 
121     //展示要素名称
122     var displayFeatureInfo = function(pixel) {
123         var features = [];
124         map.forEachFeatureAtPixel(pixel, function(feature) {
125             features.push(feature);
126         });
127         if (features.length > 0) {
128             var info = [];
129             var i, ii;
130             for (i = 0, ii = features.length; i < ii; ++i) {
131                 info.push(features[i].get('name'));
132             }
133             document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
134         } else {
135             document.getElementById('info').innerHTML = '&nbsp;';
136         }
137     };
138 
139     map.on('pointermove', function(evt) {
140         if (evt.dragging) {
141             return;
142         }
143         var pixel = map.getEventPixel(evt.originalEvent);
144         displayFeatureInfo(pixel);
145     });
146 
147     map.on('click', function(evt) {
148         displayFeatureInfo(evt.pixel);
149     });
150 </script>
151 </body>
152 </html>