在页面https://openlayers.org/en/latest/examples/image-vector-layer.html我将HTML代码从地图下复制到/tmp/a.html并运行firefox /tmp/a.html.
最初有两个问题很容易解决:
要解决这个问题:
<script>为<script type="module"><meta charset="UTF-8">到<head></head>但是第三个错误怎么办?
TypeError: Error resolving module specifier: ol/Map.js
我有Firefox 60.0.1.
那么,示例中的HTML代码是否可以像我一样使用,或者我误解了什么?
我的代码需要import Map from ol/Map.js什么?
(我试图重新提出问题,但如果我仍然应该得到负面排名,请解释原因.谢谢)
Tho*_*ier 13
这是因为最新发布的OpenLayers(V5.0)会有一些变化.现在样本基于ES6模块,而之前有另一种方法
使用<script type="module">是不够的,因为它在执行时不解决依赖关系import Map from ol/Map.js
至少有3种方法:
使用5.0.0版创建Openlayers示例的常用方法是使用像Webpack或Parcel这样的捆绑器.有一个教程.
我还用这个样本研究了JSPM
您可以随时使用旧的方式,例如在4.6.5版中使用此其他官方教程而不使用import.
对于解决方案1,您可以使用codesandbox.io来避免设置本地parcel/webpack环境,如此推文所示.
我知道有一些关于重构样本代码的进展工作,我还提交了一些关于codesandbox.io的建议,例如https://github.com/openlayers/openlayers/issues/8324
小智 7
有同样的问题。openlayers是杰出的,v5示例不是:(
例如https://openlayers.org/en/latest/examples/animation.html
我对v5(.3.0)示例的修复:
<!-- ADD build-REFERENCE for v5(.3.0) // github.com/openlayers/openlayers/ -->
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script>
// CONVERT imports to var
var Map = ol.Map; //~ import Map from 'ol/Map.js';
var View = ol.View; //~ import View from 'ol/View.js';
var {easeIn, easeOut} = ol.easing; //~ import {easeIn, easeOut} from 'ol/easing.js';
var TileLayer = ol.layer.Tile; //~ import TileLayer from 'ol/layer/Tile.js';
var {fromLonLat} = ol.proj; //~ import {fromLonLat} from 'ol/proj.js';
var OSM = ol.source.OSM; //~ import OSM from 'ol/source/OSM.js';
// ...
Run Code Online (Sandbox Code Playgroud)
过程:在示例页面上使用“复制”,“粘贴”到新的html文件。像上面一样修改。在Firefox中运行。
| 归档时间: |
|
| 查看次数: |
9809 次 |
| 最近记录: |