如何解决Openlayers 修改交互工作不正确,保存移动点
一切都很好,我可以画画然后修改。问题是,当我使用光标修改对象时,总是停留在那里。我怎样才能改变呢?我按照 this 示例进行了所有操作。有问题的屏幕:link
一些代码 vue 3,typeSelected 来自另一个组件,并具有值 line string、point、polygon、none 或 delete
<script>
import 'ol/ol.css';
import VectorLayer from 'ol/layer/Vector';
import {Circle as CircleStyle,Fill,Stroke,Style} from 'ol/style';
import {Draw,Modify,Snap} from 'ol/interaction';
import { Vector as VectorSource } from 'ol/source';
import ToolsControl from './ToolsControl.vue'
export default {
components: { ToolsControl },data() {
return {
typeSelected: 'None',source: null,vector: null,modify: null,output: null,draw: null,snap: null,map: this.$store.state.OpenLayersMap,};
},mounted() {
this.source = new VectorSource();
},watch: {
typeSelected: function (val) {
if(val === 'Delete'){
this.map.removeLayer(this.vector);
this.addDrawLayer();
this.map.addLayer(this.vector);
this.typeSelected = 'None';
}else {
this.map.removeLayer(this.vector);
this.addDrawLayer();
this.map.addLayer(this.vector);
this.getTypeSelected()
}
},},methods: {
addDrawLayer(){
// Add a layer for the drawn line
this.vector = new VectorLayer({
source: this.source,style: new Style({
fill: new Fill({
color: 'rgba(255,255,0.2)',}),stroke: new Stroke({
color: '#469dc2',width: 4,image: new CircleStyle({
radius: 7,fill: new Fill({
color: '#469dc2',});
this.modify = new Modify({source: this.source});
this.map.addInteraction(this.modify);
},getTypeSelected() {
this.map.removeInteraction(this.draw);
this.map.removeInteraction(this.snap);
this.addInteraction();
},addInteraction() {
if (this.typeSelected !== 'None') {
this.draw = new Draw({
source: this.source,type: this.typeSelected,style: new Style({
fill: new Fill({
color: 'rgba(255,stroke: new Stroke({
color: 'rgba(0,0.5)',lineDash: [10,10],width: 2,image: new CircleStyle({
radius: 5,stroke: new Stroke({
color: 'rgba(0,0.7)',fill: new Fill({
color: 'rgba(255,});
this.map.addInteraction(this.draw);
this.snap = new Snap({source: this.source});
this.map.addInteraction(this.snap);
}
},};
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。