OpenLayers之文字标记

作者: 多智而近妖精 | 来源:发表于2019-11-05 14:53 被阅读0次

代码说明：

1. 引入openlayers的css文件和js文件

    <link href="./css/ol.css" rel="stylesheet" type="text/css"/>
    <script src="./js/ol.js" type="text/javascript"></script>

ol.js
ol.js 是一个专为WebGIS客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。openlayer2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益显示出它的落后。 OL3已运用现代的设计模式从底层重写。
ol.css
ol.css 是地图样式文件，包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。

2. 在html中添加控件

<div class="ToolLib">
    <label>请输入需要添加的文字：</label>
    <input type="text" id="inputText" value=""/>
    <input type="button" class="ButtonLib" id="type" value="添加文字标注" onclick="Addmarker()" />&nbsp;&nbsp;
    <label style="font-weight: bold;">
        点击按钮，之后在图上点击添加文字标注。
    </label>
    <input type="button" class="ButtonLib" id="removeTestAnnotationButton" value="移除图片标注" onclick="removeMarker()"/>
</div>
<div id="mapCon">
</div>
<div id="label" style="display: none;">
    <div id="marker" class="marker" title="Marker">
        <a class="address" id="address" target="_blank" href="http://www.openlayers.org/">标注点</a>
    </div>
</div>

添加一个输入框，用来决定添加到地图上的文字是什么。例如：北京、山东省

3. 具体代码功能

实例化地图

//实例化Map对象加载地图,默认底图加载天地图
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                title: "天地图矢量图层",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + TiandituKey,//parent.TiandituKey()为天地图密钥
                    wrapX: false
                })
            }),
            new ol.layer.Tile({
                title: "天地图矢量注记图层",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + TiandituKey,//parent.TiandituKey()为天地图密钥
                    wrapX: false
                })
            })
        ],
        //地图容器div的ID
        target: 'mapCon',
        view: new ol.View({
            //地图初始中心点
            center: beijing,
            minZoom: 1,
            zoom: 6
        })
    });

当用户点击按钮“添加文字标注”时。执行方法Addmarker()，获得输入框中的值，并执行map.on方法，实现监听事件，

//为地图容器添加单击事件监听
    function Addmarker() {
        document.getElementById('inputText').focus();
        map.on('click', clickEvent);
    }

//鼠标点击时操作
    function clickEvent (evt) {
        //鼠标单击点坐标
        var point = evt.coordinate;
        //添加一个新的标注（矢量要素）
        addVectorLabel(point);
    }

在addVectorLabel方法中，执行了添加新标注的功能。在new ol.Feature时，注入了几何信息以及名称属性

/**
     * 添加一个新的标注（矢量要素）
     * @param {ol.Coordinate} coordinate 坐标点
     */
    function addVectorLabel(coordinate) {

        var inputText = document.getElementById("inputText").value;
        console.log("inputText:"+inputText);
        //新建一个要素 ol.Feature
        var newFeature = new ol.Feature({
            //几何信息
            geometry: new ol.geom.Point(coordinate),
            //名称属性
            name: inputText === "" ? '标注点' : inputText
        });
        //设置要素的样式
        newFeature.setStyle(createLabelStyle(newFeature));
        //将新要素添加到数据源中
        vectorSource.addFeature(newFeature);
    }

最后实现移除功能，并关闭map的监听函数

 //移除标记点
    function removeMarker() {

        // 矢量标注的数据源
        vectorSource = new ol.source.Vector({
            features: [iconFeature]
        });
        vectorLayer.setSource(vectorSource);

        //关闭地图的点击监听
        map.un('click', clickEvent);
        // map.removeLayer(vectorLayer);

    }

完整代码实现：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>添加文字标注</title>
    <link href="./css/ol.css" rel="stylesheet" type="text/css"/>
    <script src="./js/ol.js" type="text/javascript"></script>
    <!--导入本页面外部样式表-->
    <link href="./css/style.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        body, html, div, ul, li, iframe, p, img {
            border: none;
            padding: 0;
            margin: 0;
        }

        #mapCon {
            width: 100%;
            height: 90%;
            position: absolute;
        }

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

        .checkbox {
            margin: 5px 15px;
        }

        .marker {
            width: 20px;
            height: 20px;
            border: 1px solid #088;
            border-radius: 10px;
            background-color: #0FF;
            opacity: 0.5;
        }

        .address {
            text-decoration: none;
            color: #aa3300;
            font-size: 14px;
            font-weight: bold;
            text-shadow: black 0.1em 0.1em 0.2em;
        }
    </style>
