OpenLayers 3 之加载地图

最新推荐文章于 2024-07-28 10:40:51 发布

qingyafan

最新推荐文章于 2024-07-28 10:40:51 发布

阅读量8.5k

点赞数 11

分类专栏： WebGIS OpenLayers OpenLayers 文章标签： OpenLayers WebGIS map

本文链接：https://blog.csdn.net/qingyafan/article/details/44225643

版权

本文介绍了如何使用OpenLayers框架在浏览器中加载动态、可交互的地图。通过一个实例展示了创建Map对象的基本步骤，包括引用OpenLayers库、实例化Map对象以及设置图层、视图和容器。地图加载后，支持缩放和平移操作。

摘要由CSDN通过智能技术生成

摘要

在浏览器中加载一幅地图，而且是可交互（包含缩放、平移、查询和分析等高级功能）的，该怎么做呢？我们当然知道要想网页中的内容是动态的，可交互的，要使用JavaScript，地图应用也不例外，不过要从底层开发的话，要费老鼻子的劲儿了！OpenLayers便是一个减轻你的工作量的框架，利用它可以轻松地加载一幅动态可交互的地图到浏览器中！

下面便是一个利用OpenLayers加载地图的小例子，我们先看看运行结果，并分析一下原理，捋一捋源码！

正文

例程如下：

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.3.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript"></script>