热爱WebGIS的博客

原创 CSS关于居中的问题

由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。我们可以用百分比来表示，子元素相对父元素移动 50%的距离后，再根据子元素的外边距进行调整。值是写死的，如果 son 的宽度发生改变，子元素也无法水平居中。是写死的，如果父元素的宽度发生改变，子元素就无法水平居中了。子绝父相，子元素设置以下属性，也能进行水平垂直居中。子元素 y 轴移动的距离是父子元素高度差的一半，子元素 x 轴移动的距离是父子元素宽度差的一半。子元素相对父元素移动 50%的距离后，使用。

原创 cesium公交车轨迹漫游

这是一个用 Cesium.js 做的公交车轨迹漫游，实现的功能有加载站点和道路轨迹点数据、监听车辆的实时位置、车辆控制器。滚动屏等等。

原创 cesium楼层分户实现功能

这是一个涉及Cesium.js（一个用于Web的3D地球和地图的JavaScript库）和前后端交互的楼房分户案例。该案例的主要功能包括区域绘制、户型切分、楼房分层、编辑房户信息和查看房户信息等等。

原创 cesium楼层分户分析

build_id：相应的楼栋，单位跟楼栋是一对多的关系，一个楼可以有多个单位。unit_id：相应的单位，房户跟单位是对应的关系，一个单位可以有多个房户。点击生成数据，将数据提交到数据库中，提交成功过后，跳到编辑房户信息页面。分户坐标是由绘制的多个点组成的，而不是一个点，只读，不可手动更换。create_at：楼层创建时间，自动记录方案添加到数据库的时间。delete_at：楼层删除时间，当方案被删除时自动记录时间戳。绘制三个点：最低点，分割点和最高点，输入楼层数。update_at：更新楼层的时间。

原创 cesium方案论证实现功能

调整完后，提交方案，输入方案名称，点击确定后，通过请求，将方案保存到数据库，因为你无法永久性地改变 3D 瓦片，只能把旋转、位置移动，尺寸都放在数据库中，可以用来还原方案。需要先保证笛卡尔转屏幕，再转笛卡尔流程是正确的，再来进行移动，移动就是对应的屏幕 xy 移动。先将世界坐标转屏幕坐标，再将屏幕坐标转世界坐标，如果转换后还是同一个点，那转换成功。将坐标扔进来会有一个高度，这时不要传高度进去，转出来也要带着高度，高度不变。如果笛卡尔坐标的高度不为 0，就会出现下面的情况，点跑到下面去。

原创 cesium方案论证分析

这是一个涉及Cesium.js（一个用于Web的3D地球和地图的JavaScript库）和前后端交互的复杂项目。项目的主要功能包括地形平压、模型放置和调整、方案保存和查看等。

原创 js计算器实现

给每个按钮添加点击事件，使用。

原创 js的qq换肤效果

/ //使用this(this:谁调用我,我代表谁.this就代表点击的那个图片)// //设置body的背景为点击的图片。使用 forEach 进行循环，可以省略 i。// //添加点击事件。使用 for 进行循环。

原创 js猜拳游戏

将点击事件进行动态绑定。将点击事件进行行内绑定。

原创 js手持小风扇

【代码】js手持小风扇。

原创 JS的DOM事件

js 对象：本质是一个对象(类的实例)，不能在网络上传输(后台经常将对象转成 js 字符串，通过网络发给前台)。json 字符串：本质上是一个字符串，可以用于网络传输(从后台接收到的数据大部分都是 json)。是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，**match()**方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。使用字符串的 match 方法判断图片的 src 属性值，进行切换。方法来判断图片的 src 属性值，进行切换。

原创 js计算出生天数

使用一元运算符+转成毫秒值，再相减。转成毫秒值，再相减。

原创 js分发扑克牌

底牌最后三张扑克牌。

原创 js的Number对象和全局对象

把数字转换为字符串，结果的小数点后有指定位数的数字。对象，在 nodejs 中代表 global 对象。使用 Function 构造函数创建一个无参的函数。使用 Function 构造函数创建一个带参的函数。它的属性和方法都不需要加上对象名(window)。页面中最大对象(顶级对象)，在浏览器的环境中代表。Number 对象是原始数值的包装对象。检测指定参数是否为整数。指示某个值是不是数字值。函数本质是对象类型，由。

原创 js的String对象

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。用于处理文本（字符串）的对象。这个插件，用来生成正则表达式。写一个方法校验 qq 号。

