一、引言

gis中最基础的就是空间查询，鼠标点击事件获取要素，同时我们经常要对要素进行添加与修改。这些在之前的webgis开发中都要自己去实现，现在openlayer中已经用很多类封装实现了这些功能，如select、draw、modify，方便了我们快速开发关注业务方面的开发。

二、interaction中select选取feature

这个主要是用在鼠标点击地图获取矢量图层的feature，之前我们可能会用gisserver、geotool库、后台数据库sql空间查询，现在我们可以直接在前台进行查询，而且select返回一个回调函数直接获取feature，连获取函数代码都不用写了==

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery/jquery-3.3.1.min.js"></script><link rel="stylesheet" href="js/ol.css"><script src="js/ol-debug.js"></script></head>
<body>
<div id="map" style="width: 100%"></div>
<script>var format = 'image/png';//viewvar view=new ol.View({// 设置成都为地图中心center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),zoom: 4});var vectorSource = new ol.source.Vector({url:"json/a.geojson",format:new ol.format.GeoJSON()});var vectorLayer = new ol.layer.Vector({source: vectorSource,style: styleFunction});function  styleFunction(feature,isSelect) {var _name="",_color="rgba(255, 255, 255, 0.8)";if(isSelect==true){_name=feature.get("NAME");_color= "rgba(255, 0, 0, 0.8)";}_name=map.getView().getZoom()>4?_name:"";return  new ol.style.Style({fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度color:_color}),stroke: new ol.style.Stroke({ //边界样式color: '#319FD3',width: 1}),text: new ol.style.Text({ //文本样式text:_name,font: '12px Calibri,sans-serif',fill: new ol.style.Fill({color: '#000'}),stroke: new ol.style.Stroke({color: 'red',width: 3}),//textAlign:"left",offsetX:"0"})});}//selectvar select=new ol.interaction.Select({//condition: ol.events.condition.pointerMove,layers:[vectorLayer],multi:true,style:function (feature) {return styleFunction(feature,true);}});select.on("select",function (e) {var features=e.selected;var feature=features[0];var geometry=feature.getGeometry();var attribute=  feature.getProperties();var temp=attribute["NAME"];temp=attribute.NAME;var coordinates=geometry.getCoordinates();var polygons=geometry.getPolygons();var polygon=geometry.getPolygon(0);alert(feature.get("NAME"));});// mapvar map = new ol.Map({layers: [getTdtLayer("vec_w"),getTdtLayer("cva_w")],view:view,target: 'map'});map.addLayer(vectorLayer);map.addInteraction(select);function getTdtLayer(lyr) {var urls=[];for(var i=0;i<8;i++){urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}")}var layer = new ol.layer.Tile({source: new ol.source.XYZ({urls:urls})});return layer;}
</script>
</body>
</html>

效果图如下：

此地图用的是geojson，下载地址为https://download.csdn.net/download/xcymorningsun/10648718

三、interaction中draw与modify修改feature

draw用来画要素，可以选点线面；使用select将要素选区中以后，然后使用modify修改要素，这个openlayer做得十分友好，使用也十分方便。

