lovewhoilove-CSDN博客

原创 Vue.js 3.0的安装及开发环境的配置

1 Vue.js安装1.1 使用cdn引入在页面的<head>标签内使用<script>标签引入即可：<script src="https://unpkg.com/vue@next"></script>1.2 使用npm安装npm即node package manager，它是一个Node.js包管理和分发工具，使用npm可以快速安装、使用和升级Vue.js。因此，我们首先需要安装Node.js，这里我们选择LTS版本，下载地址：http://

2021-11-07 11:59:59 1671

原创 3-Openlayers加载GeoServer发布的WMS服务

首先根据1-借助Node搭建OpenLayers开发环境来搭建一个项目。1 加载图层组新建一个index.html，代码如下：<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>Using OpenLayers with Parcel</title> <style> @import "no

2021-10-08 16:40:31 1135

原创 5-借助GeoServer创建图层组

我们在3-借助QGIS和Geoserver发布一个Shapefile一文中介绍过如何借助QGIS对图层进行符号化并在GeoServer中进行了发布。本文我们将发布多个图层，以展示一幅完整的地图。准备工作：将数据放置在GeoServer安装目录的data_dir目录下（我这里的路径为C:\geoserver-2.19.2\data_dir，则数据的目录为C:\geoserver-2.19.2\data_dir\zy）。首先需要创建一个数据源，即设置一个数据存储位置。如下图所示，依次点击【数据存储】→【

2021-10-08 16:07:34 1934 2

原创 4-使用GeoServer发布Shapefile时问题汇总

1 问题1：styles引用外部图片不显示的问题具体参考博客geoserver中styles引用外部png图片不显示问题解决即可，讲解的很详细。操作关键点，先基于系统内置的样式生成一个对应的模板，然后将<Graphic>标签内的内容替换即可，这里需要补充的一点是：可以添加<Size>标签用以控制图片的大小。然后将外部图片放置\data_dir\workspaces\【工作组名称】\styles\下即可，这也是解决外部图片不显示的关键操作。2 问题2：图层的中文标注显示为乱码

2021-10-08 11:01:58 482

原创 3-借助QGIS和Geoserver发布一个Shapefile

本节将用到的数据下载地址：https://docs.geoserver.org/latest/en/user/_downloads/30e405b790e068c43354367cb08e71bc/nyc_roads.zip，将其解压并放置在GeoServer安装目录的data_dir目录下（我这里的路径为C:\geoserver-2.19.2\data_dir，则数据的目录为C:\geoserver-2.19.2\data_dir\nyc_roads）。1 创建一个WorkspaceWorkspace

2021-09-27 17:31:23 576

翻译 2-了解GeoServer的Web管理界面

如下图所示，我们主要看左侧的功能菜单。以下内容主要翻译该页面内容：https://docs.geoserver.org/latest/en/user/webadmin/index.html#web-admin。1 关于和状态服务器状态：显示服务器配置参数和运行时状态的摘要。GeoServer的日志：显示GeoServer日志输出。另外两项这里不再赘述。2 数据这部分功能包含所有不同的数据相关设置的配置选项：Layer Preview：提供各种输出格式显示图层预览的链接，包括公共的

2021-09-27 15:17:37 547

原创 1-GeoServer的安装与简单使用

安装环境：Windows 10 21H1，系统5位数版本为：19043.1052。1 安装JDK首先需要安装Java运行时环境(JRE)。GeoServer需要Java 8或Java 11环境，由AdoptOpenJDK Windows安装程序提供，下载地址：https://adoptopenjdk.net/，我这里选择了8版本，点击下方按钮即可下载。这里是GeoServer官网推荐的安装包，也可以到Oracle官网下载JDK。安装则按默认设置即可，我们可以自定义安装位置（默认位置.

2021-09-27 12:19:10 6392 3

翻译 2-OpenLayers基础

