openlayers图层加标注

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="lib/OpenLayers/ol.js"></script>
    <script src="olStyle/Light.js"></script>
    <script src="point.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .map {
            width: 100%;
            height: 100%;
            background: #f6f6f4;
        }
    </style>
</head>

<body>
    <div id="map" class="map" data-id="11"></div>
    <script type="text/javascript">  

        $(function () {

            InitMap();

            AddPolygon();
        })

        var map;

        var layer = new ol.layer.Vector({
            source: new ol.source.Vector(),
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 0, 0.3)'
                }),
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 10,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });

        //地图初始化
        function InitMap() {
            map = new ol.Map({
                layers: [new ol.layer.Vector({
                    source: new ol.source.Vector(),
                    style: function (feature, resolution) {
                        switch (feature.get('layer')) {
                            case 'poi':
                                poiStyle.getText().setText(feature.get('name'));
                                return poiStyle;
                            case 'boundary': return boundaryStyle;
                            case 'lawn': return lawnStyle;
                            case 'road':
                                roadStyle.getText().setText(feature.get('name'));
                                return (resolution < 2) ? roadStyle : null;
                            case 'building':
                                return buildingStyle(feature, resolution);
                            case 'other':
                                otherStyle.getText().setText(feature.get('name'));
                                return otherStyle;
                            default: return null;
                        }
                    }
                }), layer],
                target: 'map',
                view: new ol.View({
                    center: ol.proj.fromLonLat([120.277, 36.330]),
                    minZoom: 1,
                    zoom: 16
                })
            });
        }

        /*显示并编辑区域**********************************************************************************/
        function AddPolygon() {
            var coordinates = [[
                ol.proj.fromLonLat([120.26829957962033, 36.32791869064661]),
                ol.proj.fromLonLat([120.27445793151853, 36.330650012922234]),
                ol.proj.fromLonLat([120.2671408653259, 36.33063272637348]),
                ol.proj.fromLonLat([120.26829957962033, 36.32791869064661])
            ]]

            var plygon = new ol.geom.Polygon(coordinates)
            //多边形要素类
            var feature = new ol.Feature({
                geometry: plygon
            });

            layer.getSource().addFeature(feature);

            //标注，当使用多边形时，自动计算中心坐标？
            //标注，如果使用文字标注，图形将会被文字覆盖
            var featureText = new ol.Feature({
                geometry: plygon,
                name: "标注1"
            });

            featureText.setStyle(new ol.style.Style({
                //文本样式
                text: new ol.style.Text({
                    //对齐方式
                    textAlign: 'center',
                    //文本基线
                    textBaseline: 'middle',
                    //字体样式
                    font: 'normal 14px 微软雅黑',
                    //文本内容
                    text: featureText.get('name')
                })
            }))

            layer.getSource().addFeature(featureText);

            //清除
            //layer.getSource().clear();

            var points = [[
                ol.proj.fromLonLat([120.27681827545163, 36.33236136226455]),
                ol.proj.fromLonLat([120.28038024902342, 36.33141061727086]),
                ol.proj.fromLonLat([120.27681827545163, 36.33001040806349]),
                ol.proj.fromLonLat([120.27681827545163, 36.33236136226455])
            ]]

            var plygon2 = new ol.geom.Polygon(points)
            //多边形要素类
            var feature2 = new ol.Feature({
                geometry: plygon2
            });

            layer.getSource().addFeature(feature2);

            //标注，当使用多边形时，自动计算中心坐标？
            //标注，如果使用文字标注，图形将会被文字覆盖
            var featureText2 = new ol.Feature({
                geometry: plygon2,
                name: "标注2"
            });

            featureText2.setStyle(new ol.style.Style({
                //文本样式
                text: new ol.style.Text({
                    //对齐方式
                    textAlign: 'center',
                    //文本基线
                    textBaseline: 'middle',
                    //字体样式
                    font: 'normal 14px 微软雅黑',
                    //文本内容
                    text: featureText2.get('name')
                })
            }))

            layer.getSource().addFeature(featureText2);
        }





    </script>
</body>

</html>
openlayers图层加标注

猜你喜欢
