如何在 openlayers 中添加自定义比例线？

Question

我正在开发一个地理网络应用程序，想在其中添加一条比例线。默认的 openlayers 比例线不适合我的设计，看起来也不专业。所以我想添加一条经典的刻度线，例如：

做这个的最好方式是什么？添加 SVG、获取当前缩放并计算 SVG 的正确大小？

我尝试用 CSS 设计刻度线的样式，这是有效的，但我只能改变它的颜色等，而我想改变整个设计。

这是我的 Map 组件中的代码，但总而言之，它只是经典声明：

const me = this;

const scalelineControl = new ScaleLine({
    minWidth: 64,
    units: 'metric',
});
me.currentView = new View({
    center: proj.transform(this.mapCenter, 'EPSG:4326', 'EPSG:3857'),
    zoom: this.mapZoom,
    projection: 'EPSG:3857',
});
Vue.prototype.$currentView = me.currentView;
me.map = new Map({
    layers: [
    new TileLayer({
        source: new OsmSource(),
    }),
    new Vector({ source: this.srLayerSource }),
    ],
    view: me.currentView,
    loadTilesWhileAnimating: true,
    controls: [scalelineControl],
});

我正在使用 Vue.js 创建网络应用程序。地图在其组件的created()部分中声明，并在mounted()中添加，但这在本主题中并不重要。只是为了通知。

Answer 1

检查这个开放层文档这确实对我有帮助