场景

Vue中使用Openlayers加载Geoserver发布的TileWMS：

Vue中使用Openlayers加载Geoserver发布的TileWMS_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基础上实现加载地图显示，如果要实现在地图上交互式绘制线段效果如下

OpenLayers 中负责勾绘交互的是 interaction 中的 draw interaction，

默认支持绘制的图形类型包含 Point（点）、LineString（线）、Polygon（面）和Circle（圆）。

触发的事件包含 drawstart和drawend，分别在勾绘开始时候（单击鼠标）和结束时候触发（双击鼠标）。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、导入基本模块

//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Fill,Style,Stroke} from "ol/style";
//导入相关模块
import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { TileWMS ,Vector as VectorSource } from 'ol/source'
import { Select, Draw } from 'ol/interaction'

2、声明draw对象和显示线的图层以及存取绘制完之后的坐标数组。

  data() {return {map: null, // map地图layer:null, //地图图层lineLayer:null, //线图层draw: null,lineSource:null,coordinate: [],};},

3、页面加载完之后初始化地图，并声明各个图层

  mounted() {this.initMap();},

方法实现

initMap() {//地图图层this.layer = new TileLayer({source: new TileWMS({//不能设置为0，否则地图不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true},serverType: "geoserver",}),});//线的图层this.lineSource = new VectorSource({ wrapX: false });this.lineLayer = new VectorLayer({source: this.lineSource,});this.map = new Map({//地图容器IDtarget: "map",//引入地图layers: [this.layer,this.lineLayer],view: new View({//地图中心点center: [987777.93778, 213834.81024],zoom: 14,minZoom:6, // 地图缩放最小级别maxZoom:19,}),});

4、设置画笔样式

      // 获取点击地图的坐标(选中样式)let selectedStyle = new Style({fill: new Fill({color: 'rgba(1, 210, 241, 0.2)'}),stroke: new Stroke({color: 'yellow',width: 4})})// 选择线的工具类this.selectTool = new Select({multi: true,hitTolerance: 10, // 误差style: selectedStyle // 选中要素的样式})

5、添加交互并调用绘图工具

      //添加交互this.map.addInteraction(this.selectTool)//调用绘图工具并传递类型为线，其他类型有Point,LineString,Polygon,Circlethis.onAddInteraction('LineString')

绘图工具实现

    // 绘图工具onAddInteraction(type) {let self = this//勾绘矢量图形的类this.draw = new Draw({//source代表勾绘的要素属于的数据集source: self.lineSource,//type 表示勾绘的要素包含的 geometry 类型type: type})//绘制结束时触发的事件this.draw.on('drawend', function(e) {const geometry = e.feature.getGeometry()let pointArr = geometry.getCoordinates()self.coordinate.push(pointArr)console.log("self.coordinate="+self.coordinate);self.removeDraw()})self.map.addInteraction(this.draw)},//删除交互removeDraw() {this.map.removeInteraction(this.draw)},

6、完整示例代码


<template><div id="app"><div id="map" class="map"></div></div>
</template><script>
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Fill,Style,Stroke} from "ol/style";
//导入相关模块
import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { TileWMS ,Vector as VectorSource } from 'ol/source'
import { Select, Draw } from 'ol/interaction'
export default {name: "olMapImageWMSDrawLine",data() {return {map: null, // map地图layer:null, //地图图层lineLayer:null, //线图层draw: null,lineSource:null,coordinate: [],};},mounted() {this.initMap();},methods: {// 绘图工具onAddInteraction(type) {let self = this//勾绘矢量图形的类this.draw = new Draw({//source代表勾绘的要素属于的数据集source: self.lineSource,//type 表示勾绘的要素包含的 geometry 类型type: type})//绘制结束时触发的事件this.draw.on('drawend', function(e) {const geometry = e.feature.getGeometry()let pointArr = geometry.getCoordinates()self.coordinate.push(pointArr)console.log("self.coordinate="+self.coordinate);self.removeDraw()})self.map.addInteraction(this.draw)},//删除交互removeDraw() {this.map.removeInteraction(this.draw)},initMap() {//地图图层this.layer = new TileLayer({source: new TileWMS({//不能设置为0，否则地图不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true},serverType: "geoserver",}),});//线的图层this.lineSource = new VectorSource({ wrapX: false });this.lineLayer = new VectorLayer({source: this.lineSource,});this.map = new Map({//地图容器IDtarget: "map",//引入地图layers: [this.layer,this.lineLayer],view: new View({//地图中心点center: [987777.93778, 213834.81024],zoom: 14,minZoom:6, // 地图缩放最小级别maxZoom:19,}),});// 获取点击地图的坐标(选中样式)let selectedStyle = new Style({fill: new Fill({color: 'rgba(1, 210, 241, 0.2)'}),stroke: new Stroke({color: 'yellow',width: 4})})// 选择线的工具类this.selectTool = new Select({multi: true,hitTolerance: 10, // 误差style: selectedStyle // 选中要素的样式})//添加交互this.map.addInteraction(this.selectTool)//调用绘图工具并传递类型为线，其他类型有Point,LineString,Polygon,Circlethis.onAddInteraction('LineString')},},
};
</script><style scoped>
.map {width: 100%;height: 800px;
}
</style>

Vue+Openlayer使用Draw实现交互式绘制线段相关推荐

Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积
场景 Vue+Openlayer使用Draw实现交互式绘制线段: Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上实 ...
Vue+Openlayers实现绘制线段并测量距离显示
场景 Vue+Openlayer使用Draw实现交互式绘制线段: Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-CSDN博客_vue 线段在 ...
Vue+Openlayer中测距测面和绘制点线面组件-LjMeasureDraw4326和LjMeasureDraw3857
地理坐标系4326 效果图: 首先下载turf.js: cnpm i -S @turf/turf 全局引入turf.js //引入turf.js import * as turf from '@tur ...
vue openlayer 添加风场效果
vue openlayer 添加风场效果一个简单的小demo,就是在一个openlayers地图上面添加风场效果. 话不多说,直接进入正题. 首先我们需要安装一个插件. 插件地址:https://w ...
vue 项目使用 openlayers根据半径绘制圆形、绘制多边形
vue 项目使用 openlayers根据半径绘制圆形.绘制多边形这个地方我就简单点写吧,因为一些东西比较乱,有的包啥的就按照官网API开发文档根据报错提示自己添加就可以了,我这个地方就不重复写了. ...
实验三交互式绘制多边形
visual studio2019实现交互式绘制多边形这个实验······在网上找不到.孔令德的实验代码下载下来有密码,暴力破解没希望,只能自己写了. 这个和实验二是紧密相连的. 实验实现的目标在 ...
openlayers绘制线段和多边形
openlayers绘制线段和多边形效果演示地址 https://codesandbox.io/s/ol-measure-u3yob 源码用 ts编写,如需要引用到js请编译 //绘制图形thi ...
学习笔记：unity——Vectrosity，绘制线段插件
一.绘制二维坐标下线段: 1.obj1,obj2两个物体之间的连线:VectorLine.SetLine(): using Vectrosity;//绘制二维obj1,obj2两个物体之间的连线pub ...
【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )
文章目录一.设置线宽度二.绘制单条线段 GL_LINES 三.绘制多条线段 GL_LINES 四.绘制依次连接的点组成的线 GL_LINE_STRIP 五.绘制圈 GL_LINE_LOOP ( 偶 ...

Vue+Openlayer使用Draw实现交互式绘制线段

场景

实现

Vue+Openlayer使用Draw实现交互式绘制线段相关推荐

最新文章

热门文章