OpenLayers之文字标记
2019-11-05 本文已影响0人
多智而近妖精
代码说明：
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="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>
<script type="text/javascript">
TiandituKey = "299087c31e3bcdab226a541ab948247c";
var beijing = ol.proj.fromLonLat([116.28, 39.54]);
//实例化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
})
});
/**
* 创建矢量标注样式函数,设置image为图标ol.style.Icon
* @param {ol.Feature} feature 要素
*/
var createLabelStyle = function (feature) {
return new ol.style.Style({
text: new ol.style.Text({
//位置
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 })
})
});
}
//实例化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);
//为地图容器添加单击事件监听
function Addmarker() {
document.getElementById('inputText').focus();
map.on('click', clickEvent);
}
/**
* 添加一个新的标注（矢量要素）
* @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);
}
//鼠标点击时操作
function clickEvent (evt) {
//鼠标单击点坐标
var point = evt.coordinate;
//添加一个新的标注（矢量要素）
addVectorLabel(point);
}
//移除标记点
function removeMarker() {
// 矢量标注的数据源
vectorSource = new ol.source.Vector({
features: [iconFeature]
});
vectorLayer.setSource(vectorSource);
//关闭地图的点击监听
map.un('click', clickEvent);
// map.removeLayer(vectorLayer);
}
</script>
</body>
</html>
文字标注功能 结果展示
