OpenLayers的使用---- 一个完全免费开源的地图JS库
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了OpenLayers的使用---- 一个完全免费开源的地图JS库相关的知识，希望对你有一定的参考价值。
OpenLayers很容易的在网站里放置动态地图。它能显示展开图及从资源中加载地图标记及矢量数据。它被开发出尽可能的使用所有的地图信息。并且它是完全免费及开源的.详细了解可去它的官网：http://openlayers.org/
简单使用，如展示一个块地图
<!doctype html>
<html lang="en">
<head>
<!--引入openlayers的css-->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
<style>
.mymap {
height: 400px;
width: 100%;
}
</style>
<!--
如果在老的android平台及早期IE还需要在openlayers之前引入下面的js来兼容
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
-->
<!--引入openlayers的js-->
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
</head>
<body>
<div id="mymap" class="mymap"></div>
<script type="text/javascript">
/*
创建openlayers中的一个map对象。并传递一个json对象来配置地图的一些参数。
target中的值是document中块标签的id，用于显示地图的容器指定。
layers：地图图层的配置，这里指定一个简单的块状地图图层。
view：用于指地图显示的中心位置及缩放比例还旋转
*/
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([xxx, xxx]),
zoom: 4
})
});
</script>
</body>
</html>以上是关于OpenLayers的使用---- 一个完全免费开源的地图JS库的主要内容，如果未能解决你的问题，请参考以下文章