开源GIS（九）——openlayers中简单要素的添加与geojson数据修改添加
目录
一、引言
二、简单要素点线面的添加
1、创建feature
2、创建style，添加source、style到layer
3、添加layer到map
三、WFS获取geojson数据并修改
四、效果图
1、添加要素
2、要素修改拼接在地图另外一个位置，因为使用geoserver发布的所以可能看不到，代码仅供参考
五、总结
一、引言
之前文章有写过如何通过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
// map
var 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").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数据并修改
- 效果图
附带全部代码
Title