Openlayers 为什么示例不';不行?(与进口的斗争)
在页面上,我将地图下的HTML代码复制到Openlayers 为什么示例不';不行?(与进口的斗争),openlayers,Openlayers,在页面上,我将地图下的HTML代码复制到/tmp/a.HTML并运行firefox/tmp/a.HTML 起初,两个问题似乎很容易解决: SyntaxError:导入声明只能出现在模块的顶层 未声明HTML文档的字符编码。文件 要解决此问题,请执行以下操作: 将替换为 将添加到 但是如何处理第三个错误呢 TypeError:错误解析模块说明符:ol/Map.js 我有火狐60.0.1 那么,示例中的HTML代码是要像我一样使用,还是我误解了什么 从ol/Map.js导入地图时,我需要在代码中输入
/tmp/a.HTML
并运行firefox/tmp/a.HTML
起初,两个问题似乎很容易解决:
替换为
添加到
TypeError:错误解析模块说明符:ol/Map.js
我有火狐60.0.1
那么,示例中的HTML代码是要像我一样使用,还是我误解了什么
从ol/Map.js导入地图时,我需要在代码中输入什么
(我试图重新表述这个问题,但如果我仍然应该获得负面排名,请解释原因。谢谢)这是因为最新版本的OpenLayers(V5.0)带来了一些变化。 现在的示例是基于ES6模块的,而以前有另一种方法 你可以和 使用
是不够的,因为在从ol/Map.js导入映射时,它不能解决依赖关系
至少有三种方法:
导入
我知道重构示例代码的工作正在进行中,我还为codesandbox.io提交了一些建议,例如,也有同样的问题。openlayers是杰出的,v5示例不是:( e、 g 我的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';
// ...
//将导入转换为var
var Map=ol.Map;//~从“ol/Map.js”导入映射;
var View=ol.View;//~从“ol/View.js”导入视图;
var{easeIn,easeOut}=ol.easing;/~从'ol/easing.js'导入{easeIn,easeOut};
var TileLayer=ol.layer.Tile;/~从“ol/layer/Tile.js”导入TileLayer;
var{fromlont}=ol.proj;/~import{fromlont}来自'ol/proj.js';
var OSM=ol.source.OSM;//~从“ol/source/OSM.js”导入OSM;
// ...
过程:在示例页面上使用“复制”,将“粘贴”到新的html文件中。如上所述进行修改。在firefox中运行。根据lou的回答,我刚刚对以下问题进行了修复: 该示例不起作用,因为您可能只是从页面复制过去的数据,而不是查看“文档”菜单项 https://openlayers.org/en/latest/doc/tutorials/bundle.html 因此,一步一步: 1.npm init(这里您将index.js设置为入口点) 2.npm安装ol(它将OpenLayer添加到您的应用程序中) 3.npm安装--保存开发包捆绑程序 4.npmstart(它在localhost:1234上运行一个web服务器,您将看到您的示例运行良好 如果需要,那么 5.npm build(它创建/dist文件夹,您需要将其复制到web服务器,其中将转换为js文件。
我在尝试帮助您时遇到了相同的错误,自更新后,此页面可能不会更改,通常示例与copy Paste配合得很好。我也尝试在浏览器中直接使用ol es6模块。我只有一个部分答案。要
从ol/Map.js导入映射,请使用指向ol模块的相对或完全限定路径。例如从“./node_modules/ol/Map.js”导入地图;
之后,我不得不编辑几个ol模式,并提供到node_modules/rbush/rbush.js的相对路径。不幸的是,我在导入rbush时仍然会遇到错误。非常感谢,有关导入{Tile as TileLayer,Vector as VectorLayer}等更多情况,请参见从'ol/layer.js'和如何转换它们(也许有更好的方法,在那里即兴制作)vectorLayer-你是如何创建(新)这个对象的?var vectorLayer=newVectorLayer({source:newVectorSource({features:[routeFeature,Geomemarker,startMarker,endMarker]}),style:function(feature){/*hide geomerker if animation处于活动状态*/if(animating&&feature.get('type')=='geomerker'){return null;}返回样式[feature.get('type')];});非常感谢,伙计:)你救了我一天。小心“新地图”我曾在那里使用过,但在最新的浏览器中,内置Map()对象似乎不起作用。您需要改为使用Map=new ol.Map,并在开始时删除var Map=ol.Map(将更新示例)再次感谢您对map对象的提示。我有一个类似的问题,我有一个基于OpenLayers4的程序,其中一个类扩展了ol.Tile。对于OpenLayers6,ol.Tile在ol对象中不存在。有什么建议吗?
<head>
<meta charset="UTF-8">
<title>Marker Animation</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<label for="speed">
speed:
<input id="speed" type="range" min="10" max="999" step="10" value="60">
</label>
<button id="start-animation">Start Animation</button>
<script>
var Feature = ol.Feature; //import Feature from 'ol/Feature.js';
//var Map = ol.Map; //import Map from 'ol/Map.js'; //commented-out, use ol.Map in code instead of Map, internal JS Map object causes conflicts in newer browsers
var View = ol.View; //import View from 'ol/View.js';
var Polyline = ol.format.Polyline; //import Polyline from 'ol/format/Polyline.js';
var Point = ol.geom.Point; //import Point from 'ol/geom/Point.js';
var {Tile, Vector} = ol.layer; //import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
var TileLayer = Tile;
var VectorLayer = Vector;
//var BingMaps = ol.source.BingMaps; //import BingMaps from 'ol/source/BingMaps.js';
var VectorSource = ol.source.Vector; //import VectorSource from 'ol/source/Vector.js';
var {Circle, Fill, Icon, Stroke, Style} = ol.style; //import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style.js';
var CircleStyle = Circle;
// This long string is placed here due to jsFiddle limitations.
// It is usually loaded with AJAX.
var polyline = [ ...
var map = new ol.Map({ //don't do new Map(...) here, uses some internal JS Map object in newer browsers
target: document.getElementById('map'),
loadTilesWhileAnimating: true,
view: new View({
center: center,
zoom: 10,
minZoom: 2,
maxZoom: 19
}),
layers: [
new TileLayer({
source:
//new ol.source.OSM()
new ol.source.XYZ({
attributions: ['Powered by Esri',
'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
attributionsCollapsible: false,
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
maxZoom: 23
})
/*
new BingMaps({
imagerySet: 'AerialWithLabels',
key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
})
*/
}),
vectorLayer
]
});
The example doesn't work because of you maybe just copy past data from page and not look to DOC menu item
https://openlayers.org/en/latest/doc/tutorials/bundle.html
So step by step:
1. npm init (here u set your index.js as an entry point)
2. npm install ol (it adds OpenLayer to your application)
3. npm install --save-dev parcel-bundler
4. npm start (it run a web server on localhost:1234 and you will see your example working fine
If needed, then
5. npm build (it create /dist folder which you needed a copy to your web server, inside it will be converted js file.