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 error，但是到目前为止我能提出的最有希望的。我非常困住。

我非常感谢潜在客户，例如示例或最新博客条目的链接。预先感谢！

AMartinNo1

Answer 1

非常感谢您为这一事业所做的努力，但是我担心您对“翻译”有一些误解。

首先，我想您要设置地图中标签的语言，对吗（例如“德国”，“柏林”，“莱茵”等）？在这种情况下，您需要选择一个合适的WMS，OSM具有'German Style'，它不仅具有全球所有德语标签，而且样式均基于德国Shell Atlas。如果您只需要德国的地图数据，那么德国人WebAtlas是许多人的首选。

第二（仅用于未来或其他阅读此书的人），地理中的“翻译”并不意味着“翻译语言”，而是指“在不改变形状的情况下移动某些东西”（ verschieben 德语），这也是它在OpenLayers库中处于 interaction 的原因。

Answer 2

要使地图完全国际化，您可能需要使用矢量源，至少对于标签而言。该示例不需要API密钥，但是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>

翻译OpenLayers地图，例如英语到德语

2 个答案: