OpenLayers项目入门-实例
文章目录 总结
前言
由于工作，需要学习一下，了解了基础知识后发现网上好多所谓入门实例太坑人了，对我这样的前端小白太不友好了，所以，在测试了一个最简单的版本后，我准备自己写一个，喜欢点赞哈。
一、是什么？
使在任何网页中轻松放置动态地图成为可能。它可以显示从任何来源加载的地图图块，矢量数据和标记。的开发旨在进一步利用各种地理信息。重点在于是一个完全免费的。暂时我的理解就是处理地图数据的。
二、入门实例 1.在线版本
在浏览器中输入进入官网，然后找到快速开始，懒得截图了，链接
就这个
代码如下：
<html lang="en"><head><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css"><style>.map {height: 400px;width: 100%;}style><script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js">script><title>OpenLayers exampletitle>head><body><h2>My Maph2><div id="map" class="map">div><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: ol.proj.fromLonLat([37.41, 8.82]),zoom: 4})});script>body>
html>
直接使用复制到记事本，然后改后缀为.html，效果如下：
2.离线版本
之前那个必须在有网的情况下，下面这个是离线版本，为了方便，我是用的
新建一个项目，里面只需要新建一个index.html就好了，那个test.html是之前那个在线版本。
进入官网：
你就会得到：
解压选择：
复制到项目中：
index的代码：
<html lang="en"><head><link rel="stylesheet" href="ol.css" type="text/css"><style>.map {height: 400px;width: 100%;}style><script src="ol.js">script><title>OpenLayers exampletitle>head><body><h2>My Maph2><div id="map" class="map">div><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: ol.proj.fromLonLat([37.41, 8.82]),zoom: 4})});script>body>
html>
就是把在线引用改为离线的
总结 以上就是今天要讲的内容，为什么我要写这么简单的东西呢，主要是现在好多前辈不讲武德简单的东西复杂化，搞得人看半天还没搞出来，写此文章，纪念3小时前的我。
