OpenLayers基础知识回顾（一）

最新推荐文章于 2025-04-17 09:48:12 发布

@小张在努力

最新推荐文章于 2025-04-17 09:48:12 发布

阅读量1.4k

点赞数 20

分类专栏： Openlayers 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45751819/article/details/142871369

版权

Openlayers 专栏收录该内容

6 篇文章

订阅专栏

一、一张地图的构成

从数据表现在页面来说
点、线、面
从数据类型来说
矢量数据：放大后不会失真
栅格数据：放大后会失真，这种数据是由一个个的像素点组成的
从图层来说
一张地图由很多图层组成，图层有zIndex参数，可以用于设置图层堆叠顺序
图层：将同一类型的要素，放在一个图层上（相同要素的集合）
Map–Layer
点图层
线图层
面图层
单独标记图层

二、GIS概念

1.整体框架

1、地图的组成

在这里插入图片描述

底图（Map）：所有信息的载体
图层（Layer）：相同类型要素形成的集合
要素（Feature）：表示不同的地物
几何信息（Geometry）：信息的数据模型和抽象

2、地图容器

准备阶段创建的指定id的div对象，这个div将作为承载所有图层、点标记、矢量图形、控件的容器

3、图层（Layer）

图层是指能够在视觉上覆盖一定的地图范围，用来描述全部或者部分现实世界区域内的地图要素的抽象概念，一幅地图通常由一个或者多个图层组成

4、矢量图形

矢量图形，一般覆盖于底图图层之上，通过矢量的方式（路径或者实际大小）来描述其形状，用几何的方式来展示真实的地图要素，会随着地图缩放而发生视觉大小的变化，但是其代表的实际路径或范围不变，除了折线、圆、多边形之外，JS API还提供了矩形、椭圆等常用的矢量图形

5、点标记

点标记是用来标示某个位置点信息的一种地图要素，覆盖于图层之上，通常就是一个点要素。

6、地图控件（Map Controls）

控件浮在所有的图层和地图要素之上，用于满足一定的交互和提示功能

2.名词

1、地图级别 ZoomLevel

Web地图最小级别通常为3级

2、经纬度 LngLat

3、底图 BaseLayer

4、底图要素 Map Features

5、标注 Labels

6、地图平面像素坐标 Plane Coordinates

7、投影 Projection

三、webgis开发流程

在这里插入图片描述
webgis开发 = 地图框架 + 【GIS平台】二次开发接口
（如何使用地图框架，展示地图数据）

1、数据处理

在MapGIS客户端进行数据处理
5. 创建要素类
6. 添加各种要素，编辑要素的属性
7. 生成地图文档

2、数据发布

通过server manager将数据上传到IG Server（localhost：9999就是IG Server的可视化操作界面）

发布地图文档

3、数据显示

在web端地图框架上，通过JavaScript SDK 调用接口对接IG Server，进行地图和数据的可视化操作。

四、地图显示

要在页面上显示地图仅仅需要一个html页面，分成以下几个步骤

导入openlayers依赖
设置地图容器挂载点
初始化地图，并将地图设置到地图容器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <!-- 1.引入第三方库 -->
    <link
      rel="stylesheet"
      href="https://lib.baomitu.com/ol3/4.6.5/ol.css"
    />
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <!-- 2、设置地图的挂载点 -->
    <div id="map"></div>
    <script>
      // 3.初始化一个高德地图层
      const gaode = new ol.layer.Tile({
        title: '高德地图',
        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}',
          wrapX: false
        })
      })
      //4.初始化openlayer地图
      const map = new ol.Map({
        // 将初始化的地图设置到id为map的DOM元素上
        target: 'map',
        //设置图层
        layers: [gaode],
        view: new ol.View({
          center: [114.3, 30.5],
          //设置地图放大级别
          zoom: 12,
          projection: 'EPSG:4326'
        })
      })
      console.log(map)
    </script>
  </body>
</html>

五、坐标

EPSG:4326 和 EPSG:3857 是两个常用的坐标参考系代码，用于在 GIS 中表示地理位置。它们的主要区别如下：
● EPSG:4326 表示一个地理坐标系，使用经纬度来表示地理位置，通常用于地理位置的显示和制图。
● EPSG:3857 表示一个 Web 墨卡托坐标系，使用平面墨卡托投影来表示地理位置。
因此，两个坐标系的主要区别在于它们使用的坐标系统不同：EPSG:4326 使用的是经纬度，而 EPSG:3857 使用的是平面墨卡托投影。
EPSG:3857 在在线地图中被广泛使用，因为它能够在 Web 地图上提供更高的精度和更好的分辨率。然而，EPSG:4326 在网络上传输地理位置信息时被更多地使用，因为它使用的是标准的地理坐标系。
总的来说，选择使用哪个坐标系取决于你的应用需求：如果需要高精度和分辨率，选择 EPSG:3857；如果需要标准的地理坐标系，选择 EPSG:4326
Openlayer默认使用EPSG:3857;
ol.proj.transform([114,30],‘EPSG:4326’,‘EPSG:3857’)可以将经纬度，转化为墨卡托。