Vue+Openlayer如何实现图形的拖动和旋转变形效果
Vue+Openlayer如何实现图形的拖动和旋转变形效果
这篇文章主要介绍Vue+Openlayer如何实现图形的拖动和旋转变形效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
实现效果
旋转、拖动
图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);});},
以上是“Vue+Openlayer如何实现图形的拖动和旋转变形效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！
