Vuelayers vl-style-icon 语法答案

【问题标题】：Vuelayers vl-style-icon syntaxVuelayers vl-style-icon 语法
【发布时间】：2019-11-25 02:36:58
【问题描述】：

我一直在查看 vuelayers 文档，发现关于使用 vl-style-icon 模块的信息很少，如果您想在 vuelayer 地图上创建图标，这非常重要。

我很确定在使用它时我有正确的语法，但marker.png 不会通过它加载。我尝试将它作为普通图像访问，它工作正常，所以我假设它与我的语法有关。

这是我的代码：

<template>
  <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 400px">
    <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation" projection="EPSG:4326"></vl-view>
    <vl-feature v-for="crime in crimePoints" :key="crime.id">
      <vl-geom-point :coordinates="crime.coords"></vl-geom-point>
      <vl-style-box>
        <vl-style-icon src="./marker.png" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
      </vl-style-box>
    </vl-feature>
    <vl-layer-tile>
      <vl-source-osm></vl-source-osm>
    </vl-layer-tile>
  </vl-map>
</template>

vl-style-box 和vl-style-icon 是这里的重点。我还检查了在没有vl-style-box 的情况下是否会出现积分，并且确实如此。我的代码可能有什么问题？

【问题讨论】：

你试过用@来引用图标吗？ src="@/marker.png" 或者 src="../marker.png"
都试过了，marker.png文件也和vue文件在同一个目录

标签： vuejs2 vuelayers

【解决方案1】：

你可以这样试试：

<vl-style-icon :src="require('./marker.png')" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
  </vl-style-box>

【讨论】：

【解决方案2】：

如果您使用 Vue CLI 创建您的 vue 项目，请将其包含在您的 vue.config.js 文件中。第一部分告诉 webpack 解析自定义标签上的 url 属性，而不是已经配置的 (Source)。

module.exports = {
  chainWebpack: config => {
    config.module.rule('vue').use('vue-loader').tap(options => {
      options.transformAssetUrls = {
        'vl-style-icon': 'src',
        ...options.transformAssetUrls,
      };
      return options;
    });
  }
}

运行以下命令验证是否存在正确的 vue-loader 配置 Source

vue inspect > output.js

【讨论】：