「调研」1. 快速入门 OpenLayers

参与一个面试的时候，面试官让我做一个需求，是使用 openLayers 在高德地图上画历史路况。

回答：

创建一个容器
首先调用map组件生成地图，添加中心坐标、地图投影坐标系、缩放等级……基础属性
创建一个高德地图图层。
创建一个高德路况图层。

一、OpenLayers 定义与选型

1. 定义

OpenLayers 是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求。

2. 选型

现在看，OpenLayers 和 Leaflet 是前端地图开源库的唯二选择，两个都是将切片或者空间数据在浏览器中可视化，并提供与之交互的能力。

Leaflet

是领先的开源 JavaScript 库，用于移动端友好的交互式地图。它只有42 KB 的 JS 大小，拥有大多数开发人员需要的所有映射功能。

她的设计考虑了简单性、性能、可用性，可以在所有主要的桌面和移动平台上搞笑运行，可以使用大量插件进行扩展，具有美观、易于使用且文档齐全的 API 以及简单易读的源代码，值得为之做出贡献。

OpenLayers

使在任何网页中放置动态地图变得容易。它可以显示从任何来源加载的地图图块、矢量数据和标记。OpenLayers 的开发旨在进一步使用各种地理信息。

区别：

轻量从这个角度看 LeafLet 更加轻量，大小只有37KB比起 OpenLayers 来说小了不少，可以用插件做扩展。

OpenLayers 的独立性更强，它被视为是具有少量依赖项的成熟应用，可以在需要时作为 GPS系统单独工作，而 Leftlet不能期望有这种独立性，因为插件不互相支持。

OpenLayers 有更多更加复杂的低级 API自定义行更强；而Leaflet 使用了高级API，使用户编写的代码更少。

对于跨端这一点，Leaflet在设置时就考虑时移动端的兼容，而OpenLayers则差一点。

在大Json文件传递传递下 OpenLayers更快，少量Json文件传递下Leaflet更快。

总体来说 Leaflet 更加轻量，OpenLayers 更大而全，如果 Leaftlet需要，可以用插件来满足要求。如果从跨端这个角度来看，Leaflet更胜一筹。OpenLayers更适合处理大型应用，Leaflet更适合处理小型应用。

二、Demo

1. 创建一个基础的地图

下载OpenLayers - Get the Code

下载成功后把包放入项目中

创建一个 dom

<div id="map"></div> // 这是地图的容器

渲染地图

Map 是地图容器，作为核心部分可以加载各类地图与功能控件，用于渲染、表现动态地图

VIew 地图视角，控制地图缩放等基本交互，设置地图投影坐标系等

layer 图层, 对于在特定分辨率、缩放级别的网格中提供预渲染的平铺图像的图层。

 var map = new ol.Map({ 
    view: new ol.View({
        center: [113.095939, 22.548943], // 中心坐标
        projection: 'EPSG:4326', // 地图投影坐标系
        zoom: 14 // 缩放登记
    }),
    target: 'map' // dom 的缩放等级
});
        
 var gaodeMapLayer = new ol.layer.Tile({ // 图层
    source: new ol.source.XYZ({ // 提供图层源 
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    })
});
map.addLayer(gaodeMapLayer);

这样一个地图就出现了。

2. 加载历史路况

/**
* 获取时间戳
* @return {number}
*/
function getTime(data) {
    let year = data.getFullYear();
    let month = data.getMonth() + 1;
    let today = data.getDate();
    let hours = data.getHours();
    let minutes = data.getMinutes();
    let seconds = data.getSeconds();
    let currentDate = year + "-" + month + "-" + today + " " + hours + ":" + minutes + ":" + seconds;
    return new Date(currentDate.replace(new RegExp("-", "gm"), "/")).getTime();
}
 /**
 * 加载路况图层
 */
let condition = new ol.layer.Tile();
condition.setSource(new ol.source.XYZ({
    url: 'http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x={x}&y={y}&z={z}&&t=' + getTime(new Date())
}));

map.addLayer(condition);

代码

<!DOCTYPE html>
<html>

<head>
    <title>Draw Shapes</title>
    <link rel="stylesheet" href="./build/ol.css" type="text/css">
    <style>
        #map {
            height: 100%;
            width: 100%;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="./build/ol.js"></script>
    <script>
        /**
   * 获取时间戳
   * @return {number}
   */
        function getTime(data) {
            let year = data.getFullYear();
            let month = data.getMonth() + 1;
            let today = data.getDate();
            let hours = data.getHours();
            let minutes = data.getMinutes();
            let seconds = data.getSeconds();
            let currentDate = year + "-" + month + "-" + today + " " + hours + ":" + minutes + ":" + seconds;
            return new Date(currentDate.replace(new RegExp("-", "gm"), "/")).getTime();
        }


        var map = new ol.Map({
            view: new ol.View({
                center: [113.095939, 22.548943],
                projection: 'EPSG:4326',
                zoom: 14
            }),
            target: 'map'
        });

        var gaodeMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
            })
        });
        map.addLayer(gaodeMapLayer);
        /**
         * 加载路况图层
         */
        let condition = new ol.layer.Tile();
        condition.setSource(new ol.source.XYZ({
            url: 'http://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&;t=1&x={x}&y={y}&z={z}&&t=' + getTime(new Date())
        }));

        map.addLayer(condition);

    </script>
</body>

</html>