【WebGIS初学到入职】（三）从Web地图实例出发

ReBeX

已于 2022-03-27 21:06:28 修改

阅读量2.2k

点赞数 5

分类专栏：【WebGIS初学到入职】文章标签： web gis

于 2021-09-26 16:27:21 首次发布

本文链接：https://blog.csdn.net/ReBeX/article/details/120488062

版权

【WebGIS初学到入职】专栏收录该内容

21 篇文章 82 订阅

订阅专栏

一、前言

这里，我们直接从一个项目开始。边做边学边补充自己的技术栈。而今天，我们利用OpenLayers来完成一张地图的展示。
首先，你需要：

掌握HTML
熟悉CSS
了解JavaScript
有GIS基础

二、开始

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>加载OSM地图</title>
    <link href="https://openlayers.org/en/v6.5.0/css/ol.css" rel="stylesheet" type="text/css">
    <script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script>
    <style type="text/css">
        #mapContainer {
            width: 100%;
            height: 95%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="mapContainer"></div>
    <script type="text/javascript">
        //实例化Map对象加载地图
        var map1 = new ol.Map({
            //地图容器div的ID
            target: 'mapContainer',
            //地图容器中加载的图层
            layers: [
                //加载瓦片图层数据
                new ol.layer.Tile({
                    //图层对应数据源，此为加载OpenStreetMap在线瓦片服务数据
                    source: new ol.source.OSM()
                })
            ],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: [0, 0],
                //地图初始显示级别
                zoom: 2
            })
        });
    </script>
</body>
</html>

1. 结构

OpenLayers的核心是Map、 Layer、 Source、View这四个大类，几乎所有的操作都是围绕这他们进行的。

（Map）可以看作是一个地图容器，我们在这个容器中加载我们想要的地图图层（Layer）；
而这些图层都有着自己的来源（Source），可以是高德、百度、必应等提供的地图数据，也可以是你自己的json文件等等；
当我们加载好了数据之后，再设置它们如何展现在我们眼前（View），即地图的视图：初始的中心点在哪，是要先对焦到全国还是直接看到某一个城市。
当然，我们也可以设置与地图的交互功能（Interactions），也可以启用或者关闭像比例尺，缩放等地图功能（Controls）……

2. 地图数据源

明确一张地图展示了什么内容是尤为重要的。
在这次的例子中，我们调用了OpenStreetMap的在线瓦片服务数据，展示了一张与我们寻常见到的高德地图、百度地图不一样，有着自己独特样式的地图。
在这里插入图片描述
注意了，在这里就会涉及到几个在面试时HR可能会问到的问题：

OSM（你所用的地图源）服务是什么格式的类型？
OpenLyaers是怎么加载这些地图的？
使用了什么坐标系？

这里是一次我的面试经历

三、最后

上面提到的3个问题，我现在还没有整理出一个比较好的答案，那次面试我也是有点被hr问懵了因为自己确实学WebGIS的时间太短，很多东西都没了解到。
后续整理好了再回来更新吧。

对了，我上面的图片和代码来源都是**《WebGIS之OpenLayers全面解析第2版》**这本书，强烈推荐大家买一本或者去图书馆借一本来看一看。
在这里插入图片描述
大家也可以去下载这本书里实例的代码来辅助学习。

ReBeX

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
7
评论
【WebGIS初学到入职】（三）从Web地图实例出发

一、前言这里，我们直接从一个项目开始。边做边学边补充自己的技术栈。而今天，我们利用OpenLayers来完成一张地图的展示。首先，你需要：掌握HTML熟悉CSS了解JavaScript有GIS基础二、开始<!DOCTYPE html><html><head> <title>加载OSM地图</title> <link href="https://openlayers.org/en/v6.5.0/css/
复制链接

扫一扫

专栏目录