OpenLayers之文字标记

代码说明：

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

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

2. 在html中添加控件

    请输入需要添加的文字：
    
      
    
        点击按钮，之后在图上点击添加文字标注。
    
    




    

        标注点
    

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

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

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

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

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

3. 在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);
    }

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

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

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

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

    }

完整代码实现：

    
    
    
    
    
    
    



    请输入需要添加的文字：
    
      
    
        点击按钮，之后在图上点击添加文字标注。
    
    




    

        标注点
    

文字标注功能 结果展示