2021-4月中旬
作者：互联网
layui
页面层是在里面写html代码
iframe层是另外一个html页面
js
1.拼接数组和对象
首先一个最好用的方法，就是扩展运算符...，对象和数组都可以用的
[...arr1 , ...arr2 , ...arr3];
{..obj1 , ...obj2 , ...obj3}
这是ES6的方法，下面介绍ES5的方法，这个就不是共用的了
首先是数组的拼接方法concat
arr1.concat(arr2,arr3)
再就是对象的拼接方法：
Object.assign(obj1,obj2,obj3)
————————————————
版权声明：本文为CSDN博主「Zhou_xiaoqian」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Zhou_xiaoqian/article/details/79867577
2.对象操作
var a={"id":1,"name":"danlis"};
//添加属性
a.age=18;
console.log(a);
//结果：Object { id: 1, name: "danlis", age: 18 }
//修改属性
a.age="我怎么知道";
//结果：Object { id: 1, name: "danlis", age: "我怎么知道" }
delete a.age;
//结果：Object { id: 1, name: "danlis" }
3.页面传值
localStorage方式
视频https://www.bilibili.com/video/BV1Ni4y1A7ow?from=search&seid=17301510451121977814
前端的数据库，存储在浏览器中，大概有5M的空间
AAAAAA页面
<body>
<h1>aaa</h1>
</body>
</html>
<script>
let x = [123,344534,24323]
let duixiang = {name:"zhangsan"}
localStorage.setItem('xxx',x)
localStorage.setItem("duixiang",duixiang)
</script>
BBBBBB页面
<body>
<h1>BBB</h1>
</body>
</html>
<script>
// localStorage.removeItem('xxx')
console.log(localStorage.getItem('xxx'))
console.log( localStorage.getItem('duixiang'))
console.log(localStorage.length)
localStorage.clear()
console.log(localStorage.length)
</script>
4.JS 中判断空值 undefined 和 null
var exp = undefined;
if (typeof(exp) == "undefined")
{
alert("undefined");
}
var exp = null;
if (!exp && typeof(exp)!=”undefined” && exp!=0)
{
alert(“is null”);
}
5.setTimeout和setInterval
settimeout 里面全部写成函数的形式，其他会出现乱七八糟的不知道什么原因的问题
setTimeout(()=>console.log(1),1000);
6.添加标签
function load(src, resolve) {
let script = document.createElement("script");
script.src = src;
script.onload = resolve;
document.body.appendChild(script);
}
load("js/hd.js", () => {
load("js/houdunren.js", () => {
houdunren();
load("js/a.js", () => {
houdunren();
});
});
});
7.任务优先级
宏任务，微任务，主线程
宏任务：任务队列里面的,异步的
微任务：promise里面的
主线程：同步的任务
主线程>微任务>宏任务
promise里面的代码也是主任务里面的，then回调函数才是微任务列表
setTimeout(() => {
console.log("setTimeout");
}, 0);//异步，宏任务
new Promise(resolve => {
resolve();//同步
console.log("promise");//同步
}).then(value => console.log("成功"));//异步，微任务
console.log("后盾人");//同步
8.promise基本语法
//状态改变执行then方法
// 最开始的样子,一个promise，后面跟两个then，成功的回调和失败的回调
// 这里没有成功还是失败，会一直等
new Promise((resolve, reject) => {
})
.then(value => {
console.log(value)
})
.then(reason => {
console.log(reason);
});
//成功失败，只能写一个，如果都写执行上面的状态，并且不再执行下面的状态以及他的回调
new Promise((resolve, reject) => {
// resolve("一瓶可乐");
reject("涨价了，买不起了");
})
.then(value => {
console.log(value)
})
.then(reason => {
console.log(reason);
});
//如果只关注成功或者失败，可以只写一个then，但是两个状态都要接收，可以填写null，第个参数成功，第二个参数失败
new Promise((resolve, reject) => {
// resolve("一瓶可乐");
reject("涨价了，买不起了");
})
.then(null, a => {
console.log(`处理了失败的状态,${a}`);
})
// .then(null, reason => {
// console.log(reason);
// });
//捕获错误
.catch(error => {})
//不论成功还是失败，最后都会执行的
.finally(() => {
loading.style.display = "none";
});
//给promise 加上return 返回的也是一个promise对象，就可以在最后接着写then成功的回调了，这个then是上一个promise的回调，就不是reject失败的时候的回调了，需要用catch接收错误信息
9.函数给默认值
function interval(delay=1000){
return new Promise((resolve,reject)=>{
let id = setInterval(()=>{
console.log(1)
},delay)
})
}
interval()//这里不给值，他会使用默认的1000，每隔1000mm输出1
interval(100)//这里给值，他会用这里给的，不用默认值，每隔100mm输出1
10.多多练习
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#div {
width: 200px;
height: 200px;
background-color: #bfa;
position: absolute;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
function interval(delay = 1000, callback) {
return new Promise((resolve, reject) => {
let id = setInterval(() => {
callback(id, resolve)
}, delay)
})
}
interval(100, (id, resolve) => {
const div = document.getElementById("div");
let left = parseInt(window.getComputedStyle(div).left);
div.style.left = left + 10 + "px";
if (left > 200) {
clearInterval(id);
resolve(div);
}
}).then(div => {
return interval(100, (id, resolve) => {
let width = parseInt(window.getComputedStyle(div).width);
div.style.width = width - 10 + "px";
if(width<=40){
clearInterval(id);
resolve(div);
}
})
}).then(div=>{
div.style.backgroundColor = 'red'
})
</script>
</body>
</html>
11.async await
async 相当于 new promise
await 相当于 then
await 也是一个微任务
await 只能在 async函数里面才能写
12.await同时请求
function p1() {
return new Promise(resolve => {
setTimeout(() => {
resolve("houdunren");
}, 2000);
});
}
function p2() {
return new Promise(resolve => {
setTimeout(() => {
resolve("hdcms");
}, 2000);
});
}
async function hd() {
let res = await Promise.all([p1(), p2()]);
console.log(res);
// let h1 = p1();
// console.log(h1);
// let h2 = p2();
// let h1value = await h1; //then
// let h2value = await h2;
// console.log(h1value, h2value);
// console.log(h2);
// setTimeout(() => {
// console.log(h1, h2);
// }, 2000);
}
hd();
13.很好的执行顺序的问题，宏任务微任务，promise async await
async function async1() {
console.log('async1 start');
await async2();
console.log('asnyc1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(() => {
console.log('setTimeOut');
}, 0);
async1();
new Promise(function (reslove) {
console.log('promise1');
reslove();
}).then(function () {
console.log('promise2');
})
console.log('script end');
promise、async/await
首先，new Promise是同步的任务，会被放到主进程中去立即执行。而.then()函数是异步任务会放到异步队列中去，那什么时候放到异步队列中去呢？当你的promise状态结束的时候，就会立即放进异步队列中去了。
带async关键字的函数会返回一个promise对象，如果里面没有await，执行起来等同于普通函数；如果没有await，async函数并没有很厉害是不是
await 关键字要在 async 关键字函数的内部，await 写在外面会报错；await如同他的语意，就是在等待，等待右侧的表达式完成。此时的await会让出线程，阻塞async内后续的代码，先去执行async外的代码。等外面的同步代码执行完毕，才会执行里面的后续代码。就算await的不是promise对象，是一个同步函数，也会等这样操作
14.async await promise 定时器效果，每隔一秒输出数组中的数字
let arr = [1,2,3,4]
async function sleep() {
return new Promise(resolve => {
setTimeout(() => {
resolve()
}, 1000)
})
}
(async () => {
for(let i in arr){
await sleep ();
console.log(arr[i]);
}
})()
idea
自定义模板
https://majing.io/posts/10000009872000
WebStorm提供了Live Template的功能，可以在JavaScript模块下新建console.log()的快捷方式。
File -> Settings -> Editor -> Live Templates
在JavaScript下新建模板，如设定缩写为.log，模板如下：
console.log($END$);
效果
QGIS
查看wkid
mars3d
1.配置wfs图层
在config.json里面
{
"id": 600,
"name": "沧州模型数据二维",
"type": "group"
},
{
"pid": 600,
"name": "管道线",
"type": "wms",
"url": "http://120.27.60.10:8765/geoserver/dixiaguandao/wms",
"layers": "dixiaguandao:gd_line",
"crs": "EPSG:4326",
"offset": {
"x":116.960,
"y":38.291,
"z":4000
},
"parameters": {
"transparent": "true",
"format": "image/png"
},
"showClickFeature": true,
"visible": false,
"flyTo": false
},
//其中offset用于图层双击跳转
图层的双击跳转在mannageLayers/widget.js里面
centerAt: function(e) {console.log(e);
if(!e.originalCenter)
viewer.mars.centerAt({ "y": e.config.offset.y, "x": e.config.offset.x, "z": e.config.offset.z});
else
e.centerAt();
},
//正常是只有e.centerAt();的
//他是根据e里面的originalCenter这个属性飞的，wfs对象里没有这个，所以做个判度自己飞了。
<se:MinScaleDenominator>25</se:MinScaleDenominator>
<se:MaxScaleDenominator>50000</se:MaxScaleDenominator>
如：这里设置的1：25就不再显示二维地图
2维查询，3维呈现
GEOSERVER
Web Map Server(WMS) , Web Feature Server(WFS) ,Web Coverage Server(WCS) 区别
WMS（Web 地图服务）能够根据用户的请求返回相应的地图（包括PNG，GIF，JPEG等栅格形式或者是SVG和WEB CGM等矢量形式）。WMS支持网络协议HTTP，所支持的操作是由URL定义的。
WFS（Web 要素服务）支持对地理要素的插入，更新，删除，检索和发现服务。该服务根据HTTP客户请求返回GML数据。
WFS对应于常见桌面程序中的条件查询功能，WFS通过OGC Filter构造查询条件，支持基于空间几何关系的查询，基于属性域的查询，当然还包括基于空间关系和属性域的共同查询。
WCS（Web地理覆盖服务）提供的是包含了地理位置信息或属性的空间栅格图层，而不是静态地图的访问。
(1) WMS服务与WFS服务的区别
wms是web地图服务，wfs 是web要素服务。
wms 能够根据用户的请求返回相应的地图（包括PNG，GIF，JPEG等栅格形式或者是SVG和WEB CGM等矢量形式）。
wfs支持对地理要素的插入，更新，删除，检索和发现服务。
二者的区别，简单的说，wms是基础，是显示地图的，wfs是高级一点的，在前者基础之上可以实现对地图数据的增删改查等操作。
标签：resolve,console,log,中旬,await,promise,2021,async 来源： https://www.cnblogs.com/zcbj588/p/14670377.html