原创 js的Date对象

使用带参构造(传数字类型的参数)，创建出来的就是指定的时间对象(月份是从 0 开始计算的)。使用带参构造(传字符串类型的参数)，创建出来的也是指定的时间对象。使用无参构造，创建出来的就是当前的时间对象。只想或当前的时间对象，使用方式一即可。想要获取指定时间对象，使用方式三即可。Date 对象用于处理日期与时间。

原创 js的对象

对具有相同属性和行为的事物的统称。这里创建一个最简单的类(只有类名，没有属性和方法)。

原创 js的数组

定义数组，数据中可以存放真正的数据，如小白、小黑、小胖等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。获取用户的输入的数据，求这个数据在数组中第一次出现的索引，如果不存在,得到的结果为-1。属性，它的含义是获取数组的长度，数组属于对象类型。向数组的末尾添加一个或更多元素，并返回新的长度。向数组的开头添加一个或更多元素，并返回新的长度。数组的数组，二维数组里面的元素都是一维数组。连接两个数组 (不改变原数组的内容)。从尾巴删除一个元素并返回删除的元素。从数组中添加或删除元素。

原创 js选择语句

case 穿透会从满足条件的那个语句开始，依次执行，即使后面的 case 不满足条件，也会执行，直到出现 break 才会跳出 switch 语句。输入一个月份，判断月份属于哪个季节: 12，1，2 冬季 3，4，5 春季 6，7，8 夏季 9，10，11 秋季。从上往下，依次判断每一个条件，如果满足，就会执行对应的语句体，剩下的即使满足也不会执行。中的条件，符合条件，就执行下面的代码块，每个代码块用。如果你的工作年限小于 1 年，你的年假是 5 天。，就执行大括号的代码块，如果为。

原创 js流程控制

流程控制就是来控制代码按照一定结构顺序来执行。是最简单的，从上往下，依次执行的。

原创 js运算符

如果左边表达式不成立(已经确定了整个表达式是 false)，右边就没有必要执行，就发生了短路，可以提高效率。如果左边表达式成立(已经确定了整个表达式是 true)，右边就没有必要执行，就发生了短路，可以提高效率。与：&&当且仅当两边都为 true 才返回 true，同真为真，一假为假。或：||一边为 true,返回 true，一真为真，同假为假。js 小数在某些情况下，显示的是一个无限接近的数。弹框录入一个 3 位数，求每一位上的数相加的和。取反，真变假，假变真。++在后，先运算再自增。

原创 js概念及入门

但在操作页面上的元素和操作浏览器方面各有各自独特的方法，因而 BOM 和 DOM 的实现各个厂商是不一样的。JavaScript,JScript 等脚本语言都是基于 ECMAScript 标准实现的，因此在。JavaScript 由 ECMAScript，DOM 和 BOM 三者组成的。一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过。一种运行在客户端的脚本语言(也可以运行在服务端,比如 nodejs)。输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

原创 HTML入门总结

原创 CSS时钟案例

* 向左上移动自身的50% *//* 沿底部旋转 *//* 沿底部旋转 *//* 沿底部旋转 *//* 中间黑点 *//* 添加动画 *//* 定义动画 */

原创 个人简历项目准备

完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media。完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media。离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。相对长度，相对于根元素 html 里面的字体尺寸，不会继承父级的尺寸大小。相对长度，默认相对于浏览器的默认字体尺寸，会继承父级元素的字体大小。从上往下，从左往右，从外向里。

原创 grid布局

网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。网格是一组相交的水平线和垂直线，它定义了网格的列和行。网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。网格元素的垂直线方向称为列（Column）。网格元素的水平线方向称为行（Row）。通常我们用 gap 表示元素的间隙。/* fr代表可用空间的1等分 */列与列，行与行之间的交接处。/* 开启grid布局 *//* 设置行和列的间隙 */

原创 flex布局

文章目录1. 概念2. 和浮动的区别3. 伸缩容器和伸缩项目3.1. 伸缩容器3.2. 伸缩项目4. 主轴与侧轴5. 主轴属性6. 纵轴属性6.1. align-self 示例7. flex 实现水平垂直居中7.1. 方法一7.2. 方法二8. 伸缩性8.1. flex-basis8.2. flex-shrink8.3. flex-grow（伸）8.4. flex 复合属性9. 布局技巧10. gap 属性11. 小米模块实现11.1. 演示效果11.2. 分析思路11.3. 代码实现11.4. 补充11.

