GIS学习之WebGIS开发基础(一)：引入高德JS API资源文件详细过程

最新推荐文章于 2025-03-17 12:10:13 发布

webGIS求经

最新推荐文章于 2025-03-17 12:10:13 发布

阅读量1.6k

点赞数 1

文章标签： javascript css visual studio code

本文链接：https://blog.csdn.net/m0_49392966/article/details/129052682

版权

什么是GIS平台

GIS平台，也叫基础平台，系统平台，是指Map info、Arc info、Supermap、MapGIS等GIS平台，是成型的商品软件。这些软件具有强大的通用的GIS功能，也可以在其上用开发工具.NET、JAVA Delphi等等，开发出各种GIS软件。然而GIS的开发平台众多、开发平台也各有优势、在进行GS开发过程中、选择一个好的平台无疑是尤为重要的。

Tips：GIS软件一般是指应用到用户那里的，结合用户的业务开发出来的软件。例如在电力、水利、国土资源、交通等等行业正在应用的软件，这些软件一般都是在GIS平台上开发的，应用的时候要先安装GIS平台，安装开发人员再在平台之上开发出来的软件才能运行。国外的常用的GlS软件有AutoCAD Map3d、ArcGIS、Maplnf等，而国内比较知名的GIS软件则是Supermap、MapGIS、GeoStar等。

什么是GIS应用平台

有些GIS应用方向会提供自己的平台，比如，地图导航应用高德开放平台(JS API)、百度地图开放平台，这些平台面向大众提供开放的API接口服务。

Tips：解决将地理信息通过web技术展现出来的问题，下面介绍一种GIS应用平台。

由于高德开放平台相对比较好配置比较轻量级，在本次教程中主要跟大家分享高德API的使用。

地图整体框架

地图组成结构：控件、Marker、矢量图形、图层

JS API组成结构

地图容器(Contaer)：即在准备阶段所创建的指定了id的div对象，这个div就是承载所有图层、点标记、矢量图形、控件的容器。

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

高德地图 JS API 即提供了标准图层、卫星图层、路网图层、路况图层等官方标准图层接口，又提供了加载其他厂商发布的标准地图服务的图层接口，还提供了加载开发者自己的图片、Canvas、视频、热力数据的图层接口。同时也深度开放了可以自定义绘制方法的自定义图层接口。

矢量图形(Vector Overlays)：一般覆盖于底图图层之上，通过矢量的方式（路径或者实际大小）来描述其形状，用几何的方式来展示真实的地图要素，会随着地图缩放而发生视觉大小的变化，但其代表的实际路径或范围不变。

JS API除了折线、圆、多边形之外，还提供了矩形、椭圆、贝瑟尔曲线等常用的矢量图形。

3D视图下的Mesh、Prism棱柱、MeshLine也可以看做是一些特殊的矢量图形。

点标记(Markers)：点标记是用来标示某个位置点信息的一种地图要素，覆盖于图层之上。如图中蓝色方框中的两个点状要素。其在屏幕上的位置会随着地图的缩放和中心变化而发生改变，但是会与图层内的要素保持相对静止。

普通的点标记(Marker)支持将自定义图标和DOM元素作为展示内容。除了Marker之外为了满足不同的场景，JS API还提供了丰富的点标记类型，比如圆点标(Circle Marker)、文本标记(Text)、灵活点标记(Elastic Marker)。另外还有海量点(Mass Marks)、点聚合(MarkerCluster)来满足大量点标记的展示需求。

地图控件(Map Controls)：控件浮在所有图层和地图要素之上，用于满足一定的交互或提示功能。一般相对于地图容器静止，不随着地图缩放和中心变化而发生位置的变化。如上图中绿色方框中的比例尺和级别控件。

常用名词

地图级别(ZoomLevel)：级别与地图的比例尺成正比，每增大一级，地图的比例尺也增大一倍，地图显示的越详细。Web地图的最小级别通常为3级，最大级别各家略有不同，高德地图JS API目前最大级别为20级。

插件(Plugins)：插件是独立于JS API地图核心模块之外的一些功能，比如服务类、绘制工具、矢量图形编辑工具、点聚合、热力图等。这些插件不会主动随JS API的主体资源的加载而下发，使用之前需要提前引入，详见插件的使用。

底图(BaseLayer)：严格意义上，底图指处于所有图层和图形最下方的一个图层，通常不透明。可以是单一图层，比如官方标准图层，也可以是图层组合，比图卫星图层和路网图层组合。

地图要素(Map Features)：严格意义的地图要素指的是展示在地图上的地理要素，包括道路、区域面、建筑、POI标注、路名等。开发者自定义的点标记、矢量图形也可以看做是一种地图要素。

