weixin_45162984的博客

原创 【leaflet中实现区块hover突出的伪3d效果】

leaflet-extrusion 插件摘要 leaflet-extrusion 是一个基于 Leaflet 的 GeoJSON 3D 可视化插件，可将 2D 多边形要素渲染为具有高度感的立体效果。支持 Polygon 和 MultiPolygon 类型，通过构建顶面、底面和侧面模拟挤出效果。提供丰富的自定义选项，包括颜色、透明度、深度、hover 动画等交互效果。安装简单，直接引入 JS 文件即可使用。该插件采用 SVG 渲染，通过坐标转换和样式控制实现视觉上的 3D 效果，适合需要在地图上展示建筑高度或

原创 【Leaflet 的 GeoJSON 图层叠加扩展】

Leaflet 的 GeoJSON 图层叠加扩展，支持通过多层偏移、模糊与渐变效果创建“立体叠加”视觉效果。适用于 Polyline/Polygon 等 GeoJSON 线面数据。

原创 【leaflet在给定 GeoJSON 矩形/多边形图层上生成网格线】

在 GIS 应用开发中，多边形网格生成是一个常见需求。本文将结合 Leaflet 地图库和 Turf.js 空间分析库，讲解如何实现多边形内的网格生成。将多边形看作一个坐标系，在x，y轴上间隔一定距离画一根线看起来就像是网格了，再取坐标系的网格线与多边形相交部分。

原创 Leaflet.Canvas-Markers 交互错位问题

在使用marker标记使用了iconAnchor属性后 图标的交互范围会发生偏移，修改src/plugin/leaflet.canvas-markers.js。如需修改缩放动画，github已经有解决方案。修改 _addMarker 方法。修改_drawImage 方法。修改 _redraw 方法。

原创 vue2项目中可选链报错

这是需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中。注意上面信息，错误来源是 node_modules/@open-wc模块下的文件。这个时候还需要在vue.config.js中添加如下配置,添加所有报错的模块。在babel.config.js中添加如下配置。这个时候还可能会报如下错误。这样就可以正常运行了。

原创 vue2项目 运行 import.meta 报错

