vue+openlayers添加点击事件进行图片标记

思考：首先肯定是先创建一个图层，然后在该图层点击的位置添加一个feature(图片)

代码实现：

 //创建矢量容器，当点击时将图标feature放进去var iconVector = new VectorSource({features:[]})//创建图层var iconLayer = new VectorLayer({source:iconVector})//将图层添加到地图上this.map.addLayer(iconLayer)this.map.on('singleclick',mapClick);function mapClick(e){//点击的坐标var p = e.coordinate//添加地图点击标记,创建标记featurevar iconFeature = new Feature({geometry: new Point(p)})//标记样式var iconStyle = new Style({image: new Icon({src:require('../assets/bj.jpg')})})//设置标记样式iconFeature.setStyle(iconStyle)iconVector.clear()//每次先清空容器iconVector.addFeature(iconFeature)//将创建好的feature放入到容器中}

效果图：

注意：上面的代码是没有高亮的，但是标记图片是一样的，图片没做处理，但是实现方式应该是正确的

vue+openlayers添加点击事件进行图片标记相关推荐

vue a-sub-menu 添加点击事件报错_Vue+TS 使用的问题(持续更)
[TOC] 引入问题引入.vue问题带来的问题在项目目录下添加vue-shims.d.ts文件, 文件内容为 declare module '*.vue' {import Vue from 'vu ...
vue router-link 添加点击事件
在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况我想要做的是v-for遍历出来的选项卡, 鼠标移上去出现删除标签,移除标签消失的效果原代码: ...
iOS给图片（其他view）添加点击事件
iOS开发中有的时候需要给一些没有点击事件的view添加点击的方法, 比如说点击一个图片想触发某个方法该如何实现了方法一使用 UITapGestureRecognizer 具体的方法就是创建一个 ...
vue使用高德地图为信息窗体再添加点击事件
即使是用的vue,也不能使用@click为窗体添加点击事件,需要使用onclick,并且在定义了函数后,使用该函数还是会报函数未定义的错误,需要在window下添加该函数,点击时可以在原型链中找到该函 ...
android html图片点击事件,Android TextView加载HTMl图文之添加点击事件和查看图片
前言用TextView显示Html图文,每一个需求都是需要探索的,不再是简单的添加点击事件就可以了. 1.如何添加点击事件这里要使用上在Html.forHtml()方法中的第四个参数:Html.T ...
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动，且添加对应点击事件的简单整理
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事 ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
Unity给图片添加点击事件
写在前面实现目标:点击图片,可以弹出一个Panel界面. 实现方法:使用组件Event Trigger给图片添加一个Click事件,并将Click需要实现的功能代码绑定到该图片. 实现步骤 1.在i ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...

vue+openlayers添加点击事件进行图片标记

vue+openlayers添加点击事件进行图片标记相关推荐

最新文章

热门文章