标注(Labels)：我们习惯将底图上自带的标示一定信息的文字或图标称为标注，比如POI标注，道路名称标注等。

投影(Projection)：地图投影指的是将地球球面的经纬度坐标映射到地图平面坐标的变换和映射关系。高德地图使用Web墨卡托投影，即采用 EPSG:3857 坐标系统。

地图平面像素坐标(Plane Coordinates)：地图平面像素坐标指投影为平面之后的地图上的平面像素坐标，高德地图使用的Web墨卡托投影，在3级时，平面坐标范围为横纵0~256* 2的3次方像素，每级别扩大一倍，即第n级的平面坐标范围为0~256* 2的n次方像素。

三维空间坐标(3D Coordinates)：三维空间坐标是在3D地图模式下的世界坐标，由 x、y、z 三个纬度组成，三维空间坐标通常用于描述 Object3D 类型的几何形体。

开发环境搭建

安装配置开发软件VSCode

运行测试工具Chrome浏览器

官网注册成为高德开放平台开发者(过程略)

在控制台创建新应用和为应用添加key(码)，添加成功后，可获取key值和安全密钥jscode，为后面形成页面做准备

web开发基础

HTML，CSS，JavaScript学习参考w3s文档

HTML快速入门

1.什么是HTML

HTML(Hyper Text Markerup Language)：超文本标记语言

2.HTML的组成

1)元素(element)

由一系列的元素组成，常见的HTML元素标题元素heading，段落元素p，容器元素div，列表元素ul等，在元素中包含属性。

示例

<p>我的猫咪脾气很爆</p>

在有些教程里不分元素和标签，都是混用的。但是根据HTML5的规范，元素更加准确。

2)属性

元素中可以包含属性。

示例

<p class="editor-note>我的猫咪脾气很爆></p>
<div id="container">id是元素唯一标识</div>

参考MDN文档：HTML是何方神圣

3.常见的HTML元素和使用方法

参考w3c文档：常见的HTML元素和使用方法

CSS快速入门

1.什么是CS5

CSS(Cascading Style Sheets)：通常称为CSS样式表或层叠样式表

2.CSS的作用

CSS的作用就是用来规定每个HTML元素表现的样子，比如字体的大小，颜色，摆放位置。

3.CSS的核心语法

主要由选择器+声明块组成，写法是CSS两步走：选元素，改属性

<style>
    选择器1(选择的标签) {
        属性1: 属性值1;
			...
	}
	选择器2(选择的标签) {
        属性1: 属性值1;
			...
	}
</style>

示例


<style>
/* 将h1的字体改成红色 */
    h1 {
    	color: red;
    }
</style>

JavaScript快速入门

1.什么是JavaScript

JavaScript是一种解释型编程语言

2.变量

1)什么是变量

变量是存放数据的容器

2)变量的声明

示例

<script>
    var i = 1
    var str = '我是字符串变量'
</script>

3)变量的使用

示例

console.log(str)

2.数组

数组是一组数据的集合，数组中的每个数据叫元素。

var arr = [1,2,3]

3.函数

1)什么是函数

实现特定功能的代码片段

2)函数的组成

参数

返回值

3)函数的使用过程

函数声明、函数的调用

示例

<script>
    //函数的声明
    function fun() {
        console.log('helo')
    }
    //函数的调用
    fun()
</script>

4.JS的对象

1)对象由属性和方法组成

属性：可以当作变量

方法：可以当作函数

2)对象的定义

示例

<script>
    //两种方式
    //1直接定义对象（字面量）
    var obj = {
    name:'xiaoming',
    age: 18,
    sayHi: function() {
    	console.1og('大家好)
    	},
    }
    console.log(obj.name, obj.age)
    //浏览器输出结果为：xiaoming 18
    
    //2通过构造哈数定义对象
    function Person(n, a) {
        this.name = n,
        this.age = a
    }
	var P = new Person('xiaoming', 18)
    console.log(p)
</script>

5.事件驱动

当什么事件发生时，会执行一个函数，这个函数叫回调函数。有两种方式。

<body>
    <!-- 方式1 -->
	<button onclick="handleClick()">点击我</button>
	<script>
        function handleClicck() {
            console.log('我被点击了')
        }
	</script>
</body>

<body>
    <!-- 方式2 -->
    button是按钮元素
    <button id="btn">事件监听</button>
    <script>
        function handleclick() {
        	console.1og('我被点击了...')
        }
        document.querySelector('#btn').addEventListener('click', function() {
            console.log('click事件被监听到了')
        })
    </script>
</body>