基于 OpenLayers 构建自定义库

Question

我正在尝试使用 OpenLayers 构建我的个人 gis 库；这是我第一次这样做。

通常我使用以下代码构建一个简单的地图：

var map = new ol.Map({
  target: 'map'
});

var view = new ol.View({
  center: ol.proj.fromLonLat([37.41, 8.82]),
  zoom: 4
});
map.setView(view);

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});
map.addLayer(osm);

现在我已经创建了一个名为 gislibraries.js 的静态文件，在这里我初始化了我的地图：

function MapInizialized(mapTarget) {
  const map = new ol.Map({
    target: mapTarget
  });

  return map;
};

function MapSetView(longitude, latitude, zoomLevel) {
  const view = new ol.View({
    center: ol.proj.fromLonLat([longitude, latitude]),
    zoom: zoomLevel
  });
  map.setView(view);

  return view;
};

function MapTile() {
  const osm = new ol.layer.Tile({
    source: new ol.source.OSM()
  });
  map.addLayer(osm);

  return osm;
};

使用下面的代码 index.html 我可以看到我的地图。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Base Map | GeoDjango</title>
    
    <link rel="stylesheet" href="/static/css/map.css">
    <script src="/static/js/mapscripts.js" type="text/javascript"></script>

<!-- OpenLayers 6 -->
    <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"
      type="text/css">

    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>

  </head>
  <body>
    
   <div id="map" class="map"></div>

   <script type="text/javascript">

   var map = new MapInizialized('map');
   MapSetView(0.0, 0.0, 2);
   MapTile();

   </script>

  </body>
</html>

当我使用时：

MapInizialized('map');
MapSetView(0.0, 0.0, 2);
MapTile();

我的地图不工作，我可以看到这个错误：

Uncaught TypeError: map.setView is not a function MapSetView http://127.0.0.1:8000/static/js/mapscripts.js:17 http://127.0.0.1:8000/:51

为什么我不能调用 MapInizialized('map');？

Answer 1

要使 map 对所有函数可用，必须在函数外声明它

let map;

function MapInizialized(mapTarget) {
  map = new ol.Map({
    target: mapTarget
  });

  return map;
};

基于 OpenLayers 构建自定义库

Build custom library based on OpenLayers

javascript

openlayers