Openlayer是一个开源的Web GIS引擎,使用了JavaScript、最新的HTML5技术及CSS技术,支持dom、canvas、webgl三种渲染方式。
创建一个网页版地图,需要三样东西:
1、引入库
2、需要一个div容器,将div的id绑定到map对象的target属性中(其中map对象主要有layer图层组合view组成,layer可以有多个,但是view只能有一个)
3、使用javescript创建一个简单地图
引入JavaScript库
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
使用低版本浏览器时,需引入:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
HTML框架,定义一个id为map的div来存放地图
<div id="map" class="map"></div>
样式如下:
.map {
height: 400px;
width: 100%;
}
JavaScript代码如下:
var map = new ol.Map({//创建一个map对象
target: 'map',//将map对象映射到div中,此处的"map"想对应于div的id值
layers: [//layer数组中存放地图中的可用图层的列表
new ol.layer.Tile({//ol.layer.Tile 瓦片层,ol.layer.Image 图片层,ol.layer.Vector 矢量图层,创建不同数据源的图层
source: new ol.source.OSM()//source为获得相应图层(地图瓦片)的协议
})
],
view: new ol.View({//创建视图
center: ol.proj.fromLonLat([37.41, 8.82]),//创建中心点
zoom: 4//创建缩放等级
})
});
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>