注：当前使用的是 ol 5.3.0 版本，天地图使用的
key请到天地图官网申请，并替换为自己的key
图形绘制功能是指在地图容器中绘制点、线、面、圆、矩形等图形。图形绘制功能在WebGIS中具有重要作用，可以辅助查询、编辑、分析功能。本节主要介绍加载图形绘制。
1. 图形绘制原理
图形绘制通过地图单击事件开始绘制，鼠标移动事件绘制临时对象，鼠标双击事件或者右键事件结束绘制。可以通过鼠标事件自定义实现图形绘制，也可以通过地图库提供的交互事件进行绘制。
2. 图形绘制结构页面
本示例主要介绍点、线、面、圆、正方形、矩形的绘制。
<div id="map" title="地图显示"></div>
<div class="draw-div">
<label for="">绘制几何图形： </label>
<select name="" id="draw-type">
<option value="None">无</option>
<option value="Point">点</option>
<option value="LineString">线</option>
<option value="Polygon">面</option>
<option value="Circle">圆</option>
<option value="Square">正方形</option>
<option value="Box">矩形</option>
</select>
</div>
创建图层数据源和样式
const vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
wrapX: false
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: "#9b65ff30"
}),
stroke: new ol.style.Stroke({
color: "yellow",
width: 2.5,
}),
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: "blue"
}),
radius: 2.5,
stroke: new ol.style.Stroke({
color: "blue",
width: 1.5,
}),
})
})
})
3. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绘制几何图形</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="../libs/css/ol.css">
<script src="../libs/js/ol-5.3.3.js"></script>
<script src="../libs/js/jquery-2.1.1.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
font-size: 14px;
font-family: '微软雅黑';
}
html,
body {
width: 100%;
height: 100%;
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
.ol-mouse-position {
padding: 5px;
top: 10px;
height: 40px;
line-height: 40px;
background: #060505ba;
text-align: center;
color: #fff;
border-radius: 5px;
}
.draw-div {
position: relative;
margin: 0 auto;
top: 50px;
width: 180px;
background-color: #060505ba;
text-align: center;
padding: 5px 10px;
color: #ddd;
border-radius: 2.5px;
filter: brightness(0.95);
}
.load-div:hover {
cursor: pointer;
/* font-size: 16px; */
transition: font-size .2s;
fill-opacity: 0.8;
filter: brightness(1);
color: #fff;
}
</style>
</head>
<body>
<div id="map" title="地图显示"></div>
<div class="draw-div">
<label for="">绘制几何图形： </label>
<select name="" id="draw-type">
<option value="None">无</option>
<option value="Point">点</option>
<option value="LineString">线</option>
<option value="Polygon">面</option>
<option value="Circle">圆</option>
<option value="Square">正方形</option>
<option value="Box">矩形</option>
</select>
</div>
</body>
</html>
<script>
//==============================================================================//
//============================天地图服务参数简单介绍==============================//
//================================vec：矢量图层==================================//
//================================img：影像图层==================================//
//================================cva：注记图层==================================//
//======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//
//==============================================================================//
const TDTImgLayer = new ol.layer.Tile({
title: "天地图影像图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const TDTImgCvaLayer = new ol.layer.Tile({
title: "天地图影像注记图层",
source: new ol.source.XYZ({
url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
attibutions: "天地图注记描述",
crossOrigin: "anoymous",
wrapX: false
})
})
const map = new ol.Map({
target: "map",
loadTilesWhileInteracting: true,
view: new ol.View({
center: [11421771, 4288300],
zoom: 5,
worldsWrap: true,
minZoom: 1,
maxZoom: 20,
projection: 'EPSG:3857'
}),
// 鼠标控件：鼠标在地图上移动时显示坐标信息。
controls: ol.control.defaults().extend([
// 加载鼠标控件
new ol.control.MousePosition()
])
})
const gaodeLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
title: "高德",
url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
})
})
map.addLayer(gaodeLayer)
let draw = null
let drawType = document.querySelector("#draw-type")
const source = new ol.source.Vector({
wrapX: false
})
const vectorLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: "#9b65ff30"
}),
stroke: new ol.style.Stroke({
color: "yellow",
width: 2.5,
}),
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: "blue"
}),
radius: 2.5,
stroke: new ol.style.Stroke({
color: "blue",
width: 1.5,
}),
})
})
})
map.addLayer(vectorLayer)
// 获取地图容器元素
const mapContainer = map.getTargetElement()
// 监听绘制更改事件
drawType.onchange = (evt) => {
if (draw) {
clearInteraction()
}
addInteraction(drawType.value)
}
// 添加交互绘制
function addInteraction(value) {
if (value === "None") {
clearInteraction()
return
}
mapContainer.style.cursor = "crosshair"
let geometryFunction = null
switch (value) {
case "Square":
// 方形
value = "Square"
geometryFunction = ol.interaction.Draw.createRegularPolygon(4)
break
case "Box":
// 矩形
value = "LineString"
geometryFunction = ol.interaction.Draw.createBox()
}
draw = new ol.interaction.Draw({
source: vectorLayer.getSource(),
type: value,
geometryFunction: geometryFunction
})
map.addInteraction(draw)
}
// 清除交互对象
function clearInteraction() {
mapContainer.style.cursor = 'pointer'
map.removeInteraction(draw)
draw = null
// 清除绘制对象
// source.clear()
}
</script>
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !
