1

我一直在查看 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并且确实出现了。我的代码可能有什么问题?

4

2 回答 2

0

你可以这样尝试:

<vl-style-icon :src="require('./marker.png')" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
  </vl-style-box>
于 2020-11-16T08:56:51.180 回答
0

如果您使用 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
于 2021-03-20T15:52:44.303 回答