void 0 : _import$meta.url)这一句代码中，是因为使用了 import。低版本的node环境不支持。在vue2老项目中，运行时报错，错误定位在 defined((_import。在vue.config.js中添加配置。

原创 解决无catch回调promise失败会导致程序报错问题

注意使用场景，因对失败情况做统一处理，避免开发过程中 因失败情况导致一些错误难以排查。对与以上使用遇到的问题，对promise进行了再次封装。使用 myPromise 重新封装请求。此时请求失败控制台会有以下报错。平时我们封装的api请求。你必须对请求失败做处理。

原创 Echarts 点击空白位置，获取点击的数据索引

echartsInstance.getZr()获取点击位置。

原创 vue跑马灯

【代码】vue跑马灯。

原创 typescript Constructor Set requires ‘new‘

使用typescript的class继承时报错 “构造函数集需要’new’”只需要在tsconfig.json文件中添加以下配置即可。

原创 浏览器预览pdf(无须下载插件)

使用浏览器自带的预览功能。

原创 three + cesium 深度融合

three + cesium 深度融合，并实现鼠标对three中的操作

原创 vue + cesium项目配置

vue+cesium 项目配置

原创 flexble.js自适应布局

flexble.js自适应布局一，flexible.js 的使用方式：（一），引用方式（二），flexible.js原理（三），把视觉稿中的px转换成rem一，flexible.js 的使用方式：github地址：https://github.com/amfe/lib-flexible官方文档地址：https://github.com/amfe/article/issues/17本文中有部分内容引至上面这个文档。（一），引用方式1，引用cdn地址<script src="http://g

原创 vue-cli代理服务器

vue-cli代理服务器配置详解在vue.config.js中写如下配置module.exports = { devServer: { proxy: { // /api为代理服务器前缀，例如项目中的请求地址为http://location:8080/api+参数 '/api': { target: '<url>', // 需要请求服务器地址 pathRewrite: {'^/api',''}, // 将请求地址中api替换为空

原创 防抖节流函数

防抖节流函数备份防抖节流函数，防抖函数非立即执行： delay时间内，点击的最后一次执行函数，需要等待delay时间后才执行fn立即执行：立即执行，需要delay时间后才能执行下一次fn/** * @param {Function} fn 需要执行的方法，因this指向问题，建议不使用箭头函数， * @param {Number} delay 间隔时间，默认值100 * @param {Boolean} promptly 是否立即执行，默认false * **/const debounc

原创 js实现sticky粘性定位

var dom = document.querySelector('.count_money'), domTop = dom.offsetTop; window.addEventListener('scroll',scrollFunc) function scrollFunc() { // 定位底部 if(window.pageYOffset < domTop - window.innerHeight){ ...

原创 谷歌浏览器显示input，video等自闭和标签的隐藏dom

原创 HTML onclick 绑定事件阻止冒泡

HTML onclick 绑定事件阻止冒泡<li class="add" onclick="click(this)"></li> function click(elem) { var even = window.event || arguments.callee.caller.arguments[0]; even.preventDefault(); even.stopPropagation(); }...

原创 uniapp踩坑避雷

uniapp踩坑避雷在uniapp中一个循环内不能fliter（过滤器）和 自定义 v-model 一起使用，小程序端，自定义组件内获取不到 v-model 传递的值。使用属性传值的方式错误写法应使用这种写法

原创 优惠券样式

优惠券样式使用css实现下图的优惠券样式拆分样式这个优惠券样式由凹圆和凸圆组成，凹圆可以使用mask来实现，凸圆可以用背景来实现；由于使用了mask后块超出mask的部分会被减掉，所以将凹圆和凸圆分为两个块样式（利用伪类before和after）实现凹圆附上大神优惠券样式【仅凹圆】详细教程 https://juejin.cn/post/6945023989555134494-webkit-mask: radial-gradient(circle at 15px,#0000 15px

原创 原生js 跑马灯

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>跑马灯

原创 css 实现多行展开收起自动隐藏（全兼容）

css 实现多行展开收起自动隐藏（全兼容）学习笔记<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.

原创 动画库收藏

https://codepen.io/Tibixx/pens/public?cursor=ZD0wJm89MSZwPTEmdj0yMjkyMjY4Mg==

原创 转换函数 processfn（笔记）

//箭头函数 const processfn = data => {} //解构赋值 //数组 const [a,b] = [1,2]; // a=1,b=2; //对象 const {key,value} = {key:'name',value: '小明'} // key = 'name',value = '小明' // 扩展运算符 const data = { key: 'name', value: '小明' } const data2 = { ...da...

原创 文本两端对齐

width: 100px; display: block; text-align: justify; text-align-last: justify; text-justify: distribute-all-lines; //兼容ie

原创 阻止冒泡无效问题

经常遇到用js渲染的div，绑定事件需要用到事件委托，此时阻止冒泡不能使用在时间委托中实现，比如// 这种方法无效，阻止不了冒泡$(document).on('click','#id',function(event) { event = event || window.event; event.stopPropagation();})正确的写法是// 这是正确写法$(document).on('click',function() { $('#id').on('click',functio

原创 原生js自定义下拉框

原生js自定义下拉框，可以设置下拉框中链接跳转，仅需在option中设置type为jump，设置url为跳转地址即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义下拉框se

原创 获取浏览器地址栏内容

w3school 地址https://www.w3school.com.cn/js/js_window_location.asp

原创 浏览器当前页面前进后退

history.back() //后退一个页面history.forward() //前进一个页面// 指定页面，前进一个页面传1，后退一个页面传-1// 以此类推history.go(X)

原创 判断浏览器

在这里插入代码片//判断是不是IE浏览器使用//('ActiveXObject' in window),//ActiveXObject是IE浏览器特有的属性if('ActiveXObject' in window) { alert('我是ie浏览器');}else { alert('我不是IE浏览器');}//完整的判断是var ua = navigator.userAgent;if(/firefox/i.test(ua)) { alert('我是火狐浏览器');}else

原创 关于取消浏览器默认事件方法

return false； 该方法不适用用两种情况，1.在ie中不支持使用；2.使用addEventListener()方法绑定的响应函数不支持使用event.preventDefault() 该方法是使用addEventListener()方法绑定的响应函数时使用；在ie中取消默认事件，可以使用事件捕获来实现obj.setCaptrue(); 将下一次点击事件捕获到obj，obj.releaseCapture();取消捕获...

原创 拖拽功能（取消浏览器默认事件兼容问题）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1 {

原创 鼠标滚轮事件

/* 给dom对象绑定鼠标滚轮事件，使用onmousewheel事件，但是火狐浏览器 * 不支持这个事件，火狐浏览器使用DOMMouseScroll事件来绑定鼠标滚轮事* 件，且必须用addEventListener来绑定事件* /obj.onmousewheel = function(event) { /* 其他浏览器使用event.wheelDalte 来获取鼠标滚动方向， * 当event.wheelDelte > 0 时是向上滚，event.wheelDelte < 0 时

原创 绑定响应函数的几种方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box {

原创 事件委托

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box {

原创 阻止事件冒泡

//使用event.cancelBubble = true 来取消事件冒泡，cancelBubble 属性是IE浏览器有的，但其他浏览器也能使用

原创 获取滚动条滚动距离兼容写法

在chrome中，浏览器的滚动条是属于body的，可以通过document.body.scrollTop来获取垂直滚动距离，document.body.scrollLeft来获取水平滚动距离，火狐等浏览器中，浏览器的滚动条是属于html的，通过document.documentElement.scrollTop来获取垂直滚动距离，document.documentElement.scrollLeft来获取垂直滚动距离，兼容写法应该是var top = document.documentElem

原创 事件对象event兼容写法

在IE8及其以下，响应函数被触发时，浏览器不会传递事件对象event，它们是将事件对象作为window对象的属性值保存的，应该使用window.event，window.event 不兼容火狐var div = document.geiElementById('div');div.onclick = function(event) { //event 不兼容IE 8及其以下， event = event || window.event; //if(!event) { // event = wi

原创 jq跑马灯

html块 <div class="hdle"> <div id="line"> <div class="item"> <a href="" style="width: 100%;" target="_blank" class="txt" >******</a>