</head>
<body>
<div class="ToolLib">
    <label>请输入需要添加的文字：</label>
    <input type="text" id="inputText" value=""/>
    <input type="button" class="ButtonLib" id="type" value="添加文字标注" onclick="Addmarker()" />&nbsp;&nbsp;
    <label style="font-weight: bold;">
        点击按钮，之后在图上点击添加文字标注。
    </label>
    <input type="button" class="ButtonLib" id="removeTestAnnotationButton" value="移除图片标注" onclick="removeMarker()"/>
</div>
<div id="mapCon">
</div>
<div id="label" style="display: none;">
    <div id="marker" class="marker" title="Marker">
        <a class="address" id="address" target="_blank" href="http://www.openlayers.org/">标注点</a>
    </div>
</div>
<script type="text/javascript">

    TiandituKey = "299087c31e3bcdab226a541ab948247c";
    var beijing = ol.proj.fromLonLat([116.28, 39.54]);

    //实例化Map对象加载地图,默认底图加载天地图
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                title: "天地图矢量图层",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + TiandituKey,//parent.TiandituKey()为天地图密钥
                    wrapX: false
                })
            }),
            new ol.layer.Tile({
                title: "天地图矢量注记图层",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + TiandituKey,//parent.TiandituKey()为天地图密钥
                    wrapX: false
                })
            })
        ],
        //地图容器div的ID
        target: 'mapCon',
        view: new ol.View({
            //地图初始中心点
            center: beijing,
            minZoom: 1,
            zoom: 6
        })
    });

    /**
     * 创建矢量标注样式函数,设置image为图标ol.style.Icon
     * @param {ol.Feature} feature 要素
     */
    var createLabelStyle = function (feature) {
        return new ol.style.Style({
            text: new ol.style.Text({
                //位置
                textAlign: 'center',
                //基准线
                textBaseline: 'middle',
                //文字样式
                font: 'normal 14px 微软雅黑',
                //文本内容
                text: feature.get('name'),
                //文本填充样式（即文字颜色）
                fill: new ol.style.Fill({ color: '#000000' }),
                stroke: new ol.style.Stroke({ color: '#ffcc33', width: 12 })
            })
        });
    }

    //实例化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);

    //为地图容器添加单击事件监听
    function Addmarker() {
        document.getElementById('inputText').focus();
        map.on('click', clickEvent);
    }

    /**
     * 添加一个新的标注（矢量要素）
     * @param {ol.Coordinate} coordinate 坐标点
     */
    function addVectorLabel(coordinate) {

        var inputText = document.getElementById("inputText").value;
        console.log("inputText:"+inputText);
        //新建一个要素 ol.Feature
        var newFeature = new ol.Feature({
            //几何信息
            geometry: new ol.geom.Point(coordinate),
            //名称属性
            name: inputText === "" ? '标注点' : inputText
        });
        //设置要素的样式
        newFeature.setStyle(createLabelStyle(newFeature));
        //将新要素添加到数据源中
        vectorSource.addFeature(newFeature);
    }

    //鼠标点击时操作
    function clickEvent (evt) {
        //鼠标单击点坐标
        var point = evt.coordinate;
        //添加一个新的标注（矢量要素）
        addVectorLabel(point);
    }


    //移除标记点
    function removeMarker() {

        // 矢量标注的数据源
        vectorSource = new ol.source.Vector({
            features: [iconFeature]
        });
        vectorLayer.setSource(vectorSource);

        //关闭地图的点击监听
        map.un('click', clickEvent);
        // map.removeLayer(vectorLayer);

    }
</script>
</body>
</html>

文字标注功能结果展示

OpenLayers之文字标记

代码说明：

1. 引入openlayers的css文件和js文件

2. 在html中添加控件

3. 具体代码功能

完整代码实现：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

开源

Geomatics（GIS，GPS，RS，Surveying）