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

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

javascript html css openlayers

Javascript OpenLayers：从服务器获取地图、视图、TileLayer和OSM,javascript,html,css,thymeleaf,openlayers,Javascript,Html,Css,Thymeleaf,Openlayers,我刚刚使用OpenLayers（一个开源JavaScript库，用于在web浏览器中将地图数据显示为拖拉地图）。我将它与Thymeleaf（一个可以在web和非web环境中工作的Java XML/XHTML/HTML5模板引擎）一起使用我试图重现这个示例，但是从服务器获取资源我有这一页： <!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <t

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

我试图重现这个示例，但是从服务器获取资源

我有这一页：

<!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>

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

const Map=window.ol.Map；
常量视图=window.ol.View；
const TileLayer=window.ol.layer.Tile；
const OSM=window.ol.source.OSM；
var映射=新映射({
图层：[
新瓦工({
资料来源：新OSM（）
})
],
目标：“地图”，
视图：新视图({
投影：‘EPSG:4326’，
中间：[0,0]，
缩放：2
})
});

.地图{
宽度：100%；
高度：400px；
}
位置信息
当您呼叫时
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>

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>


使用带有OpenLayers的地块
#地图{
宽度：400px；
高度：250px；
}

在这种情况下，OpenLayer的文件安装在您的项目中的node_模块内，您不再依赖到CDN
的外部网络流量
就这样：）
您可以按照此处的完整指南进行操作（其中解释了如何捆绑和运行程序）：
确切的问题是什么？如果我把你的代码作为一个简单的HTML开始，它就可以正常工作。我能想象的唯一一件事是，您想要导入的模块的路径是错误的。顺便说一句，css
对于一个包含js的文件夹来说是一个非常糟糕的名字。也许你不知道如何向Thymeleaf添加静态资源？那么也许这会有帮助：@Nuñito de la Calzada这有什么好运气吗？
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
  })
});

<!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>