WebGIS开发系列教程（5）：Openlayers高级功能

本系列教程为webgis二维开发入门openlayers零基础小白学习教程，本篇为第五篇。

完整版可以查看文末链接下载。

1.地图标注功能

地图标注是将空间位置信息点与地图关联，通过图标、窗口等形式把相关的信息展现到地图上。地图标注也是WebGIS中比较重要的功能之一，在大众应用中较为常见。

地图标注的基本原理：

获取标注点的空间位置(X、Y逻辑坐标)，在该位置上叠加显示图标(或包含信息的小图片)，必要时以窗口的形式显示详细信息。其中，在获取标注点X，Y的逻辑坐标时要注意，通过鼠标在地图上单击可以得到窗口坐标，一般需要转换为逻辑坐标。

基本API：Openlayers5提供了实现地图标注功能的各类控件与方法，主要是基于叠加层ol.Overlay并结合HTML的网页控件实现的。由于Openlayers5使用独立的样式设置矢量要素信息，提供的ol.style.Icon可以为矢量点图片标识，ol.style.Text类则可以直接设置矢量要素的文本信息。

地图标注的表现形式可以分为3种：

简单的图文标注，冒泡信息窗口标注，聚合标注

1.1图文标注

图片标注是使用图标展现标注点的信息，它是最简单的地图标注形式，也是其他自定义标注的基础。图文标注是通过文本和图标来展现标注点的信息，是一种基本的地图标注形式。

实现思路：

(1)图片标注功能一般是使用Openlayers5的ol.Overlay结合HTML的一个div或img标签元素来实现的。

(2)文本标注的实现方式与图片标注类似，首先创建一个ol.Overlay对象，然后关联添加的HTML的text或a标签元素来实现

(3)可以使用加载矢量点的方式实现图文标注。设置点要素的图形样式ol.style.Icon，文字样式为ol.style.Text

★通过矢量点的方式添加北京市(直接创建一个矢量点要素，通过map.addLayer()加载即可，不需要承载的html元素)：

①通过经纬度创建需要的点

var beijing = ol.proj.fromLonLat([116.28, 39.54]);   //北京点
var wuhan = ol.proj.fromLonLat([114.21, 30.37]);    //武汉点

②加载天地图

 //实例化Map对象加载地图,默认底图加载MapQuest地图
    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=b74ca9a5dbd96fab6338ab9d239180fb",
                    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=b74ca9a5dbd96fab6338ab9d239180fb",
                    wrapX: false
                })
            })
        ],
        //地图容器div的ID
        target: 'mapCon',
        view: new ol.View({
            //地图初始中心点
            center: [130, 39],
            maxZoom: 19,
            minZoom: 1,
            zoom: 1
        })
    });

③实例化矢量Vector要素，通过矢量图层的方式加载到地图容器中

 //实例化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);    //通过map.addLayer()动态添加图层

其中创建样式的函数为：

/**
     * 创建矢量标注样式函数,设置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',
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    offsetOrigin: 'top-right',
                    // offset:[0,10],
                    //图标缩放比例
                    // scale:0.5,
                    //透明度