openlayer学习（一）

hengxin2014

已于 2022-03-07 15:16:57 修改

阅读量1k

点赞数

分类专栏： openlayer 文章标签：其他前端

于 2022-03-07 11:38:45 首次发布

本文链接：https://blog.csdn.net/hengxin2014/article/details/123324631

版权

openlayer 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

openlayer学习（一）

一、前言
二、官网
三、初探

一、前言

因为工作需要，今天开始学习openlayer。
GIS专业毕业。刚开始工作的时候是做java后端，顺便基于skyline和cesium做一些。然后做了一些开发项目与测绘项目管理工作，顺便做了一点前端与原型Axure。后面又接触了一点ue4和三维倾斜数据的处理。总结下来，接触面虽然广，但是没有纵深。趁着现在工作需要，主要以二三维地图为主，深入学习一下openlayer与cesium。因为学生期间用的是c#，工作刚开始用的是java，spring那一套，刚接触前端的时候看那些代码感觉很乱，很多形式都看不懂，所以还要穿插着了解前端一些开发框架的写法。

二、官网

截至目前为止，官网的最新版本是v6.13.0。（写到这里又想到，其实api这东西更迭换代可能相对比较频繁，所以开发最终的归宿是学习思维而不是api，扯远了。。。—。—）。官网链接：https://openlayers.org/ 。从网站的第一句可以得到定位：一个高性能、功能丰富的库，可以满足你所有的地图需求。可以支持瓦片、矢量、地图注记。特点是快速，可拓展。嗯。。。看着很安心。。。

三、初探

怎么下载包和在前端引入就不赘述了，直接测试官网的Quick Start实例。关键行照着一行一行敲。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.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.13.0/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <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>

展示效果：如图在这里插入图片描述
可以看出来核心组件为ol.map。。。。

hengxin2014

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
openlayer学习（一）

openlayer学习（一）一、前言二、官网三、初探一、前言因为工作需要，今天开始学习openlayer。GIS专业毕业。刚开始工作的时候是做java后端，顺便基于skyline和cesium做一些。然后做了一些开发项目与测绘项目管理工作，顺便做了一点前端与原型Axure。后面又接触了一点ue4和三维倾斜数据的处理。总结下来，接触面虽然广，但是没有纵深。趁着现在工作需要，主要以二三维地图为主，深入学习一下openlayer与cesium。因为学生期间用的是c#，工作刚开始用的是java，spring那
复制链接

扫一扫