OpenLayers 官网例子的中文详解

作者：很楠不爱3 | 2024-05-22 08:33:32

踩

openlayers中文实例

https://segmentfault.com/a/1190000009679800?utm_source=tag-newest

当你希望实现某种功能的时候，即使你对 openlayers 几乎一窍不通，照着官网的例子做，也可以很快的实现想要的效果。

问题在于，官网的例子都是英文啊，不能很快定位到想要的效果是在哪个例子里面！！( 英文不渣就别看这篇文章了 )

最近在学 openlayers ，我觉得非常有必要将 openlayers 官网的所有例子都看过去一遍，这篇文章就当是笔记了。

名词解释

在 openlayer 里，下面这些单词应该这么翻译。

layer：层
contorl：控件
feature：元素
interaction：交互
Vector：矢量的
Tile：瓦片
source：资源
format：转换
projection：投影

无障碍地图

Accessible Map

当地图获得焦点之后，可以使用键盘对地图进行控制，+ 键放大地图，- 键缩小地图，tab 键切换地图中的按钮，enter 键点击地图中的按钮，↑ ↓ ← → 键移动地图...

对于小白来说，官网的例子有些东西是不必要的，比如官网例子中的 controls，最初我以为要使用键盘控制地图是不是和这个 controls 有点关联呢？其实它们一点关系都没有，地图默认就支持无障碍访问，为了更好更快的理解例子，我会在每个例子中给出最精简的代码：

<div id="map"></div> <script> //layers、target、view是地图最基本的部分，是必需的 new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); </script>

视图动画

View Animation
让地图的视图拥有动画啊效果，关键点在于 loadTilesWhileAnimating 和 view.animate。这个动画最基本的效果有三种：移动、旋转、放缩，通过这三种效果的组合，可以做出很多特效。

<div id="map"></div> <script> //地图的视图 var view = new ol.View({ center: [0, 0], zoom: 2 }); new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], loadTilesWhileAnimating: true,//将这个设置为true，默认为false target: 'map', view: view }); var london = ol.proj.fromLonLat([-0.12755, 51.507222]);//伦敦的坐标 //移动到伦敦，移动时是有动画的 view.animate({ center:london, }); </script>

使用 ArcGIS 图片服务器

Image ArcGIS MapServer
这个没弄懂，貌似官网给的这个 url：https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer用不了了????。

<div id="map"></div> <script> new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Image({ source: new ol.source.ImageArcGISRest({ ratio: 1, params: {}, url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer' }) }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); </script>

使用 ArcGIS 瓦片服务器

Tiled ArcGIS MapServer
这里使用了 ArcGIS 瓦片服务器的图源，和上面的 ArcGIS 图片服务器类似，注意对比两者的区别。

<div id="map"></div> <script> new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ', imagerySet: 'Road' }) }), new ol.layer.Tile({ source: new ol.source.TileArcGISRest({ ratio: 1, params: {}, url: 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer' }) }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); </script>

版权归属

Attributions

Attributions 的意思是「归属」，指的是右下角那个版权控件。

为了更好的理解这一个例子，下面代码展示了如何给地图添加控件：

<div id="map"></div> <script> var attribution = new ol.control.Attribution();//这是版权控件 var FullScreen = new ol.control.FullScreen();//这是全屏控件 var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], controls: [attribution,FullScreen],//如果不设置 controls ，地图会默认设置 target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); </script>

这样，我们就能在地图上显示版权和全屏按钮了，如果不设置 controls ，那么地图会默认帮我们设置，默认的效果等同于如下代码：

<div id="map"></div> <script> var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], controls: ol.control.defaults(),//这就是默认的效果 target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); </script>

接下来我们来看官网的例子：

<div id="map"></div> <script> var attribution = new ol.control.Attribution({ collapsible: false }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], //这里的意思是，使用默认的 controls ，但是把默认的「版权控件」设置为false，隐藏掉了 //然后使用 .extend 来添加一个新的「版权控件」 controls: ol.control.defaults({attribution: false}).extend([attribution]), target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); function checkSize() { var small = map.getSize()[0] < 600; attribution.setCollapsible(small); attribution.setCollapsed(small); } window.addEventListener('resize', checkSize); checkSize(); </script>

必应地图

Bing Maps
就是使用必应地图的一些API接口。这个例子展示了如何动态显示、隐藏地图的层 ( layers )，主要用到的是 setVisible方法。

<div id="map"></div> <script> var layer1 = new ol.layer.Tile({ visible: false,//非必填，默认true preload: Infinity,//非必填、Infinity表示正无穷大 source: new ol.source.BingMaps({ key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',//必填、key要自己去申请哦 imagerySet: "Road",//必填，可选值：Road、Aerial、AerialWithLabels、collinsBart、ordnanceSurvey }) }); var layer2 = new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ', imagerySet: "AerialWithLabels", }) }); new ol.Map({ layers: [layer1,layer2], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); //3秒后隐藏 layer2 显示 layer1 setTimeout(function(){ layer1.setVisible(true); layer2.setVisible(false); },3000); </script>

setVisible 主要继承于 ol.layer.Base 类，拥有这个方法的类有：


ol.layer.Base
    ol.layer.Group
    ol.layer.Layer
         ol.layer.Image
         ol.layer.Tile//我们用到的就是这个
         ol.layer.Vector
              ol.layer.Heatmap
              ol.layer.VectorTile

框选

Box Selection
按住 ctrl + 鼠标左键，拖拽，就可以框选地图上的一些元素。

这里框选属于一种交互，分别是 选择、画框 两种交互：

<div id="map"></div> <script> var map = new ol.Map({ layers: [ new ol.layer.Vector({ //这是一个能选择的地图源 source: new ol.source.Vector({ url: 'https://openlayers.org/en/v4.1.1/examples/data/geojson/countries.geojson', format: new ol.format.GeoJSON() }) }) ], interactions:[//交互 new ol.interaction.Select(),//选择 new ol.interaction.DragBox({ condition: ol.events.condition.platformModifierKeyOnly })//画框 ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); </script>