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,
//透明度