一、引言

之前文章有写过如何通过WFS服务获取geojson数据，然后将整个geojson数据加载到vectorlayer图层中去，不过这种方法有个缺点就是不能实现自定义加载各种数据，虽然在获取wfs服务的时候可以通过filter进行属性或者空间筛选，但是如果需要对geojson数据中的属性进行修改添加的时候不容易控制（这在以后为每个feature在地图上同时添加气泡框功能有帮助），然后有了这篇文章。

下面先介绍如何创建feature并添加到map，然后再介绍如何修改geojson数据创建feature并添加到layer中。

二、简单要素点线面的添加

1、创建feature

    var labelCoords_org=[120,40];var labelCoords=ol.proj.transform(labelCoords_org,"EPSG:4326","EPSG:3857")var line_org=[[120,40],[122,51]];var geomPolyline= new ol.geom.LineString(line_org);geomPolyline.transform("EPSG:4326","EPSG:3857");var polygon_org=[[[120,40],[122,50],[111,45]]];var geomPolygon=new ol.geom.Polygon(polygon_org);geomPolygon.transform("EPSG:4326","EPSG:3857");var feature = new ol.Feature({geometry: new ol.geom.Point(labelCoords),name: 'My Polygon'});var featurepolyline = new ol.Feature({geometry: geomPolyline,name: 'My Polyline'});var featurepolygon= new ol.Feature({geometry:geomPolygon});

因为openlayers默认坐标为epsg:3857，这里要将创建的坐标（EPSG4326）transform到openlayers默认坐标系（EPSG3857）中，所以有了上面的坐标转换，这里需要注意的就是点线面创建的不同，除了上面的point、linestring、polygon还有

2、创建style，添加source、style到layer

   var pointTypename="xcy:point";var pointVectorSource = new ol.source.Vector({features:[feature]});var fill = new ol.style.Fill({color: '#dd942e'});var stroke = new ol.style.Stroke({color: '#cc1000',width: 1.25});var stylePoint = [new ol.style.Style({image: new ol.style.Circle({fill: new ol.style.Fill({color: 'rgba(255,0,255,0.4)'}),stroke: new ol.style.Stroke({color: '#cc3540',width: 1.25}),radius: 5}),fill: fill,stroke: stroke})];/*    var stylePoint = [new ol.style.Style({image:new ol.style.RegularShape({fill: fill,stroke: stroke,points: 3,radius: 10,//rotation: Math.PI / 4,angle: 0})})];*//*    var stylePoint = [new ol.style.Style({image:new ol.style.Icon(({anchor: [0.5, 0],anchorOrigin: 'bottom-left',anchorXUnits: 'fraction',anchorYUnits: 'pixels',src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png',scale: 0.45}))})];*/var pointVectorLayer = new ol.layer.Vector({title:"点",source: pointVectorSource,//style: styleFunction,style:styleFunction,renderMode:'image'});var polylineVectorSource = new ol.source.Vector({features:[featurepolyline]});var stylePolyline = [new ol.style.Style({stroke: stroke})];var polylineVectorLayer = new ol.layer.Vector({title:"线",source: polylineVectorSource,//style: styleFunction,style:stylePolyline,renderMode:'image'});var polygonVectorSource = new ol.source.Vector({features:[featurepolygon]});var stylePolygon = [new ol.style.Style({image: new ol.style.Circle({fill: new ol.style.Fill({color: 'rgba(255,0,255,0.4)'}),stroke: new ol.style.Stroke({color: '#cc3540',width: 1.25}),radius: 5}),fill: fill,stroke: stroke})];var polygonVectorLayer = new ol.layer.Vector({title:"面",source: polygonVectorSource,//style: styleFunction,style:stylePolygon,renderMode:'image'});

    function styleFunction(feature) {var height=feature.get("name");return new ol.style.Style({image:new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: "#389BCD",opacity: 0.5})}),text:new ol.style.Text({text:height,textAlign:"left",offsetX:5,fill: new ol.style.Fill({color: "#cd0500",opacity:1}),stroke:new ol.style.Stroke({color:"#dd942e",width:1}),font:" 14px SimHei"})});}

