webGIS
什么是？
将前端可视化技术与GIS技术结合,提供更好的信息展示和用户交互
GIS云平台
webGlS和云计算,分布式架构结合
- 简化了开发流程
- 降低了开发成本
- 提升了开发效率
GIS平台
基础平台
基础平台,也称系统平台,提供全面的开发支持,为专业应用方向提供基础设施.
常见的基础平台有
-
MapGIS
-
ArcGlS
-
SuperMap
应用平台
有些应用方向也会提供自己的平台.比如,地图导航应用
- 高德开放平台
- 百度地图开放平台
术语名词
地图组成
- 底图(Map):所有信息的载体
- 图层(Layer):将不同地理信息分类形成的一个集合
- 要素(Feature):表示不同的地物
- 几何(Geometry):信息的数据模型和抽象
地图容器
即在准备阶段所创建的指定了id的div对象，这个div将作为承载所有图层、点标记、矢量图形、控件的容器
图层
图层是指能够在视觉上覆盖一定地图范围，用来描述全部或者部分现实世界区域内的地图要素的抽象概念
矢量图形
矢量图形，一般覆盖于底图图层之上，通过矢量的方式(路径或者实际大小)来描述其形状，用几何的方式来展示真实的地图要素，会随着地图缩放而发生视觉大小的变化，但其代表的实际路径或范围不变
点标记
点标记是用来标示某个位置点信息的一种地图要素,覆盖于图层之上。
地图控键
控件浮在所有图层和地图要素之上，用于满足一定的交互或提示功能
地图级别
级别与地图的比例尺成正比，每增大一级，地图的比例尺也增大一倍，地图显示的越详细。Web地图的最小级别通常为3级，最大级别各家略有不同，高德地图JS API目前最大级别为20级。
经纬度
坐标通常指经纬度坐标，高德地图的坐标范围大致为:东西经180度(-180——180，西半球为负，东半球为正)，南北纬85度(-85——85，北半球为正，南半球为负)。
底图
严格意义上，底图指处于所有图层和图形最下方的一个图层，通常不透明。可以是单一图层，比如官方标准图层，也可以是图层组合，比图卫星图层和路网图层组合。
投影
地图投影指的是将地球球面的经纬度坐标映射到地图平面坐标的变换和映射关系。高德地图使用Web墨卡托投影，即采用EPSG:3857坐标系统。
高德地图显示
展示地图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body, #container {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "..",
}
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=[]">
</script>
</head>
<body>
<div id="container"></div>
<script>
console.log(AMap)
const map = new AMap.Map('container', {
viewMode: '2D', // 默认使用 2D 模式
zoom: 11, //初始化地图层级
center: [116.397428, 39.90923] //初始化地图中心点
});
</script>
</body>
</html>
按钮控制实时路况和控件展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "..",
}
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=[]">
</script>
</script>
</head>
<body>
<button onclick="add()">添加</button><button onclick="del()">隐藏</button>
<div id="container"></div>
<script>
console.log(AMap)
const map = new AMap.Map('container', {
viewMode: '3D', // 默认使用 2D 模式
zoom: 11, //初始化地图层级
center: [104.066301, 30.572961], //初始化地图中心点
pitch: 45, //初始化地图俯仰角
});
// 创建实施交通图层
var traffic = new AMap.TileLayer.Traffic({
'autoRefresh': true, // 是否自动刷新，默认为false
'interval': 180, // 刷新间隔，默认180s
});
// 通过 add 方法将图层添加到地图
function add() {
map.add(traffic);
}
function del() {
map.remove(traffic);
}
AMap.plugin([
'AMap.ToolBar',
'AMap.Scale',
'AMap.HawkEye',
'AMap.MapType',
'AMap.Geolocation',
], function () {
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
map.addControl(new AMap.ToolBar());
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale());
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
map.addControl(new AMap.HawkEye({ isOpen: true }));
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType());
// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
map.addControl(new AMap.Geolocation());
});
</script>
</body>
</html>
点击交互和矢量图展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "..",
}
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=[]">
</script>
</head>
<body>
<div id="container"></div>
<script>
console.log(AMap)
const map = new AMap.Map('container', {
viewMode: '3D', // 默认使用 2D 模式
zoom: 11, //初始化地图层级
center: [104.066301, 30.572961], //初始化地图中心点
});
//事件
map.on('click', function (event) {
console.log(`${event.lnglat.lng},${event.lnglat.lat}`)
//添加点对象
const marker = new AMap.Marker({
position: event.lnglat,
})
map.add(marker)
})
var path = [
new AMap.LngLat(103.729845,30.548128),
new AMap.LngLat(103.834901,30.640333),
new AMap.LngLat(103.952318,30.499626),
new AMap.LngLat(104.058061,30.668686)
];
var polyline = new AMap.Polyline({
path: path,
borderWeight: 2, // 线条宽度，默认为 1
strokeColor: 'red', // 线条颜色
lineJoin: 'round' // 折线拐点连接处样式
});
map.add(polyline);
</script>
</body>
</html>
GeoJSON
什么是？
GeoJSON是一种保存地理信息数据的格式 目的：数据持久化
包含
- 几何信息 geometry
- 自定义属性 properties