开发者问题收集

OpenLayers：从服务器获取地图、视图、TileLayer 和 OSM

2020-06-07
1277
javascript html css thymeleaf openlayers

我是 OpenLayers（一个开源 JavaScript 库，用于在 Web 浏览器中将地图数据显示为滑动地图）的新手。我将其与 Thymeleaf（一个 Java XML/XHTML/HTML5 模板引擎，可以在 Web 和非 Web 环境中工作）一起使用。

我试图重现此示例，但从服务器获取资源 https://openlayers.org/en/latest/examples/reprojection-wgs84.html

我有这个页面： 

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">

    <style>
        .map {
            width: 100%;
            height:400px;
        }
    </style>
</head>
<body>

<div id="layout">


    <div id="main">

        <div class="content">
            <div class="pure-g">

                <div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">

                    <!-- Content right Wrap -->
                    <div class="content_r_wrap">

                        <!-- Devices Map Module -->
                        <div class="windowHead">
                            <h2>LOCATION INFO</h2>
                        </div>
                        <div class="windowContentMap">
                            <div id="map" class="map"></div>
                                <script th:inline="javascript" th:type="module">
                                  /*<![CDATA[*/
                                  import Map from '/css/Map';
                                  import View from '/css/View';
                                  import TileLayer from '/css/layer/Tile';
                                  import OSM from '/css/source/OSM';

                                  var map = new Map({
                                    layers: [
                                      new TileLayer({
                                        source: new OSM()
                                      })
                                    ],
                                    target: 'map',
                                    view: new View({
                                      projection: 'EPSG:4326',
                                      center: [0, 0],
                                      zoom: 2
                                    })
                                  });
                                  /*]]>*/
                                </script>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

我想知道如何从服务器获取这些对象： 

  import Map from '/css/Map';
  import View from '/css/View';
  import TileLayer from '/css/layer/Tile';
  import OSM from '/css/source/OSM';
2个回答

不确定是什么意思，但如果“从服务器获取”意味着直接从编译源（无论是在您的服务器上还是其他地方）访问导入，那么这样做的方法如下： 

const Map = window.ol.Map;
const View = window.ol.View;
const TileLayer = window.ol.layer.Tile;
const OSM = window.ol.source.OSM;

var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: 'map',
  view: new View({
    projection: 'EPSG:4326',
    center: [0, 0],
    zoom: 2
  })
});
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>


       <style>
         .map {
           width: 100%;
           height: 400px;
         }

       </style>


       <div id="layout">


         <div id="main">

           <div class="content">
             <div class="pure-g">

               <div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">

                 <!-- Content right Wrap -->
                 <div class="content_r_wrap">

                   <!-- Devices Map Module -->
                   <div class="windowHead">
                     <h2>LOCATION INFO</h2>
                   </div>
                   <div class="windowContentMap">
                     <div id="map" class="map"></div>
                   </div>
                 </div>

               </div>

             </div>
           </div>
         </div>
       </div>
Joe - Check out my books
2020-06-09

当您调用 

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

时，您实际上是从 CDN （我猜，就是您所说的“服务器”）获取构建的文件。 因此，在该文件中，您可以访问模块 Map、View、TileLayer、OSM 等... 所有这些都是从 CDN 导入脚本的结果。

如果您想从本地项目（可以“离线”）加载这些文件，则可以使用包管理器（如 NPM ）安装它们，或者只下载捆绑（构建）的文件（ css 和 js ），将它们保存在您可以访问的目录中，然后将源更改为该目录。

我的建议（也是 OpenLayer 的建议）是使用 npm ，然后定期使用它（导入 ol ):

index.js 

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

index.html 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

在这种情况下，OpenLayer 的文件已安装在您项目的 node_modules 内，并且您不再依赖于到 CDN 的外部网络流量。

就是这样 :)

您可以在此处遵循完整的指南（他们在那里解释了如何捆绑和运行程序）：

使用 NPM 的 OpenLayers

SomoKRoceS
2020-06-09