这里也比较简单，一个style添加到一个图层中，我在这里style用了数组放到了layer中，layer会默认使用第一个，你也可以不用数组；

style一般有下面几个属性

点使用image够了，线使用stroke，面使用stroke与fill，text使用fill、stroke等。

3、添加layer到map

    // mapvar map = new ol.Map({layers: [//tilePoint,tilePolyline,tilePolygon,pointVectorLayer,polylineVectorLayer,polygonVectorLayer],view:view,target: 'map',renderer:"canvas"});

三、WFS获取geojson数据并修改

    function showHeight() {$.ajax({type: "GET",url: gisip+gisport+'geoserver/xcy/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName='+pointTypename+'&outputFormat=application%2Fjson&maxFeatures=200',dataType:'json',success: function(data){var features=data.features;for(var i=0;i<features.length;i++){var feature=features[i];var ft=new ol.Feature({geometry:new ol.geom.Point(feature.geometry.coordinates),//attr:feature});ft.attr=feature;pointVectorSource.addFeature(ft);var dom=$("<div/>").html(feature.properties.Text);var overlay= new ol.Overlay({element:dom[0],position:feature.geometry.coordinates,positioning:"top-left"});map.addOverlay(overlay);}}});}

data即为获取获取的geojson数据，通过获取的geojson解析得到数据，然后拼接为feature，动态添加到source中，添加到layer中，这里稍微写了一个简单的overlay显示了下拼接添加的属性。

四、效果图

1、添加要素

2、要素修改拼接在地图另外一个位置，因为使用geoserver发布的所以可能看不到，代码仅供参考

五、总结

简单要素点线面的添加
WFS获取geojson数据并修改
效果图

附带全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/echarts.min.js"></script><script src="js/jquery-3.3.1.min.js"></script><link rel="stylesheet" href="js/ol.css"><script src="js/ol-debug.js"></script><script src="lib/jquery/jquery-3.3.1.min.js"></script><script src="lib/bootstrap/js/bootstrap.js"></script><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"><style>#marker {width: 20px;height: 20px;border: 1px solid #088;border-radius: 10px;background-color: #0FF;opacity: 0.5;}#vienna {text-decoration: none;color: white;font-size: 11pt;font-weight: bold;text-shadow: black 0.1em 0.1em 0.2em;}.popover{max-width:300px;min-width: 100px;}.popover-content {min-width: 700px;max-width: 1000px;}#map-switch{position:absolute;top: 50px;right: 50px;z-index: 10;padding: 10px;background-color: #ddccac;/*阴影*/box-shadow: 5px 5px 3px #888888;/*边框*/border:1px solid #9d9d9d;/*圆角*/border-radius:10px;}#map-measure{position: absolute;z-index: 10;left: 100px;top:30px;}/*测量样式*/.tooltip {position: relative;background: rgba(0, 0, 0, 0.5);border-radius: 4px;color: white;padding: 4px 8px;opacity: 0.7;white-space: nowrap;}.tooltip-measure {opacity: 1;font-weight: bold;}.tooltip-static {background-color: #ffcc33;color: black;border: 1px solid white;}.tooltip-measure:before,.tooltip-static:before {border-top: 6px solid rgba(0, 0, 0, 0.5);border-right: 6px solid transparent;border-left: 6px solid transparent;content: "";position: absolute;bottom: -6px;margin-left: -7px;left: 50%;}.tooltip-static:before {border-top-color: #ffcc33;}</style>
</head>
<body>
<div id="map" style="width: 100%"><div style="display: none;"><!-- Clickable label for Vienna --><a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a><div id="marker" title="Marker"></div><!-- Popup --><div id="popup" title="基本信息"></div></div>
</div>
<script>var webip="http://localhost:";var gisip="http://localhost:";var webport="8080/";var gisport="8080/";/*********************************************************地图初始化**********************************************************//*底图初始化*/var format = 'image/png';//view/*    var view=new ol.View({// 设置成都为地图中心center: ol.proj.transform([508881,299705],"EPSG:3857","EPSG:3857"),zoom: 18});*/var view=new ol.View({// 设置成都为地图中心center: ol.proj.transform([120,40],"EPSG:4326","EPSG:3857"),zoom: 5});//var osm=new ol.layer.Tile({source: new ol.source.OSM()});var tilePoint = new ol.layer.Tile({//visible: false,source: new ol.source.TileWMS({url: 'http://localhost:8080/geoserver/whuxcy/wms',params: {'FORMAT': format,'VERSION': '1.1.1',tiled: true,"STYLES": '',"LAYERS": 'whuxcy:point'//"exceptions": 'application/vnd.ogc.se_inimage',//tilesOrigin: 8176078.237520734 + "," + 704818.0275364731}})});var tilePolyline = new ol.layer.Tile({//visible: false,source: new ol.source.TileWMS({url: 'http://localhost:8080/geoserver/whuxcy/wms',params: {'FORMAT': format,'VERSION': '1.1.1',tiled: true,"STYLES": '',"LAYERS": 'whuxcy:polyline'//"exceptions": 'application/vnd.ogc.se_inimage',//tilesOrigin: 8176078.237520734 + "," + 704818.0275364731}})});var tilePolygon = new ol.layer.Tile({//visible: false,source: new ol.source.TileWMS({url: 'http://localhost:8080/geoserver/whuxcy/wms',params: {'FORMAT': format,'VERSION': '1.1.1',tiled: true,"STYLES": '',"LAYERS": 'whuxcy:polygon'//"exceptions": 'application/vnd.ogc.se_inimage',//tilesOrigin: 8176078.237520734 + "," + 704818.0275364731}})});/*矢量图层初始化*/var labelCoords_org=[120,40];var labelCoords=ol.proj.transform(labelCoords_org,"EPSG:4326","EPSG:3857")var line_org=[[120,40],[122,51]];var geomPolyline= new ol.geom.LineString(line_org);geomPolyline.transform("EPSG:4326","EPSG:3857");var polygon_org=[[[120,40],[122,50],[111,45]]];var geomPolygon=new ol.geom.Polygon(polygon_org);geomPolygon.transform("EPSG:4326","EPSG:3857");var feature = new ol.Feature({geometry: new ol.geom.Point(labelCoords),name: 'My Polygon'});var featurepolyline = new ol.Feature({geometry: geomPolyline,name: 'My Polyline'});var featurepolygon= new ol.Feature({geometry:geomPolygon});/var pointTypename="xcy:point";var pointVectorSource = new ol.source.Vector({features:[feature]});var fill = new ol.style.Fill({color: '#dd942e'});var stroke = new ol.style.Stroke({color: '#cc1000',width: 1.25});var stylePoint = [new ol.style.Style({image: new ol.style.Circle({fill: new ol.style.Fill({color: 'rgba(255,0,255,0.4)'}),stroke: new ol.style.Stroke({color: '#cc3540',width: 1.25}),radius: 5}),fill: fill,stroke: stroke})];/*    var stylePoint = [new ol.style.Style({image:new ol.style.RegularShape({fill: fill,stroke: stroke,points: 3,radius: 10,//rotation: Math.PI / 4,angle: 0})})];*//*    var stylePoint = [new ol.style.Style({image:new ol.style.Icon(({anchor: [0.5, 0],anchorOrigin: 'bottom-left',anchorXUnits: 'fraction',anchorYUnits: 'pixels',src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png',scale: 0.45}))})];*/var pointVectorLayer = new ol.layer.Vector({title:"点",source: pointVectorSource,//style: styleFunction,style:styleFunction,renderMode:'image'});var polylineVectorSource = new ol.source.Vector({features:[featurepolyline]});var stylePolyline = [new ol.style.Style({stroke: stroke})];var polylineVectorLayer = new ol.layer.Vector({title:"线",source: polylineVectorSource,//style: styleFunction,style:stylePolyline,renderMode:'image'});var polygonVectorSource = new ol.source.Vector({features:[featurepolygon]});var stylePolygon = [new ol.style.Style({image: new ol.style.Circle({fill: new ol.style.Fill({color: 'rgba(255,0,255,0.4)'}),stroke: new ol.style.Stroke({color: '#cc3540',width: 1.25}),radius: 5}),fill: fill,stroke: stroke})];var polygonVectorLayer = new ol.layer.Vector({title:"面",source: polygonVectorSource,//style: styleFunction,style:stylePolygon,renderMode:'image'});setTimeout(showHeight,2000);function showHeight() {$.ajax({type: "GET",url: gisip+gisport+'geoserver/xcy/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName='+pointTypename+'&outputFormat=application%2Fjson&maxFeatures=200',dataType:'json',success: function(data){var features=data.features;for(var i=0;i<features.length;i++){var feature=features[i];var ft=new ol.Feature({geometry:new ol.geom.Point(feature.geometry.coordinates),//attr:feature});ft.attr=feature;pointVectorSource.addFeature(ft);var dom=$("<div/>").html(feature.properties.Text);var overlay= new ol.Overlay({element:dom[0],position:feature.geometry.coordinates,positioning:"top-left"});map.addOverlay(overlay);}}});}function styleFunction(feature) {var height=feature.get("name");return new ol.style.Style({image:new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: "#389BCD",opacity: 0.5})}),text:new ol.style.Text({text:height,textAlign:"left",offsetX:5,fill: new ol.style.Fill({color: "#cd0500",opacity:1}),stroke:new ol.style.Stroke({color:"#dd942e",width:1}),font:" 14px SimHei"})});}// mapvar map = new ol.Map({layers: [//tilePoint,tilePolyline,tilePolygon,pointVectorLayer,polylineVectorLayer,polygonVectorLayer],view:view,target: 'map',renderer:"canvas"});function  st(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"})});}</script>
</body>
</html>

开源GIS（九）——openlayers中简单要素的添加与geojson数据修改添加相关推荐

gispython定义查询_Python与开源GIS：SpatiaLite 中的基本SQL数据库查询用法
Python与开源GIS教程的内容,开发了单独的内容,请打开 https://www.osgeo.cn/pygis/ 查看. 本页面的内容不再更新. 这一节我们来看一下基本的SQL语句用法.使用最通用 ...
mysql 表中添加数据类型_MySQL数据表添加字段（三种方式）
MySQL 数据表是由行和列构成的,通常把表的"列"称为字段(Field),把表的"行"称为记录(Record).随着业务的变化,可能需要在已有的表中添加新的字 ...
开源GIS平台空间数据管理与发布技术研究
毕业论文(设计) 题目: 开源GIS平台空间数据管理与发布技术研究 2014 年 5 月摘要本文系统地分析了网络地理信息系统(Web GIS)工作原理,阐述了使用免费.开源的GIS平台的开发模式. ...
OpenLayers基础教程——要素的编辑
1.前言在OpenLayers中,要素的编辑主要使用ol.interaction.Select和ol.interaction.Modify配合实现,下面开始介绍. 2.编辑要素编辑功能的实现很简答 ...
开源GIS（七）——openlayers中单击获取要素（深度好文）
目录一.引言二.前台方法 1.interaction中select方法 2.map中forEachFeatureAtPixel方法三.gis server方法 1.wms中getfeaturei ...
开源GIS（十五）——openlayers通过geoserver中WFS删除要素
目录一.引言二.WFS要素删除实现三.WFS要素删除原理 1.请求xml 2.postman使用 3.要素删除 4.返回xml 四.openlayers中feature的坐标信息获取五.总结 ...
开源GIS（十四）——openlayers通过geoserver中WFS更改要素
目录一.引言二.WFS更改要素实现三.WFS更改要素原理 1.请求xml 2.postman使用 3.要素修改 4.返回xml 四.总结一.引言上文介绍了通过WFS服务进行添加,在很多情况下 ...
开源GIS（十二）——openlayers中加载切片原理
目录一.切片加载方法 1.代码 2.代码分析 3.参数解释二.切片加载原理一.切片加载方法 1.代码 var projection = ol.proj.get('EPSG:3857');// 瓦 ...
开源GIS（十九）——WKT、WKB与GeoJSON
目录一.引言二.WKT.WKB.GeoJSON 三.WKT与GeoJSON 四.总结一.引言首先明确一点,WKT与WKB是OGC中的简单服务标准SFS(Simple Features Inte ...

开源GIS（九）——openlayers中简单要素的添加与geojson数据修改添加