openlayers添加地圖標記

時間 2019-11-10
標籤 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">  
        var map;

        $(function () {

            InitMap();

            AddPoint();

        })

        var layer;

        //地圖初始化
        function InitMap() {
            //初始化地圖
            layer = new ol.layer.Vector({
                source:new ol.source.Vector()
            })

            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 AddPoint() {
            //設置位置座標
            //經緯度轉座標
            var point = ol.proj.fromLonLat([120.277, 36.330]);

            //若是類型是矢量標註則添加矢量標籤，不然添加覆蓋標籤
            addVectorLabel("", point);
        }

        //添加矢量標籤
        function addVectorLabel(title, coordinate) {
            //初始化一個新的點要素
            var newFeature = new ol.Feature({
                geometry: new ol.geom.Point(coordinate),
                name: title
            });
            //設置點的樣式
            newFeature.setStyle(createLabelStyle(newFeature));

            //清楚座標點
            layer.getSource().clear();

            //將當前要素添加到矢量數據源中
            layer.getSource().addFeature(newFeature);
        }

        //建立樣式
        function createLabelStyle(feature) {
            //返回一個樣式
            return new ol.style.Style({
                //把點的樣式換成ICON圖標
                image: new ol.style.Icon({
                    //設置圖標偏移
                    anchor: [0.5, 1],
                    //標註樣式的起點位置
                    anchorOrigin: 'top-right',
                    //X方向單位：分數
                    anchorXUnits: 'fraction',
                    //Y方向單位：像素
                    anchorYUnits: 'pixels',
                    //偏移起點位置的方向
                    offsetOrigin: 'top-right',
                    //透明度
                    opacity: 0.9,
                    //圖片路徑
                    //src: 'images/map.png'
                    src:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
                }),
                //文本樣式
                text: new ol.style.Text({
                    //對齊方式
                    textAlign: 'center',
                    //文本基線
                    textBaseline: 'middle',
                    //字體樣式
                    font: 'normal 14px 微軟雅黑',
                    //文本內容
                    //text: feature.get('name'),
                    text: "",
                    //填充樣式
                    fill: new ol.style.Fill({
                        color: '#aa3300'
                    }),
                    //筆觸
                    stroke: new ol.style.Stroke({
                        color: '#ffcc33',
                        width: 2
                    })
                }),
                //層
                zIndex: 20
            });
        };


    </script>
</body>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。