目录
2、创建style，添加source、style到layer
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<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"
})
});
}
// map
var 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>