openlayers地图自定义图标打点(二)

1.效果

在这里插入图片描述

2.代码

结构,地图初始化同上篇

<template><div class="container">//地图结构<div id="map"></div></div>
</template><script>
//引入依赖项
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import Overlay from 'ol/Overlay'
import imgName from '../assets/target.png'
export default {data () {return {map: null,//地图实例imgSrc: imgName,//自定义打点图标的图片地址clickLocation: '',//点击地图时的坐标数据myLocation: ''//当前打点位置的maker对象}},mounted () {this.initMap()//初始化},methods: {// 初始化initMap () {// 创建一个map对象,指定地图容器的id和展示地图的初始视图this.map = new Map({target: 'map', // 地图容器的idlayers: [new TileLayer({source: new XYZ({url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=7&style=7&x={x}&y={y}&z={z}'})})],// 添加一个OSM(OpenStreetMap)图层view: new View({// 将西安作为地图中心// center: olProj.fromLonLat(this.address),//坐标转换center: [118.7969, 32.0603],// 经纬度转换projection: 'EPSG:4326', // EPSG:3857(默认坐标格式)// 初始时地图放大的级别zoom: 5}),controls: []})this.singleclick()},// 底图添加点击事件singleclick () {this.map.on('singleclick', (e) => {console.log(e, '底图点击处携带的数据')console.log(e.coordinate, '底图当前点击位置的坐标')this.clickLocation = e.coordinatethis.setDIYmarkers(this.clickLocation)})},// 设置自定义打点要素setDIYmarkers (myLocation) {if (this.myLocation) {//清除上一次标记的点this.map.removeOverlay(this.myLocation)}// 创建一个dom元素const el = document.createElement('img')el.src = this.imgSrcel.style.width = '40px'el.style.height = '40px'el.style.cursor = 'pointer'const marker = new Overlay({element: el, // 要显示的元素// position: fromLonLat(myLocation), // 地图投影的位置position: myLocation, // 地图投影的位置offset: [-20, -30], // 元素显示的像素偏移量autoPan: true // 自动移动地图以完整的显示元素})this.myLocation = markerthis.map.addOverlay(marker)}}
}
</script>
<style lang='scss'  scoped>
.container {width: 100%;height: 100vh;border-radius: 50px;/* border: 1px solid red; */background-color: rgba(255, 192, 203, 0.277);#map {width: 100%;height: 100%;border: 1px solid red;border-radius: 50px;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/662708.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

模板讲解之进阶

在之前的C入门的博客中我们就学习到了模板初阶&#xff0c;今天我们来学习模板的进阶&#xff0c;以便于更好地将模板运用到代码中 非类型模板参数 模板参数分类类型形参与非类型形参。 类型形参即&#xff1a;出现在模板参数列表中&#xff0c;跟在class或者typename之类的…

2024美赛C题思路/代码:网球中的动量

美赛直播b站&#xff0c;提前关注&#xff1a;川川菜鸟 美赛辅导预定&#xff1a;美赛服务 去年美赛C题&#xff1a;2023美赛C题 题目翻译 背景 在2023年温布尔登男子单打决赛中&#xff0c;20岁的西班牙新星阿尔卡拉兹击败了36岁的诺瓦克德约科维奇。这是德约科维奇自201…

关于v8垃圾回收机制联想到的知识点

对于值类型b来说&#xff0c;就直接释放了其占用的内存&#xff0c;对于引用类型obj来说&#xff0c;销毁的只是变量obj对堆内存地址 1001 的引用&#xff0c;obj的值 { c: 3 } 依然存在于堆内存中。那么堆内存中的变量如何进行回收呢&#xff1f; V8的垃圾回收策略主要是基于…

怎么录制屏幕视频?让你的视频脱颖而出

随着科技的飞速发展&#xff0c;录制屏幕视频已经成为人们日常学习和工作中不可或缺的技能。无论是制作教程、分享游戏高光时刻&#xff0c;还是保存线上会议的内容&#xff0c;屏幕录制都可以帮助我们更好地传达信息。可是怎么录制屏幕视频呢&#xff1f;本文将介绍两种录制屏…

手把手教你如何将项目发布到Maven中央仓库(附步骤及常见问题解决方法)

手把手教你如何将项目发布到Maven中央仓库(附步骤及常见问题解决方法) 业余时间写了个轻量级的权限控制框架 light-security &#xff0c;并发布到了 Maven 中央仓库。发布时的操作步骤还挺多&#xff0c;我这个记性是记不住的&#xff0c;所以记录一下&#xff0c;便于以后查…

【C++】 C++入门— 基于范围的 for 循环

C 基于范围的for循环1 使用样例2 使用条件3 完善措施 Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;下一篇文章见&#xff01;&#xff01;&#xff01; 基于范围的for循环 1 使用样例 使用for循环遍历数组&#xff0c;我们通常这么写&#xff1a; …

3D打印、自动升降超静电机驱动方案TMC2209

TMC2209步进电机驱动芯片介绍 TMC2209是一款用于两相步进电机的超静音电机驱动IC。Trinamic的精密StealthChop波器确保了无噪音运行、最大效率和最佳电机转矩。它的快速电流调节和与SpreadCycle的可选组合允许高度动态运动&#xff0c;同时为无传感器归位添加了StallGuard4。集…

python中的可变与不可变、深拷贝和浅拷贝

个人猜想&#xff08;很遗憾失败了&#xff09; 在硬盘或者系统中存在一个字符集 如果存在硬盘中&#xff0c;那么硬盘出厂的时候他的字符集所占用的空间就已经确定了。 如果存在于系统的话&#xff0c;硬盘应该在出厂的时候为系统设置一个存储系统字符集的地方。在安装系统…

L1-019 谁先倒分数 15

划拳是古老中国酒文化的一个有趣的组成部分。酒桌上两人划拳的方法为&#xff1a;每人口中喊出一个数字&#xff0c;同时用手比划出一个数字。如果谁比划出的数字正好等于两人喊出的数字之和&#xff0c;谁就输了&#xff0c;输家罚一杯酒。两人同赢或两人同输则继续下一轮&…

2024/2/4周报

文章目录 摘要Abstract文献阅读题目引言创新点方法利用长短期记忆网络学习时空演化特征构建用于气象辅助信息编码的堆叠自编码器使用多任务学习发现全市通用模式 模型实验数据集评估准则实验结果 深度学习Self-attentionself-Attention由来self-attention原理self attention代码…

【ArcGIS微课1000例】0100:ArcGIS for CAD软件下载与安装(附安装包)

ArcGIS for CAD软件下载与安装(附安装包)。 文章目录 一、ArcGIS for CAD概述1. ArcGIS for CAD介绍2. 主要功能二、ArcGIS for CAD下载三、ArcGIS for CAD安装1. 安装CAD2. 安装ArcGIS for CAD3. 配置一、ArcGIS for CAD概述 1. ArcGIS for CAD介绍 ArcGIS for CAD是Esri提…

《拳皇97》中的人物性格——陈可汗

在热血沸腾、高手如云的《拳皇97》世界里,有一位壮硕威猛却自带喜感的角色引人注目,他就是我们的重量级选手——陈可汗。这位来自中国的摔跤手以其独特的性格特质和生动活泼的表现方式,在激烈的格斗赛场上描绘出了一幅既令人捧腹又充满力量的画面。 陈可汗甫一登场,那魁梧的…

Acwing---2816. 判断子序列

判断子序列 1.题目2.基本思想3.代码实现 1.题目 给定一个长度为 n n n 的整数序列 a 1 , a 2 , … , a n a1,a2,…,an a1,a2,…,an 以及一个长度为 m m m 的整数序列 b 1 , b 2 , … , b m b1,b2,…,bm b1,b2,…,bm。 请你判断 a a a序列是否为 b b b序列的子序列。 子…

解锁影视制作新境界:DaVinci Resolve Studio 18引领行业变革

随着科技的不断发展&#xff0c;影视制作行业也在日新月异地变革。在这一进程中&#xff0c;DaVinci Resolve Studio 18以其卓越的性能和无限的创新力&#xff0c;成为了行业的领跑者。 DaVinci Resolve Studio 18是一款集剪辑、调色、音频处理和特效合成于一身的专业级影视制…

CICD注册和使用gitlab-runner常见问题

1、现象 fatal: unable to access https://github.com/homebrew/brew/: 2、解决 git config --global --unset http.proxy git config --global --unset https.proxy 查看gitlab-runner是否成功&#xff1a; userusers-MacBook-Pro ~ % gitlab-runner -h 查看gitlab-run…

openssl3.2 - 帮助文档的整理

文章目录 openssl3.2 - 帮助文档的整理概述笔记整理后, 非空的文件夹如下整理后, 留下的有点用的文件列表如下备注END openssl3.2 - 帮助文档的整理 概述 openssl3.2源码工程编译安装完, 对于库的使用者, 有用的文档, 远不止安装的那些html. 用everything查找, 配合手工删除,…

使用python-pandas对比两个结构相同的文件差异,并输出差集文件的方法

最近在处理数据相关需求&#xff0c;遇到一个问题&#xff1a;两个文件&#xff0c;fileA.csv和fileB.csv&#xff0c;结构相同&#xff0c;fileA包含fileB的内容&#xff0c;但是需要得到二者的差集&#xff0c;输出新的文件fileC。 经过查询资料&#xff0c;发现pandas可以很…

康姿百德床垫价格合理功效好,用科技力量守护您的睡眠健康

现代生活中&#xff0c;优质睡眠的观念已深入人心。人们渐渐认识到&#xff0c;一个舒适的床垫不仅仅是睡眠的工具&#xff0c;更是健康的守护者。很多朋友在选购床垫一掷千金&#xff0c;却找不到一款合适的床垫。康姿百德床垫是专为提升睡眠质量研发的床垫&#xff0c;成为了…

保姆级教程:从0到1搭建web自动化测试环境

之前都是在linux上安装&#xff0c;第一次在windows上配置环境&#xff0c;加上距离上次配置环境有点久了&#xff0c;竟也花了点时间。特此记录下保姆级教程&#xff0c;给初学者一个有效的参考&#xff01; 一. 环境搭建 工具清单 工具工具名版本Java开发工具包JDK1.8浏览…

面试手写第五期

文章目录 一. 实现一个函数用来对 URL 的 querystring 进行编码二. 如何实现一个数组洗牌函数 shuffle三. 异步加法的几种方式四. 实现trim函数五. 求多个数组的交集六. 手写实现render函数七. 驼峰转- -转驼峰八. instanceof实现九. 组合问题十. 字符串分组 一. 实现一个函数用…