在Vue中使用Supermap For Leaflet相关问题

在Vue中使用Supermap For Leaflet相关问题

在使用超图封装的leaflet时，尤其是在vue中使用，会有诸多问题，下面是在开发中遇到的问题以及解决思路。

导入问题

在引入时，官网的引入方式最新版为局部引入，存在一定问题（可能为个人原因），这时需要切换引入方式，对于其封装leaflet，
首先安装其官网配置好相关参数，这里仅提供引入方式修改
如下代码：
引入时需要注意全局引入以及局部引入

一下引入方式都试试

import L from '@supermap/iclient-leaflet/node_modules/leaflet'
import { GetFeaturesByGeometryParameters } from '@supermap/iclient-leaflet'
import '@supermap/iclient-leaflet/dist/iclient-leaflet.js'
import '@supermap/iclient-leaflet/dist/iclient-leaflet.css'

样式文件可以在 index.html 中引入
这样，就引入成功了，但其函数，开头为小写，如Tianditulayer为tianditulayer

默认 icon 无法找到问题

在使用过程中，发现 vue 中修改图标似乎存在问题，同时默认图标似乎无法找到位置，于是修改引入方式

在使用 Leaflet 进行 Vue2 开发时，如果出现找不到 marker-icon-2x.png 的错误，通常是由于引用的 Leaflet 样式文件中使用了相对路径，而这些图片文件的路径无法正确地解析。要解决这个问题，您可以尝试以下方法：

1. 在您的 Vue2 项目中安装 Leaflet 的 CSS 文件。您可以通过 NPM 或 Yarn 来安装：

   csharpCopy codenpm install leaflet
   或
   yarn add leaflet
   

2. 在您的 Vue2 项目中的 public 文件夹下创建一个名为 leaflet 的文件夹，并将以下文件从 Leaflet 的安装目录中复制到该文件夹中：

   bashCopy codeleaflet.css
   images/marker-icon.png
   images/marker-icon-2x.png
   images/marker-shadow.png
   

   注意：这里的 images 文件夹必须放在 leaflet 文件夹中，而不能直接放在 public 文件夹下。

3. 在您的 Vue2 项目中的 index.html 文件中，将 Leaflet 样式文件的引用路径从相对路径改为绝对路径：

   htmlCopy code
   <link rel="stylesheet" href="/leaflet/leaflet.css">
   

   注意：这里的 / 表示项目根目录，具体路径应该根据您的项目结构进行调整。

4. 在您的 Vue2 项目中，在需要使用 Leaflet 的组件中，按照 Leaflet 的文档进行初始化和使用。在使用 Marker 时，可以直接使用默认的图标，不需要再设置图标路径：

   javascriptCopy codeimport L from 'leaflet';
   
   export default {
     mounted() {
       const map = L.map('map').setView([51.505, -0.09], 13);
       L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
         maxZoom: 18,
       }).addTo(map);
       L.marker([51.5, -0.09]).addTo(map);
     },
   };
   

这样，您应该就可以成功地在 Vue2 中使用 Leaflet，并且不再出现找不到 marker-icon-2x.png 的错误了。