四章-49-拖放数据文件渲染要素

作者: 彩云飘过 | 来源:发表于2020-04-07 18:48 被阅读0次

四章-49-拖放数据文件渲染要素
Qgis从数据库读数据到渲染当前视图
前端面试05：说一下 HTML5 drag api
HTML5 之 Drag
四章-48-使用GPX数据渲染要素
四章-46-使用KML文件渲染要素
姜乐文魁大脑思维导图武林计划No26
011 HTML5 拖放事件 01
HTML5拖放API附带示例
OpenLayers官方教程-使用Canvas 2D渲染陨石

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1049.html ，对应的官网示例 https://openlayers.org/en/latest/examples/drag-and-drop.html

https://openlayers.org/en/latest/examples/drag-and-drop-image-vector.html?q=Drag

向map添加ol.interaction.DragAndDrop
拖拽文件到map时，会触发ol.interaction.DragAndDrop的addfeature事件，通过绑定的function获取到事件对象event所包含的要素数组。
将要素数组添加到矢量图层。

image.png

<!DOCTYPE html>
<html>

<head>
 <title>拖放数据文件渲染要素</title>
 <link rel="stylesheet" href="../include/ol.css" type="text/css" />
 <script src="../include/ol.js"></script>
</head>

<body>
 <div id="info">&nbsp;</div>
 <div>&nbsp 拖放 GPX, GeoJSON, IGC, KML, 或者 TopoJSON格式的文件到地图上，本例会将矢量文件渲染成图像。</div>
 <div id="map" class="map"></div>

 <script>
 
 //扩展拖拽交互操作
   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: 'Aerial',
           key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
         })
       })
     ],
     target: 'map',
     view: new ol.View({
       center: [0, 0],
       zoom: 2
     })
   });

   //当拖拽时，增加要素到底图上
   dragAndDropInteraction.on('addfeatures', function (event) {
     var vectorSource = new ol.source.Vector({
       features: event.features
     });
     map.addLayer(new ol.layer.Vector({
       renderMode: 'image',
       source: vectorSource
     }));
     map.getView().fit(vectorSource.getExtent()); //获取矢量数据源的四至，将地图视图与地图范围进行适配
   });

   //鼠标悬停，显示要素信息
   var displayFeatureInfo = function (pixel) {
     var features = [];
     map.forEachFeatureAtPixel(pixel, function (feature) {
       features.push(feature);
     });
     if (features.length > 0) {
       var info = [];
       var i, ii;
       for (i = 0, ii = features.length; i < ii; ++i) {
         info.push(features[i].get('name'));
       }
       document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
     } else {
       document.getElementById('info').innerHTML = '&nbsp;';
     }
   };

   map.on('pointermove', function (evt) {
     if (evt.dragging) {
       return;
     }
     var pixel = map.getEventPixel(evt.originalEvent);
     displayFeatureInfo(pixel);
   });

   map.on('click', function (evt) {
     displayFeatureInfo(evt.pixel);
   });
 </script>
</body>

</html>