第一次更新：
代码说明：
html中是页面的基本骨架
- 添加checkbox标签，用户可以选择 Vector Label 或 Overlay Label 类型；
- 添加text标签，输入想要添加的文字标记；
- 添加button按钮，用来启动文字标注功能和清除地图上的标注；
- 添加map的div
- 添加标注点的div
js代码实现功能
- 创建ONE类，添加Map属性，并指定相应的默认值；
- 在类中添加DrawingAndTextAnnotation属性，在其中声明相应的变量；
- 创建标签的样式；
- ······
在代码注释中都有具体的解释
html：
添加图文标注
js：
var ONE = {};
ONE.Map = function (container, url, options) {
//内置地图对象，用来保存DigMap.Map对象
this.map = null;
var _options = options ? options : {};
var zoom = _options.zoom ? _options.zoom : 4;
var center = _options.center ? _options.center : [10.54, 27.21];
var pro = _options.projection ? _options.projection : 'EPSG:4326';
var maxZoom = _options.maxZoom ? _options.maxZoom : 24;
var minZoom = _options.minZoom ? _options.minZoom : 2;
var map = new ol.Map({
target: container,
view: new ol.View({
zoom: zoom,
center: center,
projection: pro,
maxZoom: maxZoom,
minZoom: minZoom
})
});
var tidituLayer = new ol.layer.Tile({
//title: '天地图',
// source: new ol.source.XYZ({
// url: url
// })
source: new ol.source.OSM()
});
map.addLayer(tidituLayer);
this.map = map;
return this;
};
/**
* -------------------------------图文标注功能 start-----------------------------------
*/
ONE.DrawingAndTextAnnotation = {
DTAMap: null,
createLabelStyle: null,
vectorSource: null,
vectorLayer: null,
};
ONE.DrawingAndTextAnnotation.DrawingAndTextAnnotationFunction = function (MAP) {
ONE.DrawingAndTextAnnotation.DTAMap = MAP.map;
//输入框获得焦点
document.getElementById('DrawingAndTextAnnotationInputText').focus();
//创建标签的样式
ONE.DrawingAndTextAnnotation.createLabelStyle = function (feature) {
//返回一个样式
return new ol.style.Style({
//把点的样式换成ICON图标
image: new ol.style.Icon({
//控制标注图片和文字之间的距离
anchor: [0.5, 175],
//标注样式的起点位置
anchorOrigin: 'top-right',
//X方向单位：分数
anchorXUnits: 'fraction',
//Y方向单位：像素
anchorYUnits: 'pixels',
//偏移起点位置的方向
offsetOrigin: 'top-right',
//图标缩放比例
scale: 0.25,
//透明度
opacity: 0.75,
//图片路径
src: './images/point.png'
}),
//文本样式
text: new ol.style.Text({
//垂直文本偏移量（以像素为单位）。正值将使文本向下移动。
offsetY: 15,
//对齐方式
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})
})
});
};
//初始化矢量数据源
ONE.DrawingAndTextAnnotation.vectorSource = new ol.source.Vector({
});
//初始化矢量图层
ONE.DrawingAndTextAnnotation.vectorLayer = new ol.layer.Vector({
//数据源
source: ONE.DrawingAndTextAnnotation.vectorSource
});
//将矢量图层添加到map中
ONE.DrawingAndTextAnnotation.DTAMap.addLayer(ONE.DrawingAndTextAnnotation.vectorLayer);
//地图的点击事件
ONE.DrawingAndTextAnnotation.DTAMap.on('click', ONE.DrawingAndTextAnnotation.clickEvent);
};
ONE.DrawingAndTextAnnotation.closeDrawingAndTextAnnotationFunction = function () {
// 矢量标注的数据源 清除
ONE.DrawingAndTextAnnotation.vectorSource.clear();
//关闭地图的点击监听
ONE.DrawingAndTextAnnotation.DTAMap.un('click', ONE.DrawingAndTextAnnotation.clickEvent);
ONE.DrawingAndTextAnnotation.DTAMap.removeLayer(ONE.DrawingAndTextAnnotation.vectorLayer);
//清除map的覆盖图层
ONE.DrawingAndTextAnnotation.DTAMap.getOverlays().clear();
};
//地图监听事件后，执行方法
ONE.DrawingAndTextAnnotation.clickEvent = function (evt) {
//获取单选按钮的选项
var type = $('input[name="label"]:checked').val();
//获取位置坐标
var point = evt.coordinate;
var inputText = document.getElementById("DrawingAndTextAnnotationInputText").value;
console.log("inputText:" + inputText);
//如果类型是矢量标注则添加矢量标签，否则添加覆盖标签
if (type == 'vector') {
ONE.DrawingAndTextAnnotation.addVectorLabel(point, inputText);
} else if (type == 'overlay') {
ONE.DrawingAndTextAnnotation.addOverlayLabel(point, inputText);
}
};
//添加矢量标签
ONE.DrawingAndTextAnnotation.addVectorLabel = function (coordinate, inputText) {
//初始化一个新的点要素
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate),
name: inputText === "" ? '标注点' : inputText
});
//设置点的样式
newFeature.setStyle(ONE.DrawingAndTextAnnotation.createLabelStyle(newFeature));
//将当前要素添加到矢量数据源中
ONE.DrawingAndTextAnnotation.vectorSource.addFeature(newFeature);
};
//添加覆盖标注
ONE.DrawingAndTextAnnotation.addOverlayLabel = function (coordinate, inputText) {
//创建一个div元素
var elementDiv = document.createElement('div');
//设置div元素的样式类
elementDiv.className = 'marker';
//设置div元素的title属性
elementDiv.title = inputText === "" ? '标注点' : inputText;
//获取id为label的div标签
var overlay = document.getElementById('label');
//将新创建的div标签添加到overlay中
overlay.appendChild(elementDiv);
//创建一个a标签元素
var elementA = document.createElement('a');
//设置a标签的样式类
elementA.className = 'address';
//设置a标签的链接地址
elementA.href = 'https://www.baidu.com/';
//设置a标签的超链接文本
ONE.DrawingAndTextAnnotation.setInnerText(elementA, elementDiv.title);
//将a标签元素添加到div标签元素中
elementDiv.appendChild(elementA);
//新建一个覆盖层
var newMarker = new ol.Overlay({
//设置位置为当前鼠标点击的坐标
position: coordinate,
//设置覆盖层与位置之间的匹配方式
positioning: 'center-center',
//覆盖层元素
element: elementDiv,
//事件传播到地图视点的时候是否应该停止
stopEvent: false
});
//将覆盖层添加到map中
ONE.DrawingAndTextAnnotation.DTAMap.addOverlay(newMarker);
//新建一个文本覆盖层
var newText = new ol.Overlay({
//设置位置为当前鼠标点击的坐标
position: coordinate,
//覆盖层元素
element: elementA
});
//将文本覆盖层添加到map中
ONE.DrawingAndTextAnnotation.DTAMap.addOverlay(newText);
};
//设置文本内容
ONE.DrawingAndTextAnnotation.setInnerText = function (element, text) {
if (typeof element.textContent == 'string') {
element.textContent = text;
} else {
element.innerText = text;
}
}
/**
* -------------------------------图文标注功能 end-----------------------------------
*/
结果
图文标注 结果