您好,登錄后才能下訂單哦!
這篇文章主要介紹Vue+Openlayer如何實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn)變形效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
旋轉(zhuǎn)、拖動(dòng)
圖1、實(shí)現(xiàn)效果
圖2、旋轉(zhuǎn)效果
圖3、左右移動(dòng)效果
1、vue中引入openlayers
npm i ol --save
附:npm下載指定版本命令,需要可以拿去
npm install --save-dev ol@6.9.0
2、vue中引入 openlayers的擴(kuò)展包 ol-ext
npm install ol-ext --save
附:npm下載指定版本命令,需要可以拿去
npm install --save ol-ext@3.2.16
3、創(chuàng)建地圖容器
<template> <div id="map" class="map"></div> </template>
4、js中引入具體配置,根據(jù)你的具體改,我這里放的是我自己的
ol有關(guān):
import "ol/ol.css"; import View from "ol/View"; import Map from "ol/Map"; import TileLayer from "ol/layer/Tile"; import Overlay from "ol/Overlay"; import XYZ from "ol/source/XYZ"; import { Vector as SourceVec ,Cluster,Vector as VectorSource } from "ol/source"; import { Feature } from "ol"; import { Vector as LayerVec , Vector as VectorLayer } from "ol/layer"; import { Point, LineString, Polygon } from "ol/geom"; import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle, } from "ol/style"; import { OSM, TileArcGISRest } from "ol/source";
ol-ext有關(guān):
import ExtTransform from 'ol-ext/interaction/Transform'
5、實(shí)現(xiàn)地圖方法:
data() { return { map: null, center: [116.39702518856394, 39.918590567855425], //北京故宮的經(jīng)緯度 centerSize: 11.5, projection: "EPSG:4326", } }
mounted() { this.initMap() }
methods: { //初始化地圖 initMap() { //渲染地圖 var layers = [ //深藍(lán)色背景 // new TileLayer({ // source: new XYZ({ // url: // "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", // }), // }), //初始化背景 // new TileLayer({ // source: new OSM(), // }) new TileLayer({ title: "街道圖", source: new XYZ({ url: "http://localhost:8888/haoxing-map/sosomaps/roadmap/{z}/{x}/{y}.jpg",//zwh本地使用 }), }), ]; this.map = new Map({ layers: layers, target: "map", view: new View({ center: this.center, projection: this.projection, zoom: this.centerSize, maxZoom: 17, minZoom: 8, }), }); },
6、地圖上加上多邊形數(shù)據(jù)
mounted() { this.initMap() this.createPolygon() },
methods: { //創(chuàng)建多邊形 createPolygon() { //添加圖層,并設(shè)置點(diǎn)范圍 const polygon = new Feature({ geometry: new Polygon([ [ [116.39314093500519,40.0217660530101], [116.47762344990831,39.921746523871924], [116.33244947314951,39.89892653421418], [116.30623076162784,40.00185925352143], ] ]), }) //設(shè)置樣式 polygon.setStyle(new Style({ stroke: new Stroke({ width: 4, color: [255, 0, 0, 1], }), })) //將圖形加到地圖上 this.map.addLayer(new VectorLayer({ source: new VectorSource({ features: [polygon], }), })) }, }
7、地圖上添加具體的操作方法和效果
mounted() { this.initMap() this.createPolygon() this.onEdit() },
//操作事件 onEdit() { const transform = new ExtTransform({ enableRotatedTransform: false, hitTolerance: 2, translate: true, // 拖拽 stretch: false, // 拉伸 scale: true, // 縮放 rotate: true, // 旋轉(zhuǎn) translateFeature: false, noFlip: true, // layers: [], }) this.map.addInteraction(transform) //開(kāi)始事件 transform.on(['rotatestart','translatestart'], function(e){ // Rotation let startangle = e.feature.get('angle')||0; // Translation console.log(1111); console.log(startangle); }); //旋轉(zhuǎn) transform.on('rotating', function (e){ console.log(2222); console.log("rotate: "+((e.angle*180/Math.PI -180)%360+180).toFixed(2)); console.log(e); }); //移動(dòng) 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); }); //事件結(jié)束 transform.on(['rotateend', 'translateend', 'scaleend'], function (e) { console.log(5555); }); },
以上是“Vue+Openlayer如何實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn)變形效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。