OpenLayers学习笔记——加载地图

63 阅读 0 评论 42 点赞

我是靠谱客的博主单纯眼睛，最近开发中收集的这篇文章主要介绍OpenLayers学习笔记——加载地图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

OpenLayers常见的加载地图显示的方法有三种，使用不同的加载方法，会有不同的用处。

1、静态加载地图

js代码：

<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: [12950000,4860000], minzoom: 2, zoom: 6})
});
</script>

这种方法简单，不利于修改维护，交互性较差。

2、动态加载地图

js代码：

<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [],
view: new ol.View({center: [12950000,4860000], minzoom: 2, zoom: 6})
});
var tileLayer = new ol.layer.Tile({source: new ol.source.OSM()});
map.addLayer(tileLayer);
</script>

运用addLayer方法动态加载图层对象，使得地图数据加载显示更加灵活，可以很好的修改地图，如添加一些控件等。

3、调用函数加载地图

js代码：

<script type="text/javascript">
function init(){
var map = new ol.Map({
target: 'map',
layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
view: new ol.View({center: [12950000,4860000], minzoom: 2, zoom: 6})
});
}
</script>
</head>
<body οnlοad="init();">

这种方法在浏览器解析时，先加载javascript，当加载页面内容时在调用处再执行相应的javascript。因此在<body>中由onload方法调用加载地图的init函数时，实现页面加载完成后立即加载地图数据的功能。

最近在学习的OpenLayers开发，参考由郭明强，黄颖等主编的WebGIS之OpenLayers全面解析，该书入门级别较低，像我这种小白可以很快入门，但是往后学习需要很好的javascript基础，建议边学习本书，边学习javascript。至于后面的系统框架搭建，需要很多的后台知识，对于这些知识我将在以后的博客中详细介绍。