上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery/jquery-3.3.1.min.js"></script><link rel="stylesheet" href="js/ol.css"><script src="js/ol-debug.js"></script></head>
<body>
<div id="map" style="width: 100%"></div>
<script>var format = 'image/png';//viewvar view=new ol.View({// 设置成都为地图中心center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),zoom: 4});vectorvar vectorSource = new ol.source.Vector({features:[]});var vectorLayer = new ol.layer.Vector({source: vectorSource,style: styleFunction});function  styleFunction(feature) {var _name=feature.get("NAME");_name=map.getView().getZoom()>4?_name:"";return  new ol.style.Style({fill: new ol.style.Fill({ //矢量图层填充颜色，以及透明度color:"red"}),stroke: new ol.style.Stroke({ //边界样式color: '#319FD3',width: 1})});}// mapvar map = new ol.Map({layers: [getTdtLayer("vec_w"),getTdtLayer("cva_w")],view:view,target: 'map'});map.addLayer(vectorLayer);selectvar select=new ol.interaction.Select();map.addInteraction(select);drawvar draw = new ol.interaction.Draw({source: vectorSource,stopClick:true,freehand:false,type: "Polygon"});map.addInteraction(draw);draw.setActive(true);draw.on("drawend",function (e) {draw.setActive(false);var feature=e.feature;var wktformat= new ol.format.WKT();alert(wktformat.writeGeometry(feature.getGeometry()));});modifyvar modify = new ol.interaction.Modify({features: select.getFeatures()});map.addInteraction(modify);modify.on("modifyend",function (e) {var features=e.features.array_;var wktformat= new ol.format.WKT();alert(wktformat.writeGeometry(features[0].getGeometry()));});function getTdtLayer(lyr) {var urls=[];for(var i=0;i<8;i++){urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}")}var layer = new ol.layer.Tile({source: new ol.source.XYZ({urls:urls})});return layer;}
</script>
</body>
</html>

效果图：

四、总结

select用于鼠标点击选取要素；

draw、select、modify用于添加修改要素；

开源GIS（五）——openlayers中interaction的select、draw与modify相关推荐

gispython定义查询_Python与开源GIS：SpatiaLite 中的基本SQL数据库查询用法
Python与开源GIS教程的内容,开发了单独的内容,请打开 https://www.osgeo.cn/pygis/ 查看. 本页面的内容不再更新. 这一节我们来看一下基本的SQL语句用法.使用最通用 ...
开源GIS（七）——openlayers中单击获取要素（深度好文）
目录一.引言二.前台方法 1.interaction中select方法 2.map中forEachFeatureAtPixel方法三.gis server方法 1.wms中getfeaturei ...
开源GIS平台空间数据管理与发布技术研究
毕业论文(设计) 题目: 开源GIS平台空间数据管理与发布技术研究 2014 年 5 月摘要本文系统地分析了网络地理信息系统(Web GIS)工作原理,阐述了使用免费.开源的GIS平台的开发模式. ...
开源GIS（十五）——openlayers通过geoserver中WFS删除要素
目录一.引言二.WFS要素删除实现三.WFS要素删除原理 1.请求xml 2.postman使用 3.要素删除 4.返回xml 四.openlayers中feature的坐标信息获取五.总结 ...
开源GIS（十二）——openlayers中加载切片原理
目录一.切片加载方法 1.代码 2.代码分析 3.参数解释二.切片加载原理一.切片加载方法 1.代码 var projection = ol.proj.get('EPSG:3857');// 瓦 ...
Python与开源GIS：在OGR中使用SQL语句进行查询
属性选择与空间选择都可以看作是OGR内置的选择功能,这两种功能可以解决大部分实际中的问题.但是也有这种时候,就是进行查询时的条件比较复杂.针对这种情况,OGR也提供了更加灵活的解决方案:支持使用SQL ...
开源GIS（二）——openlayers加载Arcgis和geoserver在线离线切片
一.引言开始开源gis的不归路,第一课便是加载底图,底图目前主流的都是wmts,以后会研究一下wms,本文介绍了普通网络在线切片(如谷歌百度高德等).Arcgis在线切片与离线切片.openlaye ...
【C++】9.GIS应用：开源GIS平台开发入门（MapServer+QGIS+PostGIS+OpenLayers）
GIS地理信息处理相关. 文章目录 1. GIS软件工具 2. MapServer服务器 3. QGIS桌面软件 QGIS加载csv数据 4. PostGIS数据库 5. OpenLayers(JS) ...
开源GIS解决方案，暨GeoServer+OpenLayer结合开发总结
http://linking123.github.io/2018/07/21/%E5%BC%80%E6%BA%90GIS%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%EF% ...

开源GIS（五）——openlayers中interaction的select、draw与modify

一、引言

二、interaction中select选取feature

三、interaction中draw与modify修改feature

四、总结

开源GIS（五）——openlayers中interaction的select、draw与modify相关推荐

最新文章

热门文章