安装
npm安装:
npm i ol
<style>.map-x {width: 600px;height: 600px;}
</style><div id="map" class="map-x"></div><script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'new Map({target: 'map', // 绑定html元素layers: [ // 图层new Tile({source: new OSM() // 图层数据源})],view: new View({ // 地图视图projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857center: [114.064839, 22.548857], // 深圳坐标zoom: 12 // 地图缩放级别（打开页面时默认级别）})
})
</script>
cdn引入:
<link href="https://cdn.bootcdn.net/ajax/libs/openlayers/7.3.0/ol.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/7.3.0/dist/ol.js"></script>
<style>
/* 设置地图容器宽高 */
#map {width: 100vw;height: 100vh;
}
</style><!-- 地图容器 -->
<div id="map"></div><script>var gaodeMapLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' // 高德地图瓦片服务URL})
});const map = new ol.Map({target: 'map', // 绑定地图容器layers: [ // 底图图层gaodeMapLayer],view: new ol.View({ // 设置视图projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857center: [114.064839, 22.548857], // 深圳坐标zoom: 12 // 地图缩放级别（打开页面时默认级别）})})
</script>
基本流程
在页面创建地图:
- 引入
ol.js和ol.css。 - 创建地图容器（一个
HTML标签，通常使用div）。 - 设置地图容器宽高（必须做的一项！！！）。
- 使用
ol绑定地图容器。 - 创建地图底图。
- 设置地图中心点。
ol.Map() 中有3个核心要素：
target：绑定地图容器的属性，传入容器的id即可。layers：底图图层。ol支持多图层配置，所以layers的值是一个数组。view：地图视图。可以配置地图的缩放、投影坐标系、中心点、旋转角度等配置项。
视图(ol.View)常用配置
- 投影坐标系
- 视图中心点
- 缩放级别
- 最大/最小缩放级别
minZoom: 10, // 设置最小缩放级别
maxZoom: 14, // 设置最大缩放级别 - 旋转地图
rotation: Math.PI / 180 * 45, // 旋转地图45度
图层(layers)模块
加载地图数据
- OSM内置底图
layers: [ // 图层new ol.layer.Tile({source: new OSM() // 图层数据源})]
- 高德底图
var gaodeMapLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' // 高德地图瓦片服务URL})});layers: [ // 底图图层gaodeMapLayer]
显示/隐藏图层
layers: [new ol.layer.Tile({source: new ol.source.OSM(),visible: false // 隐藏图层})
]
使用 getVisible() 获取图层当前的 visible 状态，使用 setVisible 设置图层的 visible。
// 显示或隐藏图层
function toggleLayer() {let layers = map.getLayers() // 获取图层组let layer = layers.item(0) // 因为只有一个图层，所以直接 item(0) 即可拿到let visible = layer.getVisible() // 获取图层当前显示状态layer.setVisible(!visible) // 设置图层显示状态
}
图层不透明度
layers: [new ol.layer.Tile({source: new ol.source.OSM(),opacity: 0.5 // 设置图层不透明度})]
使用 getOpacity() 方法获取图层的不透明度，使用 setOpacity() 设置图层不透明度。
<style>#map {width: 400px;height: 400px;}
</style><label for="checkboxEl">不透明度</label>
<!-- 滑块控件，用来设置图层不透明度的值 -->
<inputid="rangeEl"type="range"checked="true"min="0"max="1"step="0.01"value="0.5"
/><div id="opacityValue">不透明度: 0.5</div><div id="map"></div><script src="../ol/ol.js"></script>
<script>const map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM(),opacity: 0.5 // 设置图层不透明度})],view: new ol.View({center: [0, 0],zoom: 2})})let rangeEl = document.getElementById('rangeEl')rangeEl.addEventListener('change', function() {let layers = map.getLayers() // 获取图层组let osmLayer = layers.item(0) // 因为只有一个图层，所以直接 item(0) 即可拿到osmLayer.setOpacity(parseFloat(this.value)) // 设置图层不透明度opacityValue.innerHTML = `不透明度: ${osmLayer.getOpacity()}` // 获取图层不透明度，并展示在页面中})
</script>
切换底图
使用 setSource 切换底图
<style>#map {width: 400px;height: 400px;}
</style><button onclick="switchSource('osm')">设置为OSM</button>
<button onclick="switchSource('bingmap')">设置为BingMaps</button>
<div id="map"></div><script src="../ol/ol.js"></script>
<script>let osm = new ol.source.OSM()let bingmap = new ol.source.BingMaps({key: '你的key',imagerySet: 'Aerial'})let layer = new ol.layer.Tile()let map = new ol.Map({target: 'map',layers: [layer],view: new ol.View({projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857center: [114.064839, 22.548857], // 深圳坐标zoom: 12})})// 设置图层源layer.setSource(osm)// 切换图层源function switchSource(data) {switch(data) {case 'osm':layer.setSource(osm)breakcase 'bingmap':layer.setSource(bingmap)break}}
</script>
加载矢量图
// 省略部分代码
const map = new ol.Map({target: 'map',layers: [new ol.layer.Vector({source: new ol.source.Vector({format: new ol.format.GeoJSON(),url: '../data/geojson.json'})})],view: new ol.View({center: [0, 0],zoom: 2})
})
基础控件
- 比例尺
比例尺支持的单位：[metric公制]、degrees度、imperial英制英尺、us美制英尺、nautical海里
// 实例化比例尺
const scaleLineControl = new ol.control.ScaleLine({units: 'degrees'
})const map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: [0, 0],zoom: 2}),// 添加控件controls: ol.control.defaults.defaults().extend([scaleLineControl])
})
setUnits()方法
<select id="units"><option value="degrees">度</option><option value="imperial">英制英尺</option><option value="us">美制英尺</option><option value="nautical">海里</option><option value="metric" selected>公制</option>
</select><div id="map"></div><script>// 比例尺工具const scaleLineControl = new ol.control.ScaleLine({units: 'degrees'})const map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({projection: "EPSG:4326",center: [114.064839, 22.548857],zoom: 12}),// 添加控件controls: ol.control.defaults.defaults().extend([scaleLineControl])})// 获取页面上的单位选择器const unitsSelect = document.getElementById('units')// 修改比例尺单位的方法function onChange() {scaleLineControl.setUnits(unitsSelect.value)}unitsSelect.addEventListener('change', onChange)
</script>
- 全屏
const map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: [0, 0],zoom: 2}),// 添加控件controls: ol.control.defaults.defaults().extend([new ol.control.FullScreen() // 全屏控件])
})
- 鹰眼
// 鹰眼控件
let overviewMapControl = new ol.control.OverviewMap({className: 'ol-overviewmap ol-custom-overviewmap',layers: [new ol.layer.Tile({// 使用必应地图source: new ol.source.BingMaps({key: 'AiZrfxUNMRpOOlCpcMkBPxMUSKOEzqGeJTcVKUrXBsUdQDXutUBFN3-GnMNSlso-',imagerySet: 'Aerial'})})],collapsed: false
})const map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM() // 基础地图使用 OSM})],view: new ol.View({projection: "EPSG:4326",center: [114.064839, 22.548857],zoom: 6}),// 添加控件controls: ol.control.defaults.defaults().extend([overviewMapControl])
})
- 导览
const map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: [0, 0],zoom: 2}),// 添加控件controls: ol.control.defaults.defaults().extend([new ol.control.ZoomToExtent({// 定义要展示区域的4个角的坐标extent: [813079.7791264898, 5929220.284081122,848966.9639063801, 5936863.986909639]})])
})
- 缩放滑块
const map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({projection: 'EPSG:4326',center: [114.064839, 22.548857],zoom: 2}),// 添加控件controls: ol.control.defaults.defaults().extend([// 缩放滑块控件new ol.control.ZoomSlider()])
})
