当前位置：首页 > news >正文

OpenLayers 图形绘制

news 来源：原创 2025/6/1 11:11:13

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

图形绘制功能是指在地图容器中绘制点、线、面、圆、矩形等图形。图形绘制功能在WebGIS中具有重要作用，可以辅助查询、编辑、分析功能。本节主要介绍加载图形绘制。

1. 图形绘制原理

图形绘制通过地图单击事件开始绘制，鼠标移动事件绘制临时对象，鼠标双击事件或者右键事件结束绘制。可以通过鼠标事件自定义实现图形绘制，也可以通过地图库提供的交互事件进行绘制。

2. 图形绘制结构页面

本示例主要介绍点、线、面、圆、正方形、矩形的绘制。

<div id="map" title="地图显示"></div>
<div class="draw-div"><label for="">绘制几何图形：&nbsp;</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="">绘制几何图形：&nbsp;</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 = nulllet 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 = nullswitch (value) {case "Square":// 方形value = "Square"geometryFunction = ol.interaction.Draw.createRegularPolygon(4)breakcase "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>