绮逾依-优快云博客

原创 OpenLayers6学习笔记（四）—— 使用XYZ的方式加载高德地图

OpenLayers提供ol.source.XYZ类来加载在线瓦片地图数据源，通常情况下，要加载不同的在线瓦片地图源，只需要更改ol.source.XYZ的参数url即可。高德在线瓦片地址： http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&

2021-11-04 14:29:04 5234

原创 OpenLayers6学习笔记（三）—— 瓦片地图基础知识

一. 数据加载 OpenLayers的地图数据通过图层（Layer）进行组织渲染，通过数据源（Source）设置具体的地图数据来源。Layer可以看作渲染地图的容器，具体的数据需要通过Source设置，Source和Layer是一对一的关系，有一个Source必然需要有一个Layer。地图数据根据数据源（Source）可分为Image、Tile、Vector三大类型的数据源，对应设置到地图图层（Layer）的Image、Tile、Vector三大类型的图层上，其中矢量图层Vector通过样式（Style

2021-11-04 09:42:27 3010

原创 OpenLayers6学习笔记（二）—— 地图控件

一. 控件简介归属控件（Attribution）：展示地图资源的版权或归属，默认加入到地图中。全屏控件（FullScreen）：控制地图全屏展示。坐标拾取控件（MousePosition）：显示鼠标所在地图位置的坐标。鹰眼控件（OverviewMap）：地图的一个概览图。比例尺控件（ScaleLine）：地图比例尺。旋转控件（Rotate）：控制地图旋转，默认加入到地图中，alt+shift+左键旋转地图。缩放控件（Zoom）：控制地图缩放，默认加入到地图中。滑块缩放控件（ZoomSlid

2021-11-03 09:26:16 2208

原创 OpenLayers6学习笔记（一）—— 初始化一个地图

一. OpenLayers概述 Map、Layer、Source和View是OpenLayers框架体系中的核心类，几乎所有的动作都围绕这几个核心类展开，以实现地图的加载与其相关操作。在OpenLayers的体系框架中：把整个地图看作一个容器（Map），核心为地图图层（Layer），每个图层有对应的数据源（Source），并且由地图视图（View）控制地图表现。地图容器上还支持一些与用户交互的控件（Control和Interaction），另外，OpenLayer还支持事件机制。二. 简单的地图展示

2021-11-02 10:59:01 1058

原创 JS笔记——数据类型

一. 数据类型 1.数据类型指的就是字面量的类型，在JS中一共有六种数据类型： String：字符串 Number：数值 Boolean：布尔值 Null：空值 Undefined：未定义 Object：对象 2.其中String、Number、Boolean、Null、Undefined属于基本数据类型，而Object属于引用数据类型 3. String字符串在JS中字符串需要使用引号引起来 2.使用双引号或单引号都可以,但是不要混着用 3.引号不能嵌套，双引号中不能放双引号，单引号中不能放单引号

2020-08-24 16:18:18 155

原创三列布局

一. 三列布局的要求两边固定，中间自适应中间列要完整显示中间列要优先加载二. 三列布局的实现圣杯布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume

2020-08-19 15:34:50 359

原创 CSS笔记——flex

一. flex简介 flex是CSS中的又一种布局手段，主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变弹性容器 (1) 要使用弹性盒，必须先将一个元素设置为弹性容器 (2) 可以通过display来设置弹性容器 ①设置为块级弹性容器 —— display:flex ②设置为行内的弹性容器 —— display:inline-flex 弹性元素 (1) 弹性容器的子元素是弹性元素 (2) 一个元素可以同时是弹性容器和弹性元素 ...

2020-08-16 14:48:45 165

原创 CSS笔记——定位

一. 定位（position）定位就是将指定的元素摆放到页面的指定位置，通过定位可以任意的摆放元素通过position属性来设置元素的定位 (1) static: 元素没有开启定位（默认值） (2) relative: 开启元素的相对定位 (3) absolute: 开启元素的绝对定位 (4) fixed: 开启元素的固定定位（也是绝对定位的一种） (5) sticky：开启元素的粘滞定位当开启了元素的定位(position属性值是一个非static的值)时，可以通过left、right、top、b

2020-08-07 09:01:58 245

原创 CSS笔记——浮动

一. 浮动块元素在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以通过float来使元素浮动，从而脱离文档流可选值： (1) none: 元素默认在文档流中排列（默认值） (2) left: 元素会立即脱离文档流，向页面的左侧浮动 (3) right: 元素会立即脱离文档流，向页面的右侧浮动当为一个元素设置浮动以后（float属性是一个非none的值），水平布局的等式便不需要强制成立，元素会立即脱离文档流，不再占用文档流的位置。元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边

2020-08-06 10:04:23 215

weixin_44030304的博客