OpenLayers实现交互绘制点线面

实现OpenLayers交互绘制

这快内容是临时添加进来的，算是提前写完这篇博文，可能存在问题，请大家批评指正，谢谢！

这一部分主要是讲解利用按钮在OpenLayers上进行交互绘制的一个实现过程，代码略微粗糙，后面WebGIS专题中会有更详细的讲解，后续也会慢慢更新WebGIS专题的教程。

一、窗体实现

控件代码（CSS样式自行设计）

<div class="draw-polygon"><label style="font-weight: bold;">几何图形类型：</label><select id="type"><option value="None" selected="selected">无</option><option value="Point">点</option><option value="LineString">线</option><option value="Polygon">多边形</option></select><button class="tool-button" id="draw-element" onclick="drawFeature()">绘制</button>
</div>

添加完成css代码之后样式如下：

二、代码实现

2.1 建立全局字段

这里建立全局字段typeSelect通过js提供的getElementById的方法获得select标签下option的选择值
建立draw变量，将绘制的内容存放在draw中通过map的对象添加近地图
实例化矢量数据源作为source

var typeSelect = document.getElementById('type');
var draw;
var source = new ol.source.Vector();

2.2 设置形状样式

// 设置样式
var vectorLayer = new ol.layer.Vector({source: source,style: new ol.style.Style({fill: new ol.style.Fill({color: '#0055ff'}),stroke: new ol.style.Stroke({color: '#00c033',width: 2}),image: new ol.style.Circle({radius: 7,fill: new ol.style.Fill({color: '#00c033'})})})})
map.addLayer(vectorLayer);

2.3 建立交互方法

建立addInteraction方法，传入的参数为typeValue，在其中调用OpenLayers的interaction的Draw接口传入source和typeValue并赋值给draw变量，最后调用map的addInteraction方法将draw变量传入。

function addInteraction(typeValue) {draw = new ol.interaction.Draw({source: source,type: typeValue});map.addInteraction(draw);
}

2.4 按钮点击事件

建立按钮点击事件drawVector()并在其中建立变量typeValue 通过typeSelect的value属性获得，添加if语句判断是否为None，不为None则调用map的removeInteraction()方法清除已经存在的数据，并调用addInteraction(draw)方法绘制。为None则清除数据。

// 点击事件方法
function drawVector() {var typeValue = typeSelect.value;if (typeValue !== 'None') {map.removeInteraction(draw);addInteraction(typeValue);} else {// The callback method clearssource.clear()}
}

2.5 最终实现效果图如下

三、附js完整源码

3.1 实现方式一

<!-- 加载地图js -->
<script type="text/javascript">var typeSelect = document.getElementById('type');var draw;var source = new ol.source.Vector();// 设置样式var vectorLayer = new ol.layer.Vector({source: source,style: new ol.style.Style({fill: new ol.style.Fill({color: '#0055ff'}),stroke: new ol.style.Stroke({color: '#00c033',width: 2}),image: new ol.style.Circle({radius: 7,fill: new ol.style.Fill({color: '#00c033'})})})})map.addLayer(vectorLayer);function addInteraction(typeValue) {draw = new ol.interaction.Draw({source: source,type: typeValue});map.addInteraction(draw);}// 点击事件方法function drawVector() {var typeValue = typeSelect.value;if (typeValue !== 'None') {map.removeInteraction(draw);addInteraction(typeValue);} else {// The callback method clearssource.clear()}}
</script>

3.2 实现方式二

这个实现方式有一个问题就是绘图的时候转点处会带有点样式，目前无法排除

<!-- 加载地图js -->
<script type="text/javascript">var map = init("map"); // 初始化地图加载// var extent = map.getView().calculateExtent(map.getSize());loadLayerControl(map, 'layer-tree');var typeSelect = document.getElementById('type');var draw;var source = new ol.source.Vector();// 设置样式var vectorLayer = new ol.layer.Vector({source: source,style: new ol.style.Style({fill: new ol.style.Fill({color: '#0055ff'}),stroke: new ol.style.Stroke({color: '#00c033',width: 2}),image: new ol.style.Circle({radius: 7,fill: new ol.style.Fill({color: '#00c033'})})})})map.addLayer(vectorLayer);function addInteraction() {map.removeInteraction();var typeValue = typeSelect.value;if (typeValue !== 'None'){draw = new ol.interaction.Draw({source: source,type: typeValue});map.addInteraction(draw);} else {source.clear();}}// 点击事件方法function drawVector() {addInteraction();}</script>

OpenLayers实现交互绘制点线面相关推荐

openlayers入门添加百度地图绘制点线面
1.构建一个地图容器 <div id="map" class="map"></div> 2.创建一个地图 2.1初始化一个openlay ...
OpenLayers 6 代码绘制/draw交互组件绘制两种方式绘制椭圆过程详解
引言 OpenLayers可以通过代码绘制多种几何形状,也可以通过draw类型的交互组件绘制几何形状,官方实例提供了类如圆.折线.矩形.星形等方法.除此之外,椭圆这种图形其实也是非常常见的几何图形,但 ...
openlayers6 第一篇绘制点线面
小白一枚,只是单纯纪录,不喜勿喷,希望能帮到刚入门的大家 //新建点线面图层addDrawLayer() {this.draw_vector = new VectorLayer({source: th ...
Vue+Openlayer中测距测面和绘制点线面组件-LjMeasureDraw4326和LjMeasureDraw3857
地理坐标系4326 效果图: 首先下载turf.js: cnpm i -S @turf/turf 全局引入turf.js //引入turf.js import * as turf from '@tur ...
vue 项目使用 openlayers根据半径绘制圆形、绘制多边形
vue 项目使用 openlayers根据半径绘制圆形.绘制多边形这个地方我就简单点写吧,因为一些东西比较乱,有的包啥的就按照官网API开发文档根据报错提示自己添加就可以了,我这个地方就不重复写了. ...
html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、渐变填充、图案填充、文本的属性设置）...
(1)文本的描边.填充.阴影 (2)文本的渐变填充 (3)文本的图案填充 (4)文本的属性设置及效果呈现交互绘制文本.html 交互绘制文本 body { background: #eeeeee; ...
OpenCV中鼠标交互-绘制矩形框
OpenCV中鼠标交互-绘制矩形框 ·具体流程: 1.绑定回调函数 2.在回调函数中检测触发的事件 3.根据不同事件做出不同动作一.绑定回调函数 cv2.setMouseCallback('orig ...
Python交互绘制Julia集
matplotlib提供了交互操作的功能,比如,只要绑定button_press_event,就可以在点击图像时,触发相应的事件. import matplotlib.pyplot as plt im ...
计算机图形学实验四 OpenGL的鼠标交互绘制
一.实验目的 1.掌握OpenGL的鼠标按钮响应函数. 2.掌握OpenGL的鼠标移动响应函数. 3.进一步巩固OpenGL的基本图元绘制基础. 二.实验内容 1.鼠标画草图--实现鼠标点到哪,线就画 ...