原创 CSS其他属性

注意：这里给图片宽度 100px，是因为图片过大，适当地缩小图片，没有影响的，因为父元素没有设置宽高，内容是由子元素撑开的。用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。图片和文字在一行显示的时候，图片底部和文字的底部并没有对齐。如果父元素只有图片，没有文字的话，可以给父元素设置。，除了 baseline 外，其他值都可以解决。如果单单解决空白问题，而不是文字对齐底端，如果父元素只有一张图片，可以给图片加。之后，文字居中了但是图片没有居中。，把子元素放置在父元素的中部。，文字就能对齐底端了。

原创 CSS字体图标

也有样式，如下，如果使用元素选择器修改字体图标的字体大小，会修改不了，因为样式类选择器优先级比元素选择器优先级高。本质就是一个字体，可以灵活修改它的样式，降低服务器请求的次数，同时相比图片更加清晰。在修改字体图标的时候，不要用元素选择器进行修改，建议用对应的。属于在线字体库，不需要下载字体包，直接在线引入。下载的文件也有使用方法，可以按照教程来。引入字体包中的 css 样式。将下载好的字体包拖到项目中。挑选类名来展示图标。

原创 CSS定位

也是一种布局方式，可以让子元素自由摆放在页面中的任意位置(叠加效果)。/* 对cover，通过伪元素模拟生成,子绝父相来实现 *//* 使用transform向上移动自身100% */相对于浏览器进行的定位，让盒子固定在屏幕的某一个位置。定位(定位的优先级是最高的，可以叠加在其他元素之上)，不会脱离文档流，这样对页面的布局的影响是最小的。子元素设置绝对定位，父元素设置相对定位。可以让子元素相对于父元素进行自由移动。相对于最近有定位的祖先元素进行移动。/* 对c2进行相对定位 *//* 可写可不写 */

原创 CSS盒子模型

！！（content）、（padding）、（border）、（margin））四个属性。

原创 CSS浮动

文章目录文档流浮动简介浮动元素特点浮动属性浮动小练习练习 1练习 2练习 3练习 4导航条案例改进改进前浮动改进后浮动练习个人简历页面布局方式一方式二清除浮动影响解决方式文档流也叫标准流，行内元素可以水平排布，块级元素一般垂直排布。浮动简介在最初，浮动是用来实现文字环绕图片效果的，也就是图文混排，现在浮动是主流的页面布局方式之一。浮动元素特点脱离文档流(浏览器的标准流)，在文档流中不占位置，相当于飘起来。不管浮动前是什么元素，浮动后的默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。

原创 AntV L7深圳智慧城市

本案例使用库和构建深圳智慧城市。

原创 AntV L7构建中地大楼

本案例使用库和构建中地大楼。

原创 CSS其他属性

注意：这里给图片宽度 100px，是因为图片过大，适当地缩小图片，没有影响的，因为父元素没有设置宽高，内容是由子元素撑开的。用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。图片和文字在一行显示的时候，图片底部和文字的底部并没有对齐。如果父元素只有图片，没有文字的话，可以给父元素设置。，除了 baseline 外，其他值都可以解决。如果单单解决空白问题，而不是文字对齐底端，如果父元素只有一张图片，可以给图片加。之后，文字居中了但是图片没有居中。，把子元素放置在父元素的中部。，文字就能对齐底端了。

原创 emment语法

本质使用的就是元素选择器，例如div p a标签等等。

原创 CSS扩展选择器

选中多个选择器对应的元素。一般用来设置表格的边框。语法：选择器1, 选择器2, 选择器3, … 选择器n {}

原创 AntV L7的填充图

本案例使用L7库和Mapbox GL JS绘制填充图。2. 引入组件我们导入的库和组件有：3. 创建场景在这里，我们创建基于高德地图的地图场景。4. 绘制填充图使用 fetch 函数从服务器获取数据：4.2. 定义颜色数组4.3. 创建多边形图层4.4. 创建线图层4.5. 添加图层将图层添加到场景中：4.6. 绘制填充图代码5. 演示效果

原创 CSS基本选择器

基本选择器特点通配选择器选择所有的元素元素选择器选中同种标签的元素类选择器根据元素的类进行选择id选择器根据元素的id进行选择。

原创 CSS概念及入门

CSS 的全称为：层叠样式表 ( Cascading Style Sheets )。CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。主流的布局方式:div+css。