vue中图片引入问题以及实现openlayers地图标记

最新推荐文章于 2024-07-26 22:40:26 发布
最新推荐文章于 2024-07-26 22:40:26 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： vue中图片引入问题以及实现openlayers地图标记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41588568/article/details/100007793
版权
在Vue项目中使用OpenLayers遇到地图标记不显示的困扰，问题出在图片引入方式上。通过分析和尝试，发现需使用require或import来动态引入图片资源。正确引入图片后，地图标记成功显示。
摘要由CSDN通过智能技术生成

最近因为工作需要，在研究openlayers地图的使用，但是卡在了地图标记这块，不论我怎么尝试，标记就是不会显示在地图上，反反复复看了很多博客，也研究了文档，都觉得没有问题，也用html尝试了，标记可以显示，但就是在我的vue项目中显示不出来，后来发现是图片引入的问题。

刚开始我是这样引入图片的：

但是，在vue中动态引入图片应该使用require或者import,下边是正确的做法，完整代码，方便研究openlayers的小伙伴也可以顺便借鉴一下：

首先，npm install ol

最低0.47元/天 解锁文章
qq_41588568
关注
专栏目录
Openlayer 面图层加载文字标注(踩坑)
weixin_43224584的博客
04-09 3077
** 最近使用openlayer添加网格，需要加载文字标注，在这里遇见一个问题：当你添加面坐标是字符串时，则文字标注加载不上去。** 图层样式： style: function (feat) { var style = new ol.style.Style({ fill: new ol.style.Fill({ ...
原生js实现图片标记类似地图标记功能
07-05
原生js实现图片标记功能 类似与地图的标记.自己写的 ,只是静态图片的标记.坐标用的百分比 不会出现位置因为不同屏幕错乱.图片没有缩放 拖动等功能 标记也没有可以拖动的功能 因为这几个功能都要的话 那不就是地图标记了嘛 直接区扣百度地图就是了
A001： 从0到1学 vue + openlayers
最新发布
jiadsadfasfs的博客
07-26 269
A001： 从0到1学 vue + openlayers
openlayers实现本地图片作为背景，添加marker标记
06-09
刚刚使用openlayers做了一个简单的小例子，注释很全，很简单，将本地的图片作为背景，能够按照坐标添加任意个标记
vue 应用 openlayers 使用ol-hashed维持地图状态
weixin_42084322的博客
03-29 280
在vue 中使用 ol-hashed 维持地图状态，刷新时地图不显示。 原因是使用ol-hashed 时，在操作地图的时候，会自动获取地图的层次及中心点，并将其添加到url地址中， 导致，刷新页面时路由出错， 解决的办法是， 修改 hasded/lib/hash.js 中的deserialize serialize 俩个方法，修改其设置urlpath 的 逻辑 ...
vue 使用 openlayers 加载地图
七月❤的博客
04-01 1183
框架是vue，实现简单加载地图 首先安装依赖 npm i ol -save 需要一个放置地图的盒子 <div class="vm"> <div id="map" class="map-x"></div> </div> 在需要用到openlayers的组件直接引入 import 'ol/ol.css' import { Map, View } from 'ol' import { Tile, Group } from 'ol/
vue 封装openlayers的Map组件
gis_sss的博客
09-09 2489
一、组件的封装 （1）依赖文件的导入 // 映入css文件、 import 'ol/ol.css'; import '../utils/openlayers/css/OverviewMap.css'; import Map from 'ol/Map.js'; import View from 'ol/View.js'; import TileLayer from 'ol/layer/Til...
openlayers加载瓦片地图并手动标记坐标点
04-29
本教程将详细介绍如何使用OpenLayers加载瓦片地图以及手动在地图上标记坐标点。 一、OpenLayers 瓦片地图 瓦片地图是一种常见的地图展示方式，它将大尺寸的地图分割成多个小块（即“瓦片”），每个瓦片都是一个较...
vue3版openlayers基础脚手架
08-24
在Vue3脚手架中，OpenLayers被用于渲染地图，添加图层，以及实现地图的交互功能，如缩放、平移、标记、测量等。 **TypeScript** 在这个项目中的应用增强了代码的可维护性和可读性。TypeScript的类型系统可以帮助...
天地图开发实战：Vue结合OpenLayers实现动态点位地图
06-06
本文详细介绍了如何使用Vue框架结合OpenLayers库来开发一个动态点位地图的组件。通过这个实战案例，读者将学习到如何集成天地图服务，并在地图上动态展示和更新点位信息。 主要内容： OpenLayers库的引入：文章首先...
一个基于Vuejs的地图
08-10
一个基于Vue.js的地图
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 3203
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
BADAO_LIUMANG_QIZHI的博客
04-18 2782
场景 Openlayers下载与加载geoserver的wms服务显示地图： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114320531 在上面使用Openlayers加载wms服务显示地图的基础上，如果想要在Vue中使用Openlayers加载地图怎么用。 上面加载的wms的地图服务 Openlayers的官方Quick start中给的例子使用的是OSM https://openlayers.org/en/lates
Openlayers + Vue实现GIS地图的一些常见问题（整理）
canxuezhang的博客
12-14 5894
本文是博主在开发过程中遇到的一些问题的整理。 学习教程为：《WebGIS之Openlayers全面解析（第二版）》一书。 Openlayers实现离线地图的实现方案 前端： Openlayers 后端： GeoServer
vue中使用OpenLayers（一）：引入谷歌地图
weixin_43960269的博客
11-20 2616
vue中使用OpenLayers（一）：引入谷歌地图 第一步 npm install ol package.json 中可以看到 第二步 html中，这里要设置一个id <div style="width: 100%;height: 100%;" id="mainDiv"></div> methods中 initPointMap() { this.m...
vue加载openlayers入门教程（超简单）
Wzp的博客
07-08 6714
Vue加载OpenLayer很简单，很简单，很简单第一步：创建vue项目第二步 很简单，很简单，很简单 学会了vue，开始测试mapbox的搭配，学会了mapbox，有整了一下openlayer的导入，刚开始简直崩溃，一脸懵逼，怎么导包都导不进去，试了无数次的npm install ol的那种，而且贼慢，后来自己研究了一下，超简单的那种！简单写一下。。。。 第一步：创建vue项目 cmd运行 vue ui 里面的设置自己根据需要加载一下就ok，最主要的是==在依赖的地方导入ol运行依赖！！！！！！！！！！
基于vue框架的openlayers学习，加载地图（一）
weixin_45112886的博客
03-24 1543
基于vue框架的openlayers学习，加载地图（一）安装ol依赖一、创建vue项目二、添加依赖ol1.新建一个vue组件，我的是mapBox.vue2.在App.vue加上mapBox.vue组件总结之我遇到的问题参考文章:这两个的比较细致 安装ol依赖 提示：我用的是在node环境下的vue的框架，然后使用的开发工具是idea。所以第一个我是直接安装依赖，学过vue的人应该都懂 一、创建vue项目 vue create mapBox 二、添加依赖ol npm i ol -S 1.新建一个vue
VUE项目 openlayers简单使用
-
04-16 624
在项目中安装依赖 npm i ol --save 调用相关API 选取一个DOM元素，并进行相关的配置，完整代码： <template> <div id="wrapper"> <div id="map"></div> </div> </template> <script> import Map from "ol/Map"; import View from "ol/View"; // 添加图层 impor
vue2 openlayers 点击标记
04-05
在Vue2中使用OpenLayers实现点击标记的方法如下： 1. 首先在Vue组件中引入OpenLayers相关的库文件： ``` import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import VectorSource from 'ol/source/Vector'; import VectorLayer from 'ol/layer/Vector'; import Feature from 'ol/Feature'; import Point from 'ol/geom/Point'; import {fromLonLat} from 'ol/proj'; import {Icon, Style} from 'ol/style'; ``` 2. 在Vue组件中定义地图容器和地图实例： ``` <template> <div id="map" style="height: 500px;"></div> </template> <script> export default { name: 'Map', data() { return { map: null } }, mounted() { // 初始化地图 this.initMap(); }, methods: { initMap() { // 创建地图容器 this.map = new Map({ target: 'map', layers: [ new VectorLayer({ source: new VectorSource({ features: [ new Feature({ geometry: new Point(fromLonLat([120.1551, 30.2741])), name: '杭州市' }) ] }), style: new Style({ image: new Icon({ anchor: [0.5, 1], src: 'https://openlayers.org/en/latest/examples/data/icon.png' }) }) }) ], view: new View({ center: fromLonLat([120.1551, 30.2741]), zoom: 12 }) }); // 监听地图点击事件 this.map.on('click', this.handleMapClick); }, handleMapClick(event) { // 获取点击的坐标 const coordinate = event.coordinate; // 获取被点击的要素 this.map.forEachFeatureAtPixel(event.pixel, (feature) => { // 判断是否是Point类型的要素 if (feature.getGeometry().getType() === 'Point') { // 获取要素的名称 const name = feature.get('name'); // 在控制台输出要素名称和坐标 console.log(name, coordinate); } }); } } } </script> ``` 3. 在`initMap`方法中创建地图容器和地图实例，然后监听地图的点击事件，在`handleMapClick`方法中获取被点击的要素和坐标，判断是否是Point类型的要素，然后输出要素名称和坐标。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值