一、一张地图的构成
-
从数据表现在页面来说
点 、线、 面 -
从数据类型来说
矢量数据：放大后不会失真
栅格数据：放大后会失真，这种数据是由一个个的像素点组成的 -
从图层来说
一张地图由很多图层组成，图层有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’)可以将经纬度，转化为墨卡托。
六、openlayers的重要概念
- 一张地图有很多图层组成
- 一个图层对应一个数据源（layer-source）
- 数据源中放置了很多的要素（Feature）
- 要素由几何信息和样式信息构成
Map Layers Source Feature
七、OpenLayers架构
