【记录1】Vue+OpenLayers 图片标注不显示问题_openlayers extent不能显示点_Merlin丶的博客

相关文章推荐
叛逆的斑马 · JS也能写合约？试试AssemblyScri ...· 12 月前 ·
直爽的红烧肉 · 用Tkinter打造GUI开发工具（19）t ...· 1 年前 ·
瘦瘦的海豚 · Oracle正则表达式（REGEXP_）相关 ...· 1 年前 ·
威武的企鹅 · MariaDB/MySQL 错误代码 ...· 1 年前 ·
瘦瘦的野马 · PHP验证器类-Particle\Valid ...· 1 年前 ·
 image: new ol.style.Icon({
              anchor: [0.5, 60],
              anchorOrigin: 'top-right',
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              offsetOrigin: 'top-right',
              offset: [0, 10],
              //图标缩放比例
              scale: 0.5,
              //透明度
              opacity: 0.75,
              //图标的url
              src: '../assets/image/blueIcon.png',
            }),
 image: new ol.style.Icon({
              anchor: [0.5, 60],
              anchorOrigin: 'top-right',
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              offsetOrigin: 'top-right',
              offset: [0, 10],
              //图标缩放比例
              scale: 0.5,
              //透明度
              opacity: 0.75,
              //图标的url
              src: require('../assets/image/blueIcon.png'),
            }),
src这里的坑
 src: require(‘…/assets/image/blueIcon.png’),
                    不显示的代码 image: new ol.style.Icon({              anchor: [0.5, 60],              anchorOrigin: 'top-right',              anchorXUnits: 'fraction',              anchorYUnits: 'pixels',              offsetOrigin: 'top-right',              offset: [0, 10
				内容概要：通过带着读者手写openlayers6 绘制扇形及环形，了解 地图容器核心原理。在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形
适合人群：具备一定编程基础，工作1-3年的web前端或webGIS研发人员
能学到什么：①vue3+vite；②地图容器相关知识。
阅读建议：此资源以开发绘制扇形及环形学习其原理地图容器，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
				项目功能：能够加载存储在 excel 表格中的坐标数据（x，y），在网页上自动绘制多边形，通过点击选中加载的要素，能够以弹窗的形式展示该要素的基本信息，包括加载的文件名称和计算得到的要素面积信息，详情参考链接：
https://blog.csdn.net/A____t/article/details/124655890?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22124655890%22%2C%22source%22%3A%22A____t%22%7D&ctrtid=ezGer
在客户开发一套门户管理系统时，集成了tinymce组件，用于编辑内容，springboot不同于其他项目。  
是集成tomcat的，文件和图片是不能直接访问的。所以我在做集成富文本编辑器时，需要处理图片的问题。
这个问题跟上传头像等显示图片的功能是类似的。下面记录详情步骤代码。
第一步：集成tinymce组件
<!--引入tinymce组件-
				基于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
<html lang="en">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400.
				Vue OpenLayers 是一种基于 Vue.js 的开源地图库，结合了 OpenLayers 的强大功能和 Vue.js 的易用性。其中，鼠标 pointermove 显示城市名片是 Vue OpenLayers 中非常有用的功能之一。下面我们来看一下示例代码。
在 Vue OpenLayers 中，我们可以使用 PointerMove() 方法来实现鼠标移动时的功能。我们可以在 mounted() 中添加以下代码：
```JavaScript
mounted() {
  this.map.on('pointermove', this.displayCityCard);
这里，我们为指针移动事件添加了一个监听器，该监听器会调用 displayCityCard 方法。
接下来，我们需要实现 displayCityCard 方法，该方法会在指针移动时显示城市名片。代码如下：
```JavaScript
methods: {
  displayCityCard(evt) {
    let features = this.map.getFeaturesAtPixel(evt.pixel);
    if (features.length) {
      let feature = features[0];
      let city = feature.get('name');
      this.city = city;
      this.showCityCard = true;
    } else {
      this.showCityCard = false;
这里，我们首先通过 getFeaturesAtPixel() 方法获取与指针所在位置对应的要素。如果有要素，则从中取出城市名，并将其赋值给 city。同时，我们将 showCityCard 属性设置为 true，以显示城市名片。如果没有要素，则将 showCityCard 设置为 false，以隐藏城市名片。
最后，我们需要在模板中添加一个 div 元素，用于显示城市名片：
```HTML
<div v-if="showCityCard" class="city-card">
  {{ city }}
这里，我们使用了 v-if 指令来控制 div 元素的显示与隐藏。如果 showCityCard 为 true，则显示该元素，并将城市名字显示在其中。
以上就是在 Vue OpenLayers 中实现鼠标 pointermove 显示城市名片的示例代码。通过这个函数，我们可以更加便捷地在地图上查看城市信息。   
				【记录2】in ./node_modules/vuex/dist/vuex.esm-bundler.js export ‘inject‘ (imported as ‘inject‘) was not