javascript - OpenLayers:从服务器获取 Map、View、TileLayer 和 OSM-6ren

javascript - OpenLayers:从服务器获取 Map、View、TileLayer 和 OSM

转载作者：行者123 更新时间：2023-12-01 14:55:25

25

4

我是使用 OpenLayers 的新手(一个开源 JavaScript 库，用于在 Web 浏览器中将 map 数据显示为滑动 map )。我将它与 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';

最佳答案

不知道是什么意思，但如果“从服务器获取”意味着直接从编译源访问导入(无论是在您的服务器上还是在其他地方)，这是如何做到的:

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>

关于javascript - OpenLayers:从服务器获取 Map、View、TileLayer 和 OSM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62244109/

25

4

0

文章推荐： Java Applet 在运行 JRE 1.7 的客户端上有奇怪的怪癖

文章推荐： c++ - LLVM:VS 2015中的链接错误

文章推荐： android - 如何为 android native 应用程序生成调试符号？

文章推荐： java - GridLayout 中的文本字段宽度不会改变

c# - 异步任务获取 VS HttpResponseMessage 获取
我需要您在以下方面提供帮助。近一个月来，我一直在阅读有关任务和异步的内容。我想尝试在一个简单的 wep api 项目中实现我新获得的知识。我有以下方法，并且它们都按预期工作: public Htt
java - 无法从 URL 获取 URI，获取 null？
我的可执行 jar 中有一个模板文件 (.xls)。不需要在运行时我需要为这个文件创建 100 多个副本(稍后将唯一地附加)。用于获取 jar 文件中的资源 (template.xls)。我正在使用
javascript - Backbone 的模型原型(prototype)获取 vs backbone 获取
我在查看网站的模型代码时对原型(prototype)有疑问。我知道这对 Javascript 中的继承很有用。在这个例子中... define([], function () { "use
javascript - 获取 scrollTop、获取 offsetHeight 和 getStyle 需要很长时间
影响我性能的前三项操作是: 获取滚动条获取偏移高度 Ext.getStyle 为了解释我的应用程序中发生了什么:我有一个网格，其中有一列在每个单元格中呈现网格。当我几乎对网格的内容做任何事情时，它运
javascript - 获取 URL 参数函数，获取 url 部分的值，或者如果存在但没有值则返回 true？
我正在使用以下函数来获取 URL 参数。 function gup(name, url) { name = name.replace(/[\[]/, '\\\[').replace(/[\]]/,
c - MacOS 使用 sysctl() 获取 HW_MACHINE_ARCH 获取 "no such file or directory"
我最近一直在使用 sysctl 来做很多事情，现在我使用 HW_MACHINE_ARCH 变量。我正在使用以下代码。请注意，当我尝试获取其他变量 HW_MACHINE 时，此代码可以完美运行。我还认为
ios - 将我的 YouTube channel 获取(获取)到我的 iOS 应用程序中
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关闭 9 年前。要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么
javascript - webpack:如何从 "bower_components"获取 JavaScript，而不是从 "node_modules"获取 JavaScript
由于使用 main-bower-files 作为使用 Gulp 的编译任务的一部分，我无法使用 node_modules 中的 webpack 来require 模块code> dir 因为我会弄乱当
Javascript - 从 "Monday"获取 "mon"或从 "Tuesday"获取 "tue"等
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
Java:无法将 Gridlayout 应用于 Jscrollpane。获取获取 java.lang.ClassCastException
我使用 Gridlayout 在一行中放置 4 个元素。首先，我有一个 JPanel，一切正常。对于行数变大并且我必须能够向下滚动的情况，我对其进行了一些更改。现在我的 JPanel 上添加了一个 J
python - 如何从 key BlockDeviceMappings 获取 VolumeId(boto3 获取 ec2 的卷信息)
由于以下原因，我想将 VolumeId 的值保存在变量中: #!/usr/bin/env python import boto3 import json import argparse import
angularjs - 未使用 acquireTokensilent 获取 token ，但使用 acquireTokenpopup Msal-browser 获取 token
我正在将 MSAL 版本 1.x 更新为 MSAL-browser 的 Angular 。所以我正在尝试从版本 1.x 迁移到 2.X.I 能够成功替换代码并且工作正常。但是我遇到了 acquireT
python - 使用 GroupBy 获取 Pandas 的平均值 - 获取 DataError : No numeric types to aggregate -
我知道有很多关于此的问题，例如 Getting daily averages with pandas和 How get monthly mean in pandas using groupby但我遇到
javascript - 无法在 mvc 获取 Controller 方法(来自 Uri())中从 QueryString 获取 DATETIME
This is the query string that I am receiving in URL. Output url: /demo/analysis/test?startDate=Sat+
ubuntu - 从 OpenLayer 3 获取 Geoserver 获取 '500 (Internal Server Error)'
我正在尝试使用 javascript 中的以下代码访问 Geoserver 层 var gkvrtWmsSource =new ol.source.ImageWMS({ u
javascript - 使用 XMLHttpRequest 获取 Ecobee API 信息。获取 500(错误 1 : "Authentication failed. Token is required.")
API 需要一个包含授权代码的 header 。这就是我到目前为止所拥有的: var fullUrl = 'https://api.ecobee.com/1/thermostat?json=\{"s
c# - 获取/删除文件的最后一个字符而不加载到内存中
如何获取文件中的最后一个字符，如果是某个字符，则删除它而不将整个文件加载到内存中？这就是我目前所拥有的。 using (var fileStream = new FileStream("file.t
JSP 获取/设置整个对象的参数
我是这个社区的新手，想出了我的第一个问题。我正在使用 JSP，我成功地创建了 JSP-Sites，它正在使用jsp:setParameter 和 jsp:getParameter 具有单个字符串。
multithreading - 获取/释放语义
在回答 StoreStore reordering happens when compiling C++ for x86 @Peter Cordes 写过 For Acquire/Release se
javascript - 获取 .on 中使用的函数的结果
我有一个函数，我们将其命名为 X1，它返回变量 Y。该函数在操作 .on("focusout", X1) 中使用。如何获取变量Y？执行.on后X1的结果？最佳答案您可以更改 Y 的范围以使其位于函

首页

博学

6Ren·AI

商城

javascript - OpenLayers:从服务器获取 Map、View、TileLayer 和 OSM