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>

    <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;

        //地图初始化

        function InitMap() {

            //初始化地图

            layer = new ol.layer.Vector({

                source: new ol.source.Vector(),

                    overlaps: false,

                    wrapX: false

                }),

                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;

                    }

                }

            });

            map = new ol.Map({

                layers: [layer],

                target: 'map',

                view: new ol.View({

                    center: ol.proj.fromLonLat([120.277, 36.330]),

                    minZoom: 1,

                    zoom: 16

                })

            });

        }

        /*显示并编辑区域**********************************************************************************/

        function createLabelStyle(feature) {

            //返回一个样式

            return new ol.style.Style({

                //把点的样式换成ICON图标

                fill: new ol.style.Fill({

                    //填充颜色

                    color: 'rgba(37,241,239,0.2)'

                }),

                //图形样式，主要适用于点样式

                image: new ol.style.Circle({

                    //半径大小

                    radius: 7,

                    //填充

                    fill: new ol.style.Fill({

                        //填充颜色

                        color: '#e81818'

                    })

                }),

                //层

                zIndex: 20

            });

        };

        function AddPolygon() {

            var coordinate = ol.proj.fromLonLat([120.277, 36.330]);

            var newFeature = new ol.Feature({

                geometry: new ol.geom.Point(coordinate)

            });

            //设置点的样式

            newFeature.setStyle(createLabelStyle(newFeature));

            //清楚坐标点

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

            //将当前要素添加到矢量数据源中

            layer.getSource().addFeature(newFeature);

        }

    </script>

</body>

</html>
巴特西

openlayers地图显示点

最新文章

热门文章
