半吊子指针-优快云博客

原创【天地图】VUE3基于Leaflet.js部分功能hooks封装useLeafletMap.js

起因是为解决天地图渲染十万条数据卡顿问题，自从用了leaflet渲染后就没那么折腾了，使用canvas矢量图层绘制这加载速度也就解决了，心情也舒畅了~除了查leaflet相关攻略大部分都是收费一说，难顶。1.论开发地图自定义绘制工具：leaflet依赖第三方插件，插件暂时感觉没天地图灵活（待我再研究研究），天地图只需按管网API开发既是。7.论开发出现问题寻求解决方案：就绿色上网来说，leaflet更多搜的是付费方案，天地图有些搜不太到，两者体感就大差不差了。

2024-07-30 14:37:58 1361

原创十万地图数据使用canvas转图片绘制

思路：计算数据经纬度范围确定canvas画布大小，计算各管线在画布中偏移位置再绘制，绘制完成转图片base64，再将图片绘制到天地图中。前言：需求是天地图绘制十万条数据管线展示，直接绘制会出现明显卡顿，因此使用canvas计算绘制转图片后，再将图片绘制在天地图上。因为合并成了一个图层了，需要操作的部分单独绘制了，暂时未找到更好的渲染方式。canvas绘制方法封装(pinia)，

2024-05-10 14:30:11 470

原创【天地图】使用天地图api绘制GeoJson数据

其中本质上是获取geoJson复杂图形中最大/最小经纬度确定图形展示范围和中心点，利用经纬度差值2.1倍进行估算地图展示级别，这部分老早之前有参考过其它博主的文章但我找不到来源了，实在愧疚，如果能找到原主，请务必私信我再编辑放链接跳转的！天地图API需要对点/线/面单独渲染，因此最终处理格式为以下。封装geoJson方法的hooks。图形回显天地图自适应视角算法（

2023-11-14 11:07:14 5126

原创【天地图】VUE3关于天地图部分功能hooks封装useTdtMap.js

各方法详细说明在代码里体现，首先创建一个hooks——useTdtMap.js。该hooks除了需引入天地图外，还需引入开源库。引入天地图hooks并初始化地图，以下都为。仅根据个人习惯封装，仅供参考。

2023-11-01 15:03:52 5350

原创 VUE3 天地图使用自定义模板添加信息窗口

前言：vue3想使用自定义vue template作为天地图自定义信息窗口内容，但vue2中extend已弃用，所以换了种替代extend方法去实现需求。解决思路：创建一个模板虚拟节点，实例化并传给天地图自定义窗口内容即可。

2023-05-25 21:21:03 10693 3

原创高德地图AMap——setCenter与infoWindow冲突导致不能够正确的设置中心点

infoWindow默认属性autoMove为true，当infoWindow内容不在视图范围之内时，会自动调整地图视图直到内容区域显示在地图上，因此与setCenter操作冲突。点击marker后加载infoWindow，如果marker在地图比较边缘的位置，设置中心点会出现偏移。第一种：设置infoWindow的autoMove属性为false。当点击高德地图上的marker时，要求地图将该marker设置为中心点。另外：高德地图设置setZoomAndCenter同理

2023-01-05 19:24:49 3446

原创 Vue3 关于router引起的[Vue warn]: inject() can only be used inside setup() or functional

该router的使用会报警告inject() can only be used inside setup() or functional；原因在于useRouter。引入示例：import router from "@/router/index.ts"在setup中使用，因此在模块中调用会出现警告，参考文档。使用useStore同理。...

2022-08-29 10:04:27 8769 6

原创 vue3 使用teleport报错找不到‘parentNode‘节点（未解决）

vue3 使用teleport报错找不到'parentNode'节点（未解决）

2022-06-21 16:49:47 4804 6

原创使用vue draggable报错[Vue warn]: ＜transition-group＞ children must be keyed:

贴个vue draggable中文文档：vue.draggable中文文档 - itxst.com 最近使用vue draggable时，想在推拽的组件里添加其它不能被拖拽的元素，因此使用了handle属性。结果报错，导致新增的元素并没有展示出来。解决办法：在该元素的父级绑定key 以下为记录过程，以官方文档示例代码为例，示例代码部分如下： <div class="itxst"> <div&...

2021-12-17 14:21:28 9457

原创 uniapp App端解决input@input事件动态修改值不生效的问题

搜了一下方法有两种，一是延迟修改，利用setTimeout；二是异步修改，利用this.$nextTick，代码参考如下：<template> <view> <input v-modal="num" type="number" placeholder="请输入" :maxlength="3" @input="onInputOne" /> <input v-modal="discount" type="nu...

2021-12-08 17:55:24 13073 2

原创基于vue框架写的分页栏样式

先放效果图：参考百度的分页栏样式，下面是完整代码（两个箭头为图片，需自己替换或手写），仅为自己留学习记录用途。<template> <div class="flex pagination"> <img class="arrow-left" src="../assets/information/image/arrow-left.png" @click="selectArrow('left')"> <ul class="flex pa.

2021-09-01 14:17:33 421

原创 js判断两个时间段（格式为xx:xx，24小时制）是否重叠

例如检测一时间09：00~18：00与其他选择的时间段是否存在重叠，我自己的思路是将时间处理格式为Number格式进行比较，例如09：00~18：00处理为900和1800 判断已转换格式的检测时间的开始时间是否小于结束时间，如果小于，则该时间段在同一天，反之该时间段跨越到了第二天判断选择的时间段在检测时间段的时间轴左边还是右边，分类讨论以下贴上自己的代码图，仅供参考！// 选择时间段是否与检测时间段重叠isOverlap() { // 将选择的时间段处...

2021-07-13 00:40:11 2352

YueMiaoL的博客