代码说明:

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. 具体代码功能

  1. 实例化地图

//实例化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
        })
    });
  1. 当用户点击按钮“添加文字标注”时。执行方法Addmarker(),获得输入框中的值,并执行map.on方法,实现监听事件,

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

//鼠标点击时操作
    function clickEvent (evt) {
        //鼠标单击点坐标
        var point = evt.coordinate;
        //添加一个新的标注(矢量要素)
        addVectorLabel(point);
    }
  1. 在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);
    }
  1. 最后实现移除功能,并关闭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>

 
文字标注功能 结果展示
 

转自:https://www.jianshu.com/p/d1c928f8c76e