使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据）

最新推荐文章于 2024-03-13 00:00:00 发布

Keson Z

最新推荐文章于 2024-03-13 00:00:00 发布

阅读量2.2k

点赞数 3

分类专栏： # OpenLayers离线地图的实现文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_44009447/article/details/105516647

版权

OpenLayers离线地图的实现专栏收录该内容

4 篇文章 7 订阅

订阅专栏

说明：OpenLayers 3详细官方API文档：http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm

1.该例子为页面在固定经纬度的情况下对地图进行单个或者多个标点，并没有从后台数据库获取经纬度数据，之后会再更新通过json来实现与与数据库实时进行标点。

2.首先我们还是先做好离线地图，具体操作参照我的另外一篇博文：使用OpenLayers发布离线地图

3.离线地图实现了之后，新建一个image文件夹，把我们标注所需要用到的图片放入其中，如下图所示：
在这里插入图片描述
4.整个地图文件夹格式变为：

5.index.html源码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据经纬度实现单个描点</title>
    <link href="./ol.css" rel="stylesheet" type="text/css" />
    <script src="./ol.js" type="text/javascript"></script>
    <style type="text/css">
        body, html {
            border: none;
            padding: 0;
            margin: 0;
        }

        #menu {
            width: 100%;
            height: 20px;
            padding: 5px 10px;
            font-size: 14px;
            font-family: "微软雅黑";
            left: 10px;
            text-align: center;
        }

        #mapCon {
            width: 100%;
            height: 600px;
            position: relative;
        }

        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 45px;
            left: -50px;
        }

        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            content: "✖";
        }

        #popup-content {
            font-size: 14px;
            font-family: "微软雅黑";
        }

        #popup-content .markerInfo {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="menu" style="font-weight:bold">

</div>
<div id="mapCon">
    <!-- Popup -->
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content">
        </div>
    </div>
