HelloWorld.vue
<script setup>
import { ref, onMounted } from 'vue'
import Transform from "ol-ext/interaction/Transform"
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { Feature } from 'ol';
import { Polygon } from 'ol/geom';
onMounted(() => {
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new View({
center: [34243, 6305749],
zoom: 5.5
})
});
var vector = new VectorLayer({
name: 'Vecteur',
source: new VectorSource({ wrapX: false }),
})
map.addLayer(vector);
vector.getSource().addFeature(new Feature(new Polygon([[[34243, 6305749], [210354, 6305749], [210354, 5576845], [34243, 5576845], [34243, 6305749]]])));
var interaction = new Transform({
keepRectangle: true,
});
map.addInteraction(interaction);
let rotate = 0;
let sum = 0;
['scale', 'scale1', 'scale2', 'scale3', 'scalev', 'scaleh1', 'scalev2', 'scaleh3'].map((v, i) => {
interaction.Cursors[v] = `url(\'data:image/svg+xml, <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 182.931 182.931" style="enable-background:new 0 0 182.931 182.931;" xml:space="preserve"> <g transform="scale(0.5) translate(91.4655,91.4655) rotate(${i % 4 * 90 + (i > 3 ? 45 : 0) - sum - 90},91.4655,91.4655)"><path d="M173.93,92.798c-4.971,0-9,4.029-9,9v50.404L30.728,18h50.404c4.971,0,9-4.029,9-9s-4.029-9-9-9H9C4.03,0,0,4.029,0,9 v72.132c0,4.971,4.029,9,9,9s9-4.029,9-9V30.729l134.202,134.202h-50.404c-4.971,0-9,4.029-9,9s4.029,9,9,9h72.132 c4.971,0,9-4.029,9-9v-72.132C182.93,96.828,178.901,92.798,173.93,92.798z"/></g></svg> \') 15 15, auto`
})
let rotateArr = [];
interaction.on("rotating", (e) => {
rotate = (e.angle * 180 / Math.PI - 180) % 360 + 180;
})
interaction.on("rotateend", () => {
rotateArr.push(rotate);
console.log(rotateArr, "arr")
let sum = 0;
rotateArr.map(v => sum = sum + v);
['scale', 'scale1', 'scale2', 'scale3', 'scalev', 'scaleh1', 'scalev2', 'scaleh3'].map((v, i) => {
interaction.Cursors[v] = `url(\'data:image/svg+xml, <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 182.931 182.931" style="enable-background:new 0 0 182.931 182.931;" xml:space="preserve"> <g transform="scale(0.5) translate(91.4655,91.4655) rotate(${i % 4 * 90 + (i > 3 ? 45 : 0) - sum - 90},91.4655,91.4655)"><path d="M173.93,92.798c-4.971,0-9,4.029-9,9v50.404L30.728,18h50.404c4.971,0,9-4.029,9-9s-4.029-9-9-9H9C4.03,0,0,4.029,0,9 v72.132c0,4.971,4.029,9,9,9s9-4.029,9-9V30.729l134.202,134.202h-50.404c-4.971,0-9,4.029-9,9s4.029,9,9,9h72.132 c4.971,0,9-4.029,9-9v-72.132C182.93,96.828,178.901,92.798,173.93,92.798z"/></g></svg> \') 15 15, auto`
})
console.log(interaction.Cursors, "aaa");
})
})
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<div id="map" style="width: 600px;height: 600px;"></div>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
starter
</p>
<p>
Install
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
in your IDE for a better DX
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
