代码说明:
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()" />
<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. 具体代码功能
- 实例化地图
//实例化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
})
});
- 当用户点击按钮“添加文字标注”时。执行方法Addmarker(),获得输入框中的值,并执行map.on方法,实现监听事件,
//为地图容器添加单击事件监听
function Addmarker() {
document.getElementById('inputText').focus();
map.on('click', clickEvent);
}
//鼠标点击时操作
function clickEvent (evt) {
//鼠标单击点坐标
var point = evt.coordinate;
//添加一个新的标注(矢量要素)
addVectorLabel(point);
}
- 在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);
}
- 最后实现移除功能,并关闭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()" />
<label style="font-weight: bold;">
点击按钮,之后在图上点击添加文字标注。
</label>
<input type="button" class="ButtonLib" id="removeTestAnnotationButton" value="移除图片标注" onclick="removeMarker()"/>
</div>
<div id="mapCon">
</div>
<div id