基于 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();

我的地图不起作用，我可以看到以下错误：

未捕获的类型错误：map.setView 不是函数 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 构建自定义库

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-10-19 10:19:05

基于 OpenLayers 构建自定义库

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-10-19 10:19:05

解决方案1
1 已采纳 2020-10-19 10:19:05