Introduction to webGIS and Application Amap Development Platform

webGIS

what is?

Combine front-end visualization technology with GIS technology to provide better information display and user interaction

GIS cloud platform

Combining webGlS with cloud computing and distributed architecture

Simplifies the development process
Reduced development costs
Improved development efficiency

GIS platform

Basic Platform

The basic platform, also called the system platform, provides comprehensive development support and provides infrastructure for professional applications.

Common basic platforms include

MapGIS
ArcGlS
SuperMap

Application platform

Some application directions will also provide their own platforms. For example, map navigation applications

Amap open platform
Baidu map open platform

term noun

Map composition

Map: The carrier of all information
Layer: a collection formed by classifying different geographical information
Feature: represents different features
Geometry: Data models and abstractions of information

map container

That is, the div object with a specified id created during the preparation phase. This div will serve as a container for all layers, point markers, vector graphics, and controls.

Layers

Layer refers to an abstract concept that can visually cover a certain map range and is used to describe map elements in all or part of the real-world area.

Vector Graphics

Vector graphics are generally overlaid on the base map layer. They describe their shape through vectors (path or actual size) and use geometry to display real map elements. The visual size will change as the map is zoomed. , but the actual path or scope it represents remains unchanged

point mark

Point markers are a type of map element used to mark point information at a certain location and are overlaid on the layer.

Map keys

The control floats on top of all layers and map elements to meet certain interactive or prompt functions.

map level

The level is proportional to the scale of the map. Each time the level increases, the scale of the map also doubles, making the map more detailed. The minimum level of a web map is usually level 3, and the maximum level is slightly different for each company. The current maximum level of the Amap JS API is level 20.

Latitude and longitude

Coordinates usually refer to longitude and latitude coordinates. The coordinate range of the Amap map is roughly: 180 degrees east and west longitude (-180-180, negative in the western hemisphere, positive in the eastern hemisphere), 85 degrees north and south latitude (-85-85, positive in the northern hemisphere, negative in the Southern Hemisphere).

base map

Strictly speaking, the basemap refers to the layer at the bottom of all layers and graphics, and is usually opaque. It can be a single layer, such as the official standard layer, or a combination of layers, such as a combination of satellite layers and road network layers.

projection

Map projection refers to the transformation and mapping relationship that maps the longitude and latitude coordinates of the earth's sphere to the map plane coordinates. Amap uses Web Mercator projection, which uses the EPSG:3857 coordinate system.

Gaode map display

show map

<!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>

Buttons control real-time traffic conditions and control display

<!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>

Click interaction and vector display

<!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

what is?

GeoJSON is a format for saving geographical information data Purpose: Data persistence

Include

Geometry information geometry
Custom propertiesproperties