ANNENBERG的博客

原创 vue3新功能-Teleport

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

原创 vue3 21 数据大屏scale

在template标签上做遍历的好处是，标签不会渲染到页面。40.根据菜单动态生成路由，将路由放到store里。

原创 获取路径跳转参数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服务查询及服务过滤

属性查询服务接口查询

原创 wkt、geojson转换、二三维服务地址转换

1.wkt、geojson转换、二三维服务地址2.三维服务地址转换为二维使用xyz getMAP?x={TileCol}&y={TileRow}&l={TileMatrix}&styleId=默认&tilesize=256&ratio=1&tilesize=256二维：Tilematrix={z}&Tilecol={x}&TileRow={y}

原创 前端代码优化总结

前端代码优化

原创 浅拷贝深拷贝

数组类型还可以使用concat()方法 arr1 = arr.concat();

原创 网页背景置灰

【代码】网页背景置灰。

原创 改变地图背景色，见天地图

【代码】改变地图背景色，见天地图。

原创 elementui样式不生效

在main.js中引入js和css样式 挂载为vue的插件,如果这几步都没有问题,但是element的样式还是不显示!可以看一下vue.config.js文件中的css配置项,改成true。

原创 openlayers 图层刷新问题

图层remove在add之后,并未发生新的网络请求。已知地图缩放级别并未发生改变，窗口也没有，所以此时的gis数据请求的参数是已经被缓存起来了，所以直接从缓存中取出数据。ps:试了刷新source、改变zoom效果都不是很，layer.getSource().refresh();map.getVIew().setZoom(12)addLayer时随机添加额外的无效参数，例如设置一个属性layerid值。图层编辑之后，重新加载图层，刷新不成功的问题。...

原创 vue-自定义指令设置及常用自定义指令

Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过方式注册全局指令。然后在入口文件中进行Vue.use()调用。批量注册指令，新建文件在main.js引入并调用下面分享几个实用的 Vue 自定义指令v-copyv-debouncev-emojiv-LazyLoad。...

原创 ol加载离线切片16进制

代码】ol加载离线切片16进制。

原创 滚动播报、el-scrollbar

滚动播报及el-scrollbar