</div>
<script type="text/javascript">

    var beijing = ol.proj.fromLonLat([113.34, 23.07]);
    //示例标注点北京市的信息对象
    var featuerInfo = {
        geo: beijing,
        att: {
            //标注信息的标题内容
            title: "广州市",
            //标注详细信息链接
            titleURL: "http://www.openlayers.org/",
            //标注内容简介
            text: "广州（简称穗），别称羊城、花城，广东省省会，是国际大都市、国际商贸中心、国际综合交通枢纽，首批沿海开放城市，也是南部战区司令部驻地，是粤港澳大湾区、泛珠江三角洲经济区的核心城市以及一带一路的枢纽城市。",
            //标注的图片
            imgURL: "./image/bj.jpg"
        }
    }

    /**
     * 实例化Map对象加载地图,默认底图加载天地图
     */
        //地图设置中心，设置为广州
    var center=ol.proj.transform([113.271429,23.135336],'EPSG:4326','EPSG:3857');
    //创建地图
    var map=new ol.Map({
        view:new ol.View({
            center:center,
            minZoom:7,//设置缩放的最大和最小级别
            maxZoom:13,
            zoom:7//设置默认加载的级别
        }),
        target:'mapCon'//要显示地图的DIV的ID
    });

    //添加一个使用离线瓦片地图的层
    var offLineMap=new ol.layer.Tile({
        source:new ol.source.XYZ({
            url:'tile/{z}/{x}/{y}.png'//本例中地图瓦片保存在当前目录下的tile文件夹目录下
        })
    });
    map.addLayer(offLineMap);

    /**
     * 创建标注样式函数,设置image为图标ol.style.Icon
     * @param {ol.Feature} feature 要素
     */
    var createLabelStyle = function (feature) {
        return new ol.style.Style({
            image: new ol.style.Icon(
                /** @type {olx.style.IconOptions} */
                {
                    //设置图标点
                    anchor: [0.5, 60],
                    //图标起点
                    anchorOrigin: 'top-right',
                    //指定x值为图标点的x值
                    anchorXUnits: 'fraction',
                    //指定Y值为像素的值
                    anchorYUnits: 'pixels',
                    //偏移
                    offsetOrigin: 'top-right',
                    // offset:[0,10],
                    //图标缩放比例
                    // scale:0.5,
                    //透明度
                    opacity: 0.75,
                    //图标的url
                    src: './image/blueIcon.png'
                }),
            text: new ol.style.Text({
                //位置
                textAlign: 'center',
                //基准线
                textBaseline: 'middle',
                //文字样式
                font: 'normal 14px 微软雅黑',
                //文本内容
                text: feature.get('name'),
                //文本填充样式（即文字颜色）
                fill: new ol.style.Fill({ color: '#aa3300' }),
                stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })
            })
        });
    }

    //实例化Vector要素，通过矢量图层添加到地图容器中
    var iconFeature = new ol.Feature({
        //坐标点
        geometry: new ol.geom.Point(beijing),
        //名称属性
        name: '广州市',
        //大概人口数（万）
        population: 2115
    });
    iconFeature.setStyle(createLabelStyle(iconFeature));
    //矢量标注的数据源
    var vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });
    //矢量标注图层
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);

    /**
     * 实现popup的html元素
     */
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var closer = document.getElementById('popup-closer');

    /**
     * 在地图容器中创建一个Overlay
     */
    var popup = new ol.Overlay({
        //要转换成overlay的HTML元素
        element: container,
        //当前窗口可见
        autoPan: true,
        //Popup放置的位置
        positioning: 'bottom-center',
        //是否应该停止事件传播到地图窗口
        stopEvent: false,
        autoPanAnimation: {
            //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
            duration: 250
        }
    });
    map.addOverlay(popup);

    /**
     * 添加关闭按钮的单击事件（隐藏popup）
     * @return {boolean} Don't follow the href.
     */
    closer.onclick = function () {
        //未定义popup位置
        popup.setPosition(undefined);
        //失去焦点
        closer.blur();
        return false;
    };

    /**
     * 动态创建popup的具体内容
     * @param {string} title
     */
    function addFeatrueInfo(info) {
        //新增a元素
        var elementA = document.createElement('a');
        elementA.className = "markerInfo";
        elementA.href = info.att.titleURL;
        //elementA.innerText = info.att.title;
        setInnerText(elementA, info.att.title);
        // 新建的div元素添加a子节点
        content.appendChild(elementA);
        //新增div元素
        var elementDiv = document.createElement('div');
        elementDiv.className = "markerText";
        //elementDiv.innerText = info.att.text;
        setInnerText(elementDiv, info.att.text);
        // 为content添加div子节点
        content.appendChild(elementDiv);
        //新增img元素
        var elementImg = document.createElement('img');
        elementImg.className = "markerImg";
        elementImg.src = info.att.imgURL;
        // 为content添加img子节点
        content.appendChild(elementImg);
    }
    /**
     * 动态设置元素文本内容（兼容）
     */
    function setInnerText(element, text) {
        if (typeof element.textContent == "string") {
            element.textContent = text;
        } else {
            element.innerText = text;
        }
    }

    /**
     * 为map添加点击事件监听，渲染弹出popup
     */
    map.on('click', function (evt) {
        //判断当前单击处是否有要素，捕获到要素时弹出popup
        var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });
        if (feature) {
            //清空popup的内容容器
            content.innerHTML = '';
            //在popup中加载当前要素的具体信息
            addFeatrueInfo(featuerInfo);
            if (popup.getPosition() == undefined) {
                //设置popup的位置
                popup.setPosition(beijing);
            }
        }
    });
    /**
     * 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
     */
    map.on('pointermove', function (e) {
        var pixel = map.getEventPixel(e.originalEvent);
        var hit = map.hasFeatureAtPixel(pixel);
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });
</script>
</body>
</html>

6.实现效果如下图所示：
在这里插入图片描述
7.点击该地图标记后效果如下图所示：

Keson Z

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
2
评论
使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据）

说明：OpenLayers 3详细官方API文档：http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm1.该例子为页面在固定经纬度的情况下对地图进行单个或者多个标点，并没有从后台数据库获取经纬度数据，之后会再更新通过json来实现与与数据库实时进行标点。2.首先我们还是先做好离线地图，具体操作参照我的另外一篇博文：使用O...
复制链接

扫一扫