openlayers要素的添加与geojson数据修改添加

教程目录

一、引言

openlayers要素的添加与geojson数据修改添加,之前文章有写过如何通过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>
转载自：https://blog.csdn.net/xcymorningsun/article/details/83409568