Vue+Openlayer如何实现图形的拖动和旋转变形效果(openlayer,vue,开发技术)

实现效果

旋转、拖动

图1、实现效果

图2、旋转效果

图3、左右移动效果

实现步骤

1、vue中引入openlayers

npmiol--save

附：npm下载指定版本命令，需要可以拿去

npminstall--save-devol@6.9.0

2、vue中引入 openlayers的扩展包 ol-ext

npminstallol-ext--save

附：npm下载指定版本命令，需要可以拿去

npminstall--saveol-ext@3.2.16

3、创建地图容器

<template><divid="map"class="map"></div></template>

4、js中引入具体配置，根据你的具体改，我这里放的是我自己的

ol有关：

import"ol/ol.css";importViewfrom"ol/View";importMapfrom"ol/Map";importTileLayerfrom"ol/layer/Tile";importOverlayfrom"ol/Overlay";importXYZfrom"ol/source/XYZ";import{VectorasSourceVec,Cluster,VectorasVectorSource}from"ol/source";import{Feature}from"ol";import{VectorasLayerVec,VectorasVectorLayer}from"ol/layer";import{Point,LineString,Polygon}from"ol/geom";import{Style,Icon,Fill,Stroke,Text,CircleasCircleStyle,}from"ol/style";import{OSM,TileArcGISRest}from"ol/source";

ol-ext有关：

importExtTransformfrom'ol-ext/interaction/Transform'

5、实现地图方法：

data(){return{map:null,center:[116.39702518856394,39.918590567855425],//北京故宫的经纬度centerSize:11.5,projection:"EPSG:4326",}}

mounted(){this.initMap()}

methods:{//初始化地图initMap(){//渲染地图varlayers=[//深蓝色背景//newTileLayer({//source:newXYZ({//url://"https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",//}),//}),//初始化背景//newTileLayer({//source:newOSM(),//})newTileLayer({title:"街道图",source:newXYZ({url:"http://localhost:8888/haoxing-map/sosomaps/roadmap/{z}/{x}/{y}.jpg",//zwh本地使用}),}),];this.map=newMap({layers:layers,target:"map",view:newView({center:this.center,projection:this.projection,zoom:this.centerSize,maxZoom:17,minZoom:8,}),});},

6、地图上加上多边形数据

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

methods:{//创建多边形createPolygon(){//添加图层，并设置点范围constpolygon=newFeature({geometry:newPolygon([[[116.39314093500519,40.0217660530101],[116.47762344990831,39.921746523871924],[116.33244947314951,39.89892653421418],[116.30623076162784,40.00185925352143],]]),})//设置样式polygon.setStyle(newStyle({stroke:newStroke({width:4,color:[255,0,0,1],}),}))//将图形加到地图上this.map.addLayer(newVectorLayer({source:newVectorSource({features:[polygon],}),}))},}

7、地图上添加具体的操作方法和效果

mounted(){this.initMap()this.createPolygon()this.onEdit()},

//操作事件onEdit(){consttransform=newExtTransform({enableRotatedTransform:false,hitTolerance:2,translate:true,//拖拽stretch:false,//拉伸scale:true,//缩放rotate:true,//旋转translateFeature:false,noFlip:true,//layers:[],})this.map.addInteraction(transform)//开始事件transform.on(['rotatestart','translatestart'],function(e){//Rotationletstartangle=e.feature.get('angle')||0;//Translationconsole.log(1111);console.log(startangle);});//旋转transform.on('rotating',function(e){console.log(2222);console.log("rotate:"+((e.angle*180/Math.PI-180)%360+180).toFixed(2));console.log(e);});//移动transform.on('translating',function(e){console.log(3333);console.log(e.delta);console.log(e);});//拖拽事件transform.on('scaling',function(e){console.log(4444);console.log(e.scale);console.log(e);});//事件结束transform.on(['rotateend','translateend','scaleend'],function(e){console.log(5555);});},