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

CSS：页面样式与布局美化

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

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

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

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

1）什么是选择器：

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

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

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

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

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

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

id选择器

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

语法：

1#id名 {
2  属性: 值;
3}

示例：

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

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

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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>id选择器</title>
8    <style>
9        #container {
10            /* w300+h300 */
11            width: 300px;
12            height: 300px;
13            /* bgc */
14            background-color: skyblue;
15        }
16    </style>
17</head>
18<body>
19    <div id="container"></div>
20    <!-- emmet: #container -->
21</body>
22</html>

JavaScript：让页面动起来

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

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

1. 变量：存数据

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

1// 数值变量：存储地图缩放等级
2var i = 1
3// 字符串变量：存储提示文本、备注信息
4var str = '欢迎大家来新中地教育学习GIS开发'
5
6// 打印变量，查看数据
7console.log(str)

变量的声明

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

变量的使用

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

console.log(str)

2. 数组：存一组数据

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

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

3. 函数：封装代码片段

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

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

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

函数的声明

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

函数的调用

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

函数的组成

参数
返回值

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

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

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

1// 字面量方式创建对象
2var obj = {};
3
4// 通过构造函数定义对象
5var p = new Person();

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

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

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

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

《零基础webgis开发入门：HTML/CSS/JavaScript前端核心基础②》是转载文章，点击查看原文。