将OpenLayers地图从英语翻译成德语

Question

这些天，我正在尝试将我的OpenLayers地图从英语翻译成例如德语。地图语言应该以站点语言为基础。然而，我只找到过时的OL v2的博客条目，或者根本没有。https://openlayers.org/en/latest/apidoc/module-ol_interaction_Translate-Translate.html听起来基本上就是我需要的，但我不能让它工作。

import Translate from 'ol/interaction/Translate';
Translate.set('es');

导致以下控制台错误：ol_interaction_Translate__WEBPACK_IMPORTED_MODULE_9__.default.set is not a function我承认上面的set更像是try 'n错误，但这是到目前为止我能想到的最有希望的错误。

我高度赞赏的线索，如例子或链接到最新的博客条目。提前感谢！

AMartinNo1

Answer 1

我非常感谢你在这方面所做的努力，但我担心你对“翻译”有几个误解。

首先，我想你想在地图上设置标签的语言，对吧(像‘德国’，‘柏林’，‘莱因’等)？在这种情况下，您需要选择合适的WMS，OSM有一个'German Style'，它不仅拥有世界各地的德语标签，而且样式是基于德国壳牌地图集。如果你只需要德国的地图数据，德国的WebAtlas是很多人的首选。

其次(仅供将来或其他阅读本文的人参考)，地理中的“翻译”并不意味着“翻译语言”，它的意思是“在不改变形状的情况下移动某物”(德语中的verschieben)，这也是它在OpenLayers库中交互的原因。

Answer 2

要使地图完全国际化，您可能需要使用矢量源，至少对于标签是这样。这个示例不需要API key，但是Mapbox和MapTiler提供了类似的服务。

​

var language = document.getElementById('language')

var fill = new ol.style.Fill({
  color: 'rgba(255,255,255,0.4)'
});
var stroke = new ol.style.Stroke({
  color: '#3399CC',
  width: 1.25
});
var styles = [
  new ol.style.Style({
    image: new ol.style.Circle({
      fill: new ol.style.Fill({
        color: 'rgba(0,0,0,0.2)'
      }),
      stroke: new ol.style.Stroke({
        color: 'black',
        width: 1.25
      }),
      radius: 5
    }),
    fill: fill,
    stroke: stroke,
    text: new ol.style.Text({
      font: '18px Calibri,sans-serif',
      textBaseline: 'top',
      offsetY: 4
    })
  })
];

var res10;
var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 45]),
    zoom: 2
  }),
  layers: [new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
      format: new ol.format.MVT(),
      url: 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf',
    }),
    style: function(feature, resolution) {
      var type = feature.get('layer');
      var marine = (resolution < res10);
      if ((type == 'Coastline' && !marine) ||
          (type == 'Marine area' && marine) ||
          type.indexOf('City') == 0 ||
          (type.indexOf('Water area') == 0 && feature.getGeometry().getType() != 'Point')) {
        styles[0].getText().setText(feature.get('_name_' + language.value));
        return styles;
      }
    },
    declutter : true
  })]
});
res10 = map.getView().getResolutionForZoom(7);

language.onchange = function() {
  map.getLayers().item(0).getSource().refresh();
};

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 90%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<div id="map" class="map"></div>
  <select id="language">
    <option value="en">English</option>
    <option value="ar">Arabic</option>
    <option value="zh_h">Chinese (Hong Kong)</option>
    <option value="zh_s">Chinese (Modern)</option>
    <option value="zh_t">Chinese (Taiwan)</option>
    <option value="cs">Czech</option>
    <option value="fi">Finnish</option>
    <option value="fr">French</option>
    <option value="de">German</option>
    <option value="he">Hebrew</option>
    <option value="it">Italian</option>
    <option value="ja">Japanese</option>
    <option value="ko">Korean</option>
    <option value="pl">Polish</option>
    <option value="pt_b">Portugese (Brazil)</option>
    <option value="ru">Russian</option>
    <option value="es">Spanish</option>
    <option value="sv">Swedish</option>
    <option value="tr">Turkish</option>
  </select>

​