Openlayers之拖拽加载矢量数据

来源：互联网发布：工资软件编辑：程序博客网时间：2024/05/19 11:49

1、在日常工作和生活中，我们需要打开某个文件或者加载某些数据的时候，往往通过拖拽的方式来加载或者打开，这样比较直接和方便，那么我们能否使用Openlayers来实现拖拽加载矢量数据呢？答案当然是肯定的，Openlayers为我们提供了一个DragAndDrop的交互式控件，它有一个addfeatures事件，那么我们就可以利用这一点，在把数据拖入地图视口的时候，触发addfeatures事件，从而加载数据，下面我们就来一起实现；

2、代码实现

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <link href="../css/ol.css" rel="stylesheet" />    <script src="../lib/ol/ol.js"></script>    <script type="text/javascript">        window.onload = function () {            //填充样式            var fill = new ol.style.Fill({                color: 'rgba(0,0,0,0.2)'            });            //笔触            var stroke = new ol.style.Stroke({                color: 'rgba(0,0,0,0.4)'            });            //点样式            var circle = new ol.style.Circle({                radius: 6,                fill: fill,                stroke: stroke            });            //矢量图层样式            var vectorStyle = new ol.style.Style({                fill: fill,                stroke: stroke,                image: circle            });            //创建一个拖拽交互控件            var dragAndDrop = new ol.interaction.DragAndDrop({                //formatConstructors:Array.<function(new:ol.format.Feature)>                //表示支持哪些可以拖进来的文件格式                formatConstructors: [                  ol.format.GPX,                  ol.format.GeoJSON,                  ol.format.IGC,                  ol.format.KML,                  ol.format.TopoJSON                ]            });                       //addfeatures事件：在要素被添加的时候触发            dragAndDrop.on('addfeatures', function (event) {                //event是ol.interaction.DragAndDrop.Event事件类型                //ol.interaction.DragAndDrop.Event成员：                //features{Array.<ol.Feature>}{undefined} ——The features parsed from dropped data.                //projection{ol.proj.Projection} {undefined} ——The feature projection.                //创建矢量数据源                var vectorSource = new ol.source.Vector({                    features: event.features,                    projection: event.projection                });                //添加矢量数据图层到map中                map.addLayer(new ol.layer.Vector({                    source: vectorSource,                    style: vectorStyle                }));                //获取地图的视图                var view = map.getView();                //自适应区域                view.fit(vectorSource.getExtent(), map.getSize());            });            //创建一个OSM瓦片图层            var layer = new ol.layer.Tile({                source: new ol.source.OSM()            });            //中心点坐标            var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');            //地图视图            var view = new ol.View({                center: center,                zoom: 1            });            //创建Map            var map = new ol.Map({                target: 'map',                layers: [layer],                view: view            });            //加载拖拽交互控件到地图中            map.addInteraction(dragAndDrop);        };    </script></head><body>    <div id="map"></div></body></html>

3、结果展示

我们先在浏览器中打开该页面：

然后找到一个geojson格式的文件：

再将其拖入到地图视口中：

countries.geojson文件立即就被加载到地图中：

我们再用同样的方式加载另一个geojson文件，地图视图会自动跳转到该位置，这就是fit自适应区域的作用：

阅读全文

0 0