零基础webgis开发入门：HTML/CSS/JavaScript前端核心基础②

CSS：页面样式与布局美化

CSS 全称层叠样式表，核心作用是控制HTML元素的外观和布局，包括大小、颜色、背景、位置、边距等。

在WebGIS中，CSS直接决定地图的显示尺寸、是否全屏、页面是否有白边等关键效果。

CSS的核心逻辑可总结为两步走：选元素、改样式。

第一步：选元素（选择器）

1）什么是选择器：

选择器是CSS的核心，作用是从页面众多HTML元素中，筛选出需要修改样式的目标元素。

想象一群小黄人站你面前，你想把单眼的小黄人选出来变红色。

第一步：选出所有的单眼小黄人
第二步：修改颜色为红色

CSS也是这个逻辑：先选出目标元素，再改它的样式。

第一步：通过选择器，找出符合要求的HTML元素
第二步：修改找出来的元素的属性

GIS开发最常用：类选择器、ID选择器 ，其中ID选择器是地图容器专属常用选择器。

id选择器

作用：选择某一个元素，该元素通过id属性指定

语法：

html 复制代码

#id名 {
  属性: 值;
}

示例：

html 复制代码

<div id="container"></div>

第二步：声明块------修改元素样式属性

选中元素后，通过样式属性修改外观，GIS开发最常用的基础属性：宽度、高度、背景色、边距等。

html 复制代码

<!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>id选择器</title>
    <style>
        #container {
            /* w300+h300 */
            width: 300px;
            height: 300px;
            /* bgc */
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <!-- emmet: #container -->
</body>
</html>

JavaScript：让页面动起来

JavaScript是解释型编程语言，不需要编译，浏览器直接运行。

在WebGIS开发中，JS是绝对核心：地图加载、点位标记、路径绘制、距离计算、点击交互、数据渲染等所有动态功能，全部依靠JS实现。

1. 变量：存数据

变量是数据容器，用于存储固定数据，GIS中常用于存放经纬度、缩放级别、文本信息等参数

javascript 复制代码

// 数值变量：存储地图缩放等级
var i = 1
// 字符串变量：存储提示文本、备注信息
var str = '欢迎大家来新中地教育学习GIS开发'

// 打印变量，查看数据
console.log(str)

变量的声明

javascript 复制代码

var i = 1
var str = '欢迎大家来新中地教育学习GIS开发'

变量的使用

声明一个名为arr的变量，并将其赋值为一个包含数字 1、2、3 的数组。

javascript 复制代码

console.log(str)

2. 数组：存一组数据

数组是一组数据的集合，可批量存储多个数据。在GIS开发中使用频率极高，主要用来存储一组坐标、多个标记点位、路径轨迹点位等。

javascript 复制代码

// 定义数组，存储一组数值
var arr = [1,2,3]

3. 函数：封装代码片段

函数是可重复使用的代码片段，用于封装固定功能，避免代码冗余，让代码结构更清晰。GIS中常用于封装添加标记、删除点位、计算距离、清空地图等通用操作。

基础语法包含：函数声明、函数调用、参数、返回值

javascript 复制代码

// 无参无返回值函数
function fun() {
    console.log('hello')
}
// 调用函数，执行功能
fun()
// 带参数、带返回值函数（GIS计算常用）
function add(x, y) {
    return x + y
}

函数的声明

javascript 复制代码

// 无参无返回值函数
function fun() {
    console.log('hello')
}

函数的调用

javascript 复制代码

// 调用函数，执行功能
fun()

函数的组成

参数
返回值

javascript 复制代码

// 带参数、带返回值函数（GIS计算常用）
function add(x, y) {
    return x + y
}

4. 对象：属性和方法的集合

对象是**属性（数据）+ 方法（功能）**的集合，是GIS开发最核心的数据结构。高德、百度、天地图等GIS API的地图实例、标记实例、配置参数，全部以对象形式存在。

javascript 复制代码

// 字面量方式创建对象
var obj = {};

// 通过构造函数定义对象
var p = new Person();

日常开发中通过 . 语法访问对象的属性和方法，操作地图参数。

5. 事件：用户操作触发代码

事件的核心逻辑：触发操作 => 执行对应代码。用户的点击、拖拽、缩放、移动等操作都属于事件，触发后执行的函数称为回调函数。

GIS常见事件：地图点击事件、标记拖拽事件、地图缩放结束事件、点位悬浮事件等。