How to realize the effect of dragging and rotating deformation of graphics by Vue+Openlayer

This article mainly introduces Vue+Openlayer how to achieve graphics drag and rotation deformation effect, the article is very detailed, has a certain reference value, interested friends must read it!

Realize the effect

Rotate, drag

Figure 1. Realization effect

Figure 2. Rotation effect

Figure 3. The effect of moving left and right

Implementation steps

1. Introduce openlayers into vue

Npm i ol-save

Attached: npm download the specified version of the command, you can take it if necessary

Npm install-save-dev ol@6.9.0

2. The expansion package ol-ext of openlayers is introduced into vue.

Npm install ol-ext-save

Attached: npm download the specified version of the command, you can take it if necessary

Npm install-save ol-ext@3.2.16

3. Create a map container

4. Introduce specific configuration into js. According to your specific changes, what I put here is my own.

Related to ol:

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"

Related to ol-ext:

Import ExtTransform from 'ol-ext/interaction/Transform'

5. Realize the map method:

Data () {return {map: null, center: [116.39702518856394, 39.918590567855425], / / longitude and latitude of the Imperial Palace in Beijing centerSize: 11.5, projection: "EPSG:4326" }} mounted () {this.initMap ()} methods: {/ / initialize map initMap () {/ / render map var layers = [/ / dark blue background / / new TileLayer ({/ / source: new XYZ ({/ / url: / / "https:/) / map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/ {z} / {y} / {x} " / /}), / / initialize the background / / new TileLayer ({/ / source: new OSM (), / /}) new TileLayer ({title: "street map" Source: new XYZ ({url: "Local use of 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. Add polygonal data to the map

Mounted () {this.initMap () this.createPolygon ()}, methods: {/ / create polygon createPolygon () {/ / add layers And set the point range const polygon = new Feature ({geometry: new Polygon ([[116.39314093500519Med 40.0217660530101], [116.4776234499083J 39.921746523871924], [116.33244947314951d39.892653421418], [116.30623076162784Med 40.00185925352143],]). }) / / set polygon.setStyle (new Style ({stroke: new Stroke ({width: 4, color: [255,0,0,1],}) (})) / / add graphics to the map this.map.addLayer (new VectorLayer ({source: new VectorSource ({features: [polygon],}),})},}

7. Add specific operation methods and effects to the map

Mounted () {this.initMap () this.createPolygon () this.onEdit ()}, / / Action event onEdit () {const transform = new ExtTransform ({enableRotatedTransform: false, hitTolerance: 2, translate: true, / / drag stretch: false, / / stretch scale: true, / / scale rotate: true, / / rotate translateFeature: false, noFlip: true / / layers: [],}) this.map.addInteraction (transform) / / start event transform.on (['rotatestart','translatestart'], function (e) {/ / Rotation let startangle = e.feature.get (' angle') | | 0 / / Translation console.log (1111); console.log (startangle);}); / / rotate transform.on ('rotating', function (e) {console.log (2222); console.log ("rotate:" + ((e.angle*180/Math.PI-180)% 360 / 180) .tofixed (2); console.log (e);}) / / Mobile transform.on ('translating', function (e) {console.log (3333); console.log (e.delta); console.log (e);}); / / drag event transform.on (' scaling', function (e) {console.log (4444); console.log (e.scale); console.log (e)) }); / / event end transform.on (['rotateend',' translateend', 'scaleend'], function (e) {console.log (5555);});}, this is all the content of the article "how to drag and rotate graphics in Vue+Openlayer". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!