ANNENBERG的博客

原创 WebWorkers在项目中的使用案例

无论是在主线程关闭 worker，还是在 worker 线程内部关闭 worker，worker 线程当前的 Event Loop 中的任务会继续执行。在 worker 线程内部关闭 worker，不会直接断开与主线程的连接，而是等 worker 线程当前的 Event Loop 所有任务执行完，再关闭。区别是，在主线程手动关闭 worker，主线程与 worker 线程之间的连接都会被立刻停止，即使 worker 线程当前的 Event Loop 中仍有待执行的任务继续调用。方法，主线程还是能通过监听。

原创 cesium地形高程渲染区域配色

【代码】cesium地形高程渲染区域配色。

原创 vue-drag-resize插件介绍

【代码】vue-drag-resize插件介绍。

原创 ol加载CGCS2000服务、投影注册

2000国家大地坐标系，是中国当前最新的国家大地坐标系，英文名称为China Geodetic Coordinate System 2000，英文缩写为CGCS2000。2000国家大地坐标系的原点为包括海洋和大气的整个地球的质量中心；

原创 vuedraggable 选项介绍

group配置拖拽分组。多个列表可以共享同一个分组，允许它们之间的项目互相拖拽。group: { name: 'shared', // 分组的名称 pull: 'clone', // 是否允许拖拽项从该列表中被拖出 put: true // 是否允许从其他列表中拖拽项放入此列表 }name: 用于标识该拖拽组，其他列表可以通过相同的名称与之共享。pull: 指定当前列表是否允许拖拽项从列表中移除。可选值有：'clone': 允许拖拽项被克隆并拖出列表。true: 允许拖拽项被移除。false。

原创 turf计算点与面两侧之间的夹角

【代码】turf计算点与面两侧之间的夹角。

原创 openlayers地图事件

14. tileloadstart：当地图开始加载瓦片时触发该事件。13. rendercomplete：当地图渲染完成时触发该事件。15. tileloadend：当地图加载瓦片结束时触发该事件。10. rotateend：当地图旋转结束时触发该事件。2. dblclick：当用户双击地图时触发该事件。7. zoomend：当地图缩放结束时触发该事件。8. moveend：当地图移动结束时触发该事件。9. resize：当地图大小改变时触发该事件。1. click：当用户单击地图时触发该事件。

原创 openlayers地图缓存添加

/通过安装包localforage（npm install localforage）或https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js。

原创 node14版本安装cnpm-淘宝镜像新地址

【代码】node14版本安装cnpm-淘宝镜像新地址。

原创 鼠标滚动实现动态菜单切换

【代码】鼠标滚动实现动态菜单切换。

原创 页面广告飘窗

【代码】页面广告飘窗。

原创 cesium本地文档-天空盒-arcgis切片404-服务查询

/ 总的来说，vite-plugin-cesium 简化了在 Vite 项目中使用 Cesium 的流程，使得开发者更容易地集成 Cesium 地图引擎到他们的项目中，并且提供了一些优化功能来改善用户体验。它简化了在 Vite 项目中使用 Cesium 的配置和引入过程。// 处理 Cesium 的依赖关系：Cesium 本身有一些依赖关系需要处理，vite-plugin-cesium 可以帮助自动处理这些依赖，确保 Cesium 在 Vite 项目中正常运行。4.arcgis切片404问题。

原创 vue3新功能-Teleport

将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。异步组件加载等待过程中，优先显示一些其他的内容。例:将组件dialog添加到body下面。通过函数实现以上模板语法。

原创 获取路径跳转参数key，value

获取路径跳转参数key，value。

原创 截图与打印

【代码】截图与打印。

原创 截图并将图片导出为pdf

【代码】截图并将图片导出为pdf。

原创 nvm进行node版本管理

原创 openlayers绘制范围圆

drawCircleByStation参数是坐标【lng,lat】

原创 canvas绘制并导出图片（画笔）

【代码】canvas绘制并导出图片（画笔）

原创 JavaScript 中距离概念 ：clientX、clientY、offsetX、offsetY、screenX、screenY

原创 echarts图例对齐

富文本不生效，是没有设置lineHeight。

原创 gcoord 转坐标

npm install gcoord --saveimport gcoord from 'gcoord';

原创 过滤数组对象中某一相同属性、求和、个数、返回新数组；数组对象转对象

【代码】过滤数组对象中某一相同属性、求和、个数、返回新数组。

原创 echarts-柱状图左右滚动条

/filter过滤掉窗口外的数据，none不过滤数据，只改变数轴范围。// start: 1, // 左边在 10% 的位置。startValue:0, //从0个柱子开始，也就是最起始的地方。// fillerColor: '#1890ff',//滑块颜色。backgroundColor: '#ddd',//滚到颜色。endValue:5, //到第6个柱子结束。realtime: true,//实时更新。handeSize: 0,//手柄。

原创 npm的registry

npm info underscore （如果上面配置正确这个命令会有字符串response）3.使用nrm管理registry地址。c.切换npm registry地址。b.添加registry地址。a.通过config命令。

原创 echarts3D / 2D

【代码】echarts3D / 2D。

原创 elementui tree懒加载-图层树节点添加

【代码】elementui tree懒加载。

原创 npm安装包报错，重装强制清除安装痕迹

【代码】npm安装包报错，重装强制清除安装痕迹。

原创 样式-渐变色

0deg可以理解为一个垂直向上的箭头，渐变效果从底部到顶部；90deg顺时针旋转90，渐变从左侧指向右侧.以此类推180deg,360deg,-90deg.....linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，

原创 vue关闭浏览器

/谷歌等其他浏览器。

原创 视频播放器 之vueplayer和flv.js

如果需要播放m3u8，还需安装npm i videojs-contrib-hls -S；如果需要播放rtmp，还需安装npm i videojs-flash -S；ps：autoplay: true 不能自动播放可能是窗口设置太小；当时安装的最新版（6.0.0）引入是报错，后改为。项目接入了海康的flv实时视频流（摄像头监控）

原创 arcgis图例获取

tongliao_jsc/serverUrl/arcgis/rest/services/keerqin/211124矢量图_生态红线与保护地_自然保护地/MapServer/0/images/8df07ef7664bd0e0b3f480c947ca2be6。后面是从MapServer?

原创 echarts实例的清空与销毁-clear/dispose

使用场景：当echarts图表的数据是动态更新然后渲染图表时，哪怕我们使用watch去监听了数据的变化，已经拿到了更新的数据，但是图表却没有进行相应的渲染，clear或dispose一下。内存溢出：当程序运行时需要的内存超出了当前应用系统的剩余内存时，就造成了内存溢出的情况，直观表现就是——卡死。dispose类似于v-if，它是将echarts对象清理了，然后重新构建echarts对象。echarts.clear()是清空当前实例，会移除实例中所有的组件和图表。

原创 深度样式的

在vue-cli3编译时，/deep/的方式会报错或者警告，导致变异报错。这个时候用::v-deep。建议平时使用第二种方式，/deep/在某些时候会报错，::v-deep更保险并且编译速度更快。style使用css的预处理器(less， sass， scss)的写法如下。style为css时的写法如下。第二种::v-deep。

原创 谷歌本地调试跨域

3、在目标输入框尾部加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData。1、在电脑上新建一个目录（任意位置） 例如 C:\MyChromeDevUserData（如果没有该文件夹）2、复制一个谷歌快捷方式用于调试，右键点击谷歌浏览器，选择属性；新版浏览器跨域设置（版本号49之后的跨域设置）（如果末尾有引号，把它放到引号外面）

原创 获取polygon中心点

【代码】获取polygon中心点。

原创 ES6的symbol及es2021

1.es6 symbol唯一性为对象添加新的方法，防止覆盖原方法，所以需要一个独一无二的数据类型symbola>Symbol('a')参数a作为一种修饰，用去区分b>转为字符串和布尔值String(Symbol())/Boolean(Symbol())c>作为对象的属性时，三种书写方式：let mySymbol = Symbol();c-1>let a = {}; a[mySymbol] = 'Hello!';c-2>let a = { [my...

原创 每日一题js

#<100 return后面不能换行 箭头函数返回对象需要包裹，防止对象的{}与函数{}冲突 let nums=(a,b)=>{ if(a>b) console.log('a is bigger') else console.log('b is bigger') return a+b } console.log(nums(3,2)); console.log(nums(1,2)); /*return后面不能换

原创 js小技巧（数组处理）

1、你需要过滤掉错误值吗？这个技巧肯定会帮助你摆脱错误值，例如 False、“ ”、0、undefined null。查看下面的示例代码以更好地理解。//example codeconst array = [1, 0, false, "", 2, null, 3]const farray = array.filter(Boolean)console.log(farray) // [1, 2, 3]2、去除重复我们都在 JavaScript 编程中遇到过重复值，最常用的摆脱它们的方法是将 i

原创 ol属性查询-json查询和arcgisserver服务查询及服务过滤、wms属性查询

属性查询服务接口查询