效果：

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="lib/ol.css" />

        <script type="text/javascript" src="lib/ol.js"></script>

        <style type="text/css">

            .map{width: 600px;height: 400px;}

        </style>

    </head>

    <body>

        <div id="map" class="map"></div>

    </body>

</html>

<script type="text/javascript">

    //Map 是openlayers得核心组件，要渲染地图，必须需要view(视图),layers(图层),target(容器)

    //创建地图

    var map = new ol.Map({

        //设置显示地图的视图

        view: new ol.View({

            center: [0, 0],//义地图显示中心于经度0度，纬度0度处

            zoom: 1 //定义地图显示层级为1

        }),

        //创建地图图层

        layers: [

            //创建一个使用Open Street Map地图源的瓦片图层

            new ol.layer.Tile({

                source: new ol.source.OSM()

            })

        ],

        //让id为map的div作为地图的容器

        target: 'map'

    });

</script>

【01】openLayers 第一个地图的更多相关文章

  1. OpenLayers 3 之 地图视图（View）

    OpenLayers 3 之 地图视图(View) 初始化一幅地图,必备的三要素之一视图(view),这个对象主要是控制地图与人的交互,如进行缩放,调节分辨率.地图的旋转等控制.也就是说每个 map对 ...

  2. HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

    在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web  ...

  3. HT for Web整合OpenLayers实现GIS地图应用

    HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的Ope ...

  4. 和李洪强一起学设计01 PS第一天

    和李洪强一起学设计01 PS第一天

  5. OpenLayers 3 之 地图控件（control）

    OpenLayers 3 之 地图控件(control) 地图控件(control)是指地图上比例尺,缩略图,拉近拉远的按钮,滚动控制条等控件,默认控件有三个,可以禁用. OpenLayers 3 之 ...

  6. openlayers对接百度地图新方法

    上次给大家提供的openlayers对接百度地图有些问题,是因为没有进行分辨率设置,也没有进行相应的平面坐标转换,获取getURL的方法还是没有变化的 getURL: function (bounds ...

  7. LeetCode初级算法--排序和搜索01：第一个错误的版本

    LeetCode初级算法--排序和搜索01:第一个错误的版本 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.cs ...

  8. Openlayers实现第一张地图

    <html><head><title>OpenLayers Hello World</title> <style type="text/ ...

  9. 使TileCache配合OpenLayers，产生地图瓦块的一些资料（转）

    在tilecache.cfg中配置好被切割地图的参数,比如: [mytestmap]layers=3,5,7,8type=WMSurl=http://localhost/arcgis/services ...

随机推荐

  1. K-th K

    题目描述 You are given an integer sequence x of length N. Determine if there exists an integer sequence ...

  2. Date类与SimpleDateFormat类中parse()方法和format()方法

    package ppt11util类; import java.text.ParseException; import java.text.SimpleDateFormat; import java. ...

  3. 1.redis安装配置

    Redis 1.Redis安装: 说明: 1.也是一种类似于Memcached的kev-value机制的存储服务 2.是非关系型数据库(NoSQL)的一种. 3.官网:www.redis.io,中文网 ...

  4. laravel如何输出最后一条执行的SQL

    \DB::connection()->enableQueryLog(); // 开启查询日志 \DB::table('xxx'); // 要查看的sql $queries = \DB::getQ ...

  5. python中读取mat文件

    mat数据格式是Matlab的数据存储的标准格式 在python中可以使用scipy.io中的函数loadmat()读取mat文件. import scipy.io as scio path = 'e ...

  6. python中字典以key排序，以value排序。以及通过value找key的方式

    1.sorted函数首先介绍sorted函数,sorted(iterable,key,reverse),sorted一共有iterable,key,reverse这三个参数. 其中iterable表示 ...

  7. 牛客-Highway

    题目传送门 sol:看了题意显然是最大生成树,但是任意两个点之间都有边,大概有n*n条边.用朴素的最小生成树算法显然不行.联想了一下树的直径还是不会.看了大佬的题解,懂了... 所以还是直接贴大佬博客 ...

  8. labview状态机

    状态机主要由3部分组成,包括一个while循环,一个条件结构,以及while循环的移位寄存器,其中while循环用于保证程序的持续运行,条件结构用于处理不同状态的执行,移位寄存器用于实现从一个状态跳转 ...

  9. 科研伴我成长——上海交通大学ACM班学生在微软亚洲研究院的幸福实习生活

    每一年,微软亚洲研究院都会迎来一批"特殊的"实习生--他们既不是从五湖四海汇聚而来,也不是在读的硕士和博士.他们相识已久,知道对方的小秘密.小八卦,也相互敬佩.惺惺相惜--他们就是 ...

  10. HTMLTestRunner测试报告

    把测试报告写入文件中,设置报告生成的路径 测试报告名称上添加时间 HTMLTestRunner文件如下,复制即可用,把该文件放在Lib下即可 """ A TestRunn ...