前三篇把方向、环境、平台概念都讲完了。今天开始我们正式进入实操敲代码阶段。本文介绍前端三剑客HTMLCSSJavaScript核心基础。一、HTML页面结构搭建骨架HTML不是编程语言是标记HTML是标记语言它的作用就是告诉浏览器这里是个标题、这里是个段落、这里是个列表。1. 元素元素是HTML的最小基本单位由开始标签、内容、结束标签三部分组成完整构成一个页面模块。示例p我的猫咪脾气爆:)/pp开始标签我的猫咪脾气爆:)内容/p结束标签合起来叫一个元素2. 属性给元素加额外信息可以给HTML元素添加属性为元素补充额外标识、配置信息方便后续CSS样式修改、JS获取操作元素。属性格式为属性名属性值。示例p classeditor-note我的猫咪脾气爆:)/pclasseditor-note就是属性用于给当前段落标签绑定类名实现元素的精准定位。3. WebGIS开发里常用的HTML标签1标题元素 headingGIS开发无需掌握所有HTML标签只需掌握以下高频核心标签足以支撑所有地图页面开发标题标签 h1~h6用于页面标题、模块标题h1为一级主标题权重最高h6为六级副标题段落标签 p用于展示文本描述、功能说明文字容器标签 div最核心标签WebGIS中专门用来作为地图渲染容器所有地图都会挂载在div容器中无序列表 ulli用于展示功能列表、点位列表、导航菜单等示例!DOCTYPE html html langen head meta charsetUTF-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleHTML中的常见元素/title /head body !-- Ctrl/注释给程序员看的不会显示在浏览器中 -- !-- 1. 标题元素h1~h6 -- h1一级标题/h1 h2二级标题/h2 h3三级标题/h3 !-- 2. div元素容器元素 -- !-- 属性keyvalue -- div idcontainer/div !-- 3. 列表元素 -- !-- ul: unorder list无序列表 li: list item列表项 -- ul li1/li li2/li li3/li /ul /body /html!DOCTYPE html声明文档类型告诉浏览器使用HTML5标准解析页面html页面根元素包裹所有页面内容head头部区域存放页面配置、编码、适配、样式等信息body主体区域所有浏览器可见的页面内容、地图容器都放在这里二、CSS页面样式与布局美化CSS 全称层叠样式表核心作用是控制HTML元素的外观和布局包括大小、颜色、背景、位置、边距等。在WebGIS中CSS直接决定地图的显示尺寸、是否全屏、页面是否有白边等关键效果。CSS的核心逻辑可总结为两步走选元素、改样式。第一步选元素选择器1什么是选择器选择器是CSS的核心作用是从页面众多HTML元素中筛选出需要修改样式的目标元素。想象一群小黄人站你面前你想把单眼的小黄人选出来变红色。第一步选出所有的单眼小黄人第二步修改颜色为红色CSS也是这个逻辑先选出目标元素再改它的样式。第一步通过选择器找出符合要求的HTML元素第二步修改找出来的元素的属性GIS开发最常用类选择器、ID选择器其中ID选择器是地图容器专属常用选择器。2) id选择器作用选择某一个元素该元素通过id属性指定语法#id名 { 属性: 值; }示例div idcontainer/div第二步声明块——修改元素样式属性选中元素后通过样式属性修改外观GIS开发最常用的基础属性宽度、高度、背景色、边距等。!DOCTYPE html html langen head meta charsetUTF-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleid选择器/title style #container { /* w300h300 */ width: 300px; height: 300px; /* bgc */ background-color: skyblue; } /style /head body div idcontainer/div !-- emmet: #container -- /body /html三、JavaScript让页面动起来JavaScript是解释型编程语言不需要编译浏览器直接运行。在WebGIS开发中JS是绝对核心地图加载、点位标记、路径绘制、距离计算、点击交互、数据渲染等所有动态功能全部依靠JS实现。1. 变量存数据变量是数据容器用于存储固定数据GIS中常用于存放经纬度、缩放级别、文本信息等参数。// 数值变量存储地图缩放等级 var i 1 // 字符串变量存储提示文本、备注信息 var str 欢迎大家来新中地教育学习GIS开发 // 打印变量查看数据 console.log(str)变量的声明var i 1 var str 欢迎大家来新中地教育学习GIS开发变量的使用声明一个名为arr的变量并将其赋值为一个包含数字 1、2、3 的数组。console.log(str)2. 数组存一组数据数组是一组数据的集合可批量存储多个数据。在GIS开发中使用频率极高主要用来存储一组坐标、多个标记点位、路径轨迹点位等。// 定义数组存储一组数值 var arr [1,2,3]3. 函数封装代码片段函数是可重复使用的代码片段用于封装固定功能避免代码冗余让代码结构更清晰。GIS中常用于封装添加标记、删除点位、计算距离、清空地图等通用操作。基础语法包含函数声明、函数调用、参数、返回值// 无参无返回值函数 function fun() { console.log(hello) } // 调用函数执行功能 fun() // 带参数、带返回值函数GIS计算常用 function add(x, y) { return x y }函数的声明​​​​​​​// 无参无返回值函数 function fun() { console.log(hello) }函数的调用// 调用函数执行功能 fun()函数的组成参数返回值// 带参数、带返回值函数GIS计算常用 function add(x, y) { return x y }4. 对象属性和方法的集合对象是属性数据 方法功能的集合是GIS开发最核心的数据结构。高德、百度、天地图等GIS API的地图实例、标记实例、配置参数全部以对象形式存在。// 字面量方式创建对象 var obj {}; // 通过构造函数定义对象 var p new Person();日常开发中通过.语法访问对象的属性和方法操作地图参数。5. 事件用户操作触发代码事件的核心逻辑触发操作 执行对应代码。用户的点击、拖拽、缩放、移动等操作都属于事件触发后执行的函数称为回调函数。GIS常见事件地图点击事件、标记拖拽事件、地图缩放结束事件、点位悬浮事件等。五、这些基础在GIS开发里怎么对应学完了可能还是懵这些跟地图有什么关系 对应关系表见下表先了解一下学后面章节时也就知道这些基础用在哪了前端基础GIS开发里的应用div idcontainer地图容器高德API接管这个div渲染地图width/height: 100%地图全屏显示没高度就空白margin: 0去除白边避免滚动条JS变量存经纬度、缩放级别JS数组存路径坐标、标记点集合JS函数封装添加标记、计算距离JS对象配置地图参数、Marker参数JS事件点击地图、拖拽标记、缩放结束六、下篇预告下篇正式进入地图功能。从零搭建完整的WebGIS地图页面