MapOpenLayers的核心组件是Map(ol/Map)，它会被呈现到目标容器中(例如，包含地图的网页上的div元素)。所有的map属性都可以在构造时配置，或者使用setter方法，例如setTarget()。ViewView(ol/View)负责地图的中心、缩放级别和投影等。View是有投影的，投影决定了地图的坐标系统和地图单位。若没有指定，默认投影为Spherical Mercator (EPSG:3857)，地图单位为米。缩放选项可以指定地图分辨率。可用的缩放级别是由maxZoom(默认值

2021-09-23 18:08:24 259

原创 1-借助Node搭建OpenLayers开发环境

1 安装node软件下载地址：https://nodejs.org/en/，安装时按默认设置安装即可，也可自行查找安装教程，这里不再赘述。2 搭建开发环境首先创建一个空的文件夹，文件夹名称例如ol-demo，打开cmd或powershell（推荐使用应用商店的Windows Terminal工具），输入如下命令。mkdir ol-demo进入该文件夹:cd ol-demo安装ol包，并自动创建一个带有附加依赖库的开发环境，包括index.html和main.js，默认地，Par

2021-09-23 17:05:18 1671 3

翻译 0-OpenLayers快速入门

1 概述1借助Openlayers，我们可以很容易地在任何网页中展示动态地图，并且可以展示任何来源加载的地图瓦片、矢量数据和标记。随着OpenLayers的发展，我们可以更进一步地利用各种地理信息。OpenLayers是完全免费的开源JavaScript。OpenLayers功能特性如下：展示瓦片图层：它可以展示从OSM、Bing、MapBox、Stamen和你能找到的任何其他XYZ来源的瓦片地图。还支持OGC映射服务和无标题图层。渲染矢量图层：它可以渲染来自GeoJSON, TopoJSON,

2021-09-23 15:51:38 192

原创 ES6之Symbol数据类型

1 概述首先来看ES6引入Symbol类型的原因：ES5的对象属性名都是字符串，这容易造成属性名的冲突。例如，我们使用他人提供的对象，在位这个对象添加新方法时方法名有可能与现有方法产生冲突，而在引入Symbol类型后，原来的属性名为字符串类型，新增的则为Symbol类型，这样自然就不冲突了，这对于一个对象由多个模块构成的情况非常有用。Symbol值通过Symbol函数生成。let s = Symbol();typeof s //"symbol"2 Symbol的参数使用Symbol函数可以接受

2021-08-23 00:23:01 152

原创 ES6之数组的扩展

1 扩展运算符扩展运算符（spread）是三个点...，它的作用就好比 rest 参数的逆运算，即将一个数组转为参数序列。console.log(...[1, 2, 3]) //1 2 3console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5该运算符主要用于函数调用：function add(x, y) { return x + y;}const numbers = [4, 38];add(...numbers); // 42再举个例子：求数组中的最

2021-08-22 20:37:16 175

原创 ES6之函数的扩展

1 函数参数的默认值ES6之后，才可以为函数的参数指定默认值：如下所示，ES6之前，我们可以采用下面变通的方式为参数指定默认值：function log(x, y) {if (typeof y === 'undefined') {//避免y为空字符串而使用指定的默认值 y = 'World';} console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello',

2021-08-22 16:54:26 78

原创 ES6之变量的解构赋值

1 概述ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。举个例子就能明白上面的概念：let a = 1;let b = 2;let c = 3;//ES6允许写为：let [a, b, c] = [1, 2, 3];注：ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScrip

2021-08-20 23:44:05 152

原创为任意版本的Windows 10离线安装.net 3.5

本来在Windows 10安装.net3.5是一件很简单的事情，具体如下图所示：但前提是电脑可以联网。离线安装方法离线安装需要.net3.5离线安装包，下载地址（我设置了免积分下载哈）：https://download.csdn.net/download/lovewhoilove/21088757然后按快捷键win+x，或者在开始菜单右键，然后选择【Windows Powershell(管理员)】选项，即可以管理员权限打开powershell。注：这里用cmd或powershell都可以

2021-08-15 11:55:35 8655 3

原创 JavaScript中的异步操作-学习笔记

1 关于异步操作的一些概念虽然JavaScript引擎拥有多个线程，但是单个脚本只能在一个线程上运行，也就是说，JavaScript只能同时执行一个任务，其他的任务则必须在当前任务后面排队等待，这被称之为单线程模型。在JavaScript中，程序里的任务可以被分为两类：同步任务和异步任务。同步任务（synchronous）：即在主线程上执行的任务，并且之所以同步，是因为只有执行完前一个任务才能执行后一个任务。异步任务（asynchronous）：说白了就是被JavaScript引擎放进任务队

2021-08-11 18:04:00 881

原创 JSON数据处理方法汇总

1 读取JSON1.1 利用按钮的click事件读取实现代码如下：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Read Json</title></head><body><input type="file" id="jsonFileUpload" accept=".json"&g

2021-08-08 17:48:00 2890 1

原创 JavaScript面向对象之继承

1 原型对象(prototype)继承的作用：B对象通过继承A对象，就能直接拥有A对象的所有属性和方法。我们在JavaScript面向对象之对象-学习笔记一文中提到JavaScript对象是基于构造函数（constructor）与原型链（或原型对象，英文为prototype）的。没错，对象需要借助构造函数来创建，而继承则需要借助原型对象来实现。1.1 原型对象的作用直接举例说明原型对象的作用吧：function Cat(type) { this.type = type;}Animal.p.

2021-08-04 21:07:30 212

原创 JavaScript中的this关键字-学习笔记

简单地说，this就是属性或方法当前所在的对象。1 this的使用场合this主要有以下几种使用场合：全局环境：全局环境下使用this，则this指定就是顶层对象window。测试如下：this === window //truefunction f() { console.log(this === window);}f() //true构造函数：构造函数中的this，指的是实例对象。具体请参考JavaScript面向对象之对象-学习笔记一文的内容。对象的方法：若对

2021-08-01 16:27:39 103

原创关于复杂网络的一些基础概念

1 度（Degree）1在图论中，一个节点在图中的度 (degree)是与这个节点相连接的边的数目。给定一个图G=(V,E)G=(V,E)G=(V,E),其度求和公式为：∑v∈Vdeg⁡(v)=2∣E∣ .{\displaystyle \sum _{v\in V}\deg(v)=2|E|\,.}v∈V∑deg(v)=2∣E∣.对于有向图：节点的入度是指进入该节点的边的条数；节点的出度是指从该节点出发的边的条数。度为0的顶点称为孤立节点。度为1的节点称为叶节点或端点，与该节点相关

2021-07-31 16:52:24 7008 6

原创解决安装python包时出现的“ImportError: cannot import name SourceDistribution“错误

在进行一番搜索后，发现产生这个问题的原因竟然时pip 20.0版本的bug，噗????，具体参考的这篇文章：https://www.cnblogs.com/dhcn/p/12233120.html，解决办法就是手动升级pip，于是我便打开pip的官网：https://pypi.org/project/pip/，然后大致看了看说明，说是从21.0版本后就不再支持python2了，我用的时python2.7，那就只能下载21版本之前的最新版了。点击窗口左侧的【Release history】选项即可，去找找

2021-07-30 11:33:06 2187

原创 JavaScript面向对象之对象-学习笔记

1 对象与构造函数JavaScript对象是基于构造函数（constructor）和原型链（prototype）的，在JavaScript这门语言中并没有“类”（class）这个概念。那么什么是对象呢？简单地说，对象就是现实世界中的实物的抽象。那对象又如何被创建呢？首先我们将现实世界中的实物抽象为模板——构造函数，具体来说，就是用属性来表示实物的某些特征，用方法来表示实物的某些行为，然后利用这个模板就可以创建实例对象了。下面来举个实例，例如：我们将一种交通工具抽象为一个构造函数Vehicle，内部.

2021-07-29 22:20:58 203

原创 JavaScript中的console对象及其方法-学习笔记

1 console对象与浏览器Console面板console对象是JavaScript的原生对象，而console对象的浏览器实现，已被包含在浏览器自带的开发工具当中。如下如所示为浏览器的Console面板，又被称为控制台。建议：推荐直接使用ctrl+shift+I或者ctrl+shift+J，像F12容易和电脑的功能键冲突，需要辅助Fn键才能使用。控制台的用途主要有以下两点：定位错误：这里可以显示代码运行时的输出信息，代码运行发生错误时，会显示具体是哪一行代码出现的错误；作为一个命令.

2021-07-28 00:47:18 835 1

原创 JavaScript错误处理-学习笔记

1 Error及其派生对象1.1 Error对象JavaScript在解析或运行时，一旦发生错误，引擎就会抛出一个错误对象。JavaScript原生提供了Error构造函数，所抛出的错误都是Error构造函数的实例。var err=new Error('出错了');err.message //"出错了"以上示例中，参数为message属性，这个参数是必须的。除此之外，还提供了name（错误名称）属性和stack（错误的堆栈）属性，但这两个属性是非标准的，不是每种实现都有。1.2 Error派.

2021-07-25 23:18:59 340 3

原创 JavaScript数据类型转换-学习笔记

JavaScript中的各种运算符对数据类型是有要求的，如果运算符发现，运算子的类型与预期不符，就会自动转换类型。例如：减法运算符预期左右两侧的运算子应该是数值，如果不是，就会自动将它们转为数值。由于自动转换是以强制转换的为基础的，我们先来看强制转换。1 强制转换强制转换：主要是指使用Number()、String()和Boolean()三个函数，手动将各种类型的值分别转换成数字、字符串或者布尔值。使用Number函数：测试如下使用String函数：可以将任意类型的值转化成字符串。转换.

2021-07-25 18:07:29 133 1

原创 JavaScript运算符-学习笔记

1 算数运算符JavaScript总共提供了10个算数运算符，用来完成基本的算术运算：加/减/乘/除法运算符（4个）、余数运算符、指数运算符、自增/减运算符（2个）以及数值运算符、负数值运算符。1.1 加法运算符1.1.1 非对象类型值相加前4种运算符减、乘、除运算符执行的是单纯的数学运算，这里重点是加法运算符，常见用法有：数值相加非数值相加：两个布尔值或数值与布尔值相加，布尔值会自动转换为数值，然后相加。true+true //21+true //2连接字符串：非字符串.

2021-07-25 16:34:25 294 1

原创 JavaScript基本数据类型之数组-学习笔记

1 基本概念及语法数组（array）是按次序排列的一组值，每个值的位置都有编号（即从0开始依次编号），整个数组用方括号表示。例如：var arr=['a', 'b', 'c'];数组也可以先定义后赋值。任何类型的数据都可以放入数组。若数组的元素还是数组，就形成了多维数组。数组本质上是一种特殊的对象，这点通过typeof运算符的返回类型为object就可以看出来。数组其实是有键名的，它的键名和编号是一致的，是按次序排列的一组整数（0，1，2, ...），可以借助Object.keys()方法进.

2021-07-23 18:24:43 312 2

原创 JavaScript基本数据类型之函数-学习笔记

1 基本概念及语法简单地说，函数就是一段可以反复调用的代码块。1.1 函数的声明函数的声明（Function Declaration）有3种方法：function命令：function命令声明的代码区块就是一个函数。写法如下：function 函数名(参数...){ 函数体}函数表达式：采用的是变量赋值的写法，声明的是一个匿名函数，function命令后不带函数名，且大括号末尾需加上分号（注意：上面第一种方法声明的函数末尾则不用加分号）。由于等号右侧只能放表达式，因此匿.

2021-07-23 16:46:03 203

原创 JavaScript基本数据类型之对象-学习笔记

1 基本概念及语法对象（Object）是JavaScript最重要的数据类型。简单地说，对象就是一组“键值对”的集合，而且它是一个无序的复合数据集合。1.1 基本语法如下代码所示：大括号就定义了一个对象，并被赋值给一个变量obj。该对象内部有两个键值对（或叫成员），键和值之间用冒号分隔，两个键值对之间用逗号分隔。注：最后一个键值对后面加不加逗号都可以，建议省略。var obj={ foo:'Hello', bar:'World'}上述obj对象的键名默认都是字符串（E.

2021-07-22 20:21:12 287

原创 JavaScript基本数据类型-学习笔记

JavaScript数据类型共有6种：数值（number）、字符串（string）、布尔值（boolean）、undefined、null、对象（object）。注：ES6新增了第7种类型Symbol。1 基本数据类型1.1 数值数值包括整数和小数（或者叫浮点数）两种，例如1和3.14。实际上，在JavaScript内部，所有的数字都是以64位浮点数形式存储，即便整数也是如此。注：某些运算只有整数才能完成，此时 JavaScript 会自动把64位浮点数，转成32位整数，然后再进行运.

2021-07-22 00:55:46 371 2

原创 JavaScript基础语法-学习笔记

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2021-07-20 23:48:58 3020

lovewhoilove