侧耳倾听...-CSDN博客

<template> <div class="ColorGradient"> <div :style="legendDivStyle"> <div class="ui-legend-cell-div"> <template v-for="item in colorItems"> <div :key="item.id" :style="item.style"></d...

2022-06-24 09:52:44 1424

原创 mapbox-gl-draw 绘制态势标绘-双箭头

mapbox-gl-draw 绘制态势标绘-双箭头

2022-06-23 10:32:15 1612 1

原创 vue 使用mapboxgl 添加本地sprite雪碧图并且展示

文件放到public下面，运行后前面端口加上public下的位置在初始化的地方获取sprite.json文件 let request = new XMLHttpRequest(); request.open("get", window.location.origin + "/icons/sprite.json", true); request.onload = (oEvent) => { this.spriteJson = JSON.parse(re...

2022-04-18 13:34:27 2499

原创 js日历（包含农历节假日）

原始地址vue封装了个日历组件（包含农历，节日）_m0_49159526的博客-CSDN博客_vue日历插件显示节日的实现样式层级index.vue<template> <div c..

2022-01-27 14:42:03 4599

原创 vue + gifshot 实现GIF动图

gitshot地址index.html 文件中引入<script src="https://cdn.bootcdn.net/ajax/libs/gifshot/0.3.2/gifshot.js"></script><template> <div class="makeGif"> <div id="gif"></div> </div></template><scr...

2022-01-06 13:47:11 2887

原创雪碧图的展示和选择

<template> <div class="icon-svg"> <div class="icon-div" :style="{ width: positions.width + 'px', height: positions.height + 'px', 'background-position': '-' + positions.x + 'px -' + positions....

2022-01-06 13:39:29 554

原创 mapboxgl-minimap

var map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v8", center: [-73.94656812952897, 40.72912351406106], zoom: 7});map.on("style.load", function () { // Possible position values are 'bottom-left', 'bott...

2022-01-06 13:35:29 810

原创 iframe 子父传值，不跨域方法

发送方 window.parent.postMessage( { data: { code: "success", iframeHeight: height, }, }, .

2021-12-13 11:02:23 765

原创 window10 部署nginx 前端使用vue配置

下载地址nginx 官网安装首先现在下来后是压缩包1、先解压2.解压后在这个目录下打开cmd安装教程：https://www.cnblogs.com/taiyonghai/p/9402734.html配置前端配置vue 在vue.config文件下有个publicPath 对应的是nginx目录下的名称打包默认是 npm run build如果配置了package.json 文件打包变成 npm run 配置的名称配置ngin...

2021-12-09 16:01:20 2673

原创 css 实现太极图

<template> <div class="box"> <div class="circle"></div> </div></template><script>export default { props: [], data() { return {}; }, watch: {}, methods: { init() {}, }, mounted...

2021-11-05 14:35:49 195

原创 mapbox 分屏对比2

这个是纯手写https://blog.csdn.net/xm_w_xm/article/details/103843217mapboxglhttps://github.com/mapbox/mapbox-gl-sync-move<template> <div class="hello" style="height: 100%; width: 100%; position: relative"> <div class="map1" ..

2021-09-08 17:51:32 476 1

原创 CSS transform 属性实现矩形旋转

定义和用法transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。为了更好地理解 transform 属性，请查看这个演示。默认值： none 继承性： no 版本： CSS3 JavaScript 语法： object.style.transform="rotate(7deg)" 语法transform: none|transform-functions;值描述 n...

2021-08-18 16:16:42 876 1

原创 canvas 基础学习笔记

颜色、样式和阴影属性描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 strokeStyle 设置或返回用于笔触的颜色、渐变或模式 shadowColor 设置或返回用于阴影的颜色 shadowBlur 设置或返回用于阴影的模糊级别 shadowOffsetX 设置或返回阴影距形状的水平距离 shadowOffsetY 设置或返回阴影距形状的垂直距离方法描述 createLinearGradient(

2021-07-16 17:50:52 248 1

原创 mabox-gl 展示制定区域的影像，其他则有模态框

原理一、利用turf.mask将你想要的展示的geojson截取出来，这样就变成了一个中间镂空的geojsonturf.mask( ‘高亮数据’, ‘全球数据（这里用的正负180 和正负90）’);二、用中间镂空的geojson，颜色设置成你想要的模态框的颜色三、绘制一个高亮的位置，颜色设置成你想要的颜色就可以了zhegai() { if (map.getLayer("blueMask-line")) { map.removeLayer("blue...

2021-07-05 10:40:36 434

原创 Vue + 原生CSS3 实现像视频时间点在时间轴上效果并且可移动

<template> <div class="timeSwiper"> <div class="time-box"> <div class="time-title">时间</div> <div class="tool-left" @click="reduceYear(nowYear)"> <span class="icon iconfont">...

2021-06-29 15:40:41 1838 1

原创 js动态添加table 添加行列，删除行列

<template> <div class="table-box"> <div class="code"> <textarea id="textarea" v-model="tablecode"></textarea> </div> <div class="tablebox"> <div class="operation"> <But...

2021-05-08 10:14:32 897

原创 Css 选择器

选择器解释 div p div子元素下所有p元素 div>p div子元素选择器下所有p元素，不包括孙级及以下元素。 div,p 选择所有div元素和所有p元素 div+p 用于div选择紧挨着的同级兄弟p元素。 div~p 用于div选择后面的所有兄弟p元素。 ...

2021-04-07 16:51:16 248

原创 flex布局 - 零基础保姆级

一、实现效果二、代码<template> <div class="flex"> <div class="flex-box"> <div v-for="item in dataList" :key="item.id" class="flex-box-item"> <div class="flex-box-img" @click="jumpApp()"> <img :src

2021-04-01 16:37:51 542 1

原创 MultiPolygon MultiLineString MultiPoint geometry数据格式

目录一、MutiPolygon1.1、MutiPolygon-相交2.2、MutiPolygon-不相交2.3 MutiPolygon-中间镂空2.4 MutiPolygon-中间镂空在嵌套二、MultiLineString三、MultiPoint一、MutiPolygon1.1、MutiPolygon-相交{ "type": "FeatureCollection", "features": [{ "type": "Feat.

2021-04-01 11:27:43 4473

原创 vue+mapbox-gl-draw 绘制矩形并添加第一个点

添加draw组件 let modes = MapboxDraw.modes; modes.draw_rectangle = DrawRectangle; //添加工具 this.draw = new MapboxDraw({ modes: modes, displayControlsDefault: false, }); map.addControl(this.draw, "top-right")..

2021-03-25 17:52:13 3785 4

原创 js 中文排序

letarray=["武汉","北京","上海","天津"];array.sort(functioncompareFunction(param1,param2){//console.log("param1",param2)returnparam1.localeCompare(param2,"zh-Hans-CN",{sensitivity:"accent",});});consol...

2021-03-25 10:36:58 289

原创 vue+mysql+egg.js 搭建后台服务（零基础增删改查）

egg.js 中文官网我之前分享的搭建cli3过程

2021-02-03 10:11:18 1197 1

原创微信小程序动态样式

<view class="{{theindex==index?'left-item-active':'left-item'}}" bindtap="changeIndex" data-item="{{item}}" data-index="{{index}}"> {{item.name}} </view>changeIndex(e) { // console.log(e.currentTarget.data...

2021-01-14 16:18:44 596

原创 vue+mapboxgl 运行轨迹循环

最终的样子+mapboxgl 官网的例子：https://docs.mapbox.com/mapbox-gl-js/example/animate-a-line/turf.js 官网：http://turfjs.org/requestAnimationFrame 详解我觉得写的很好：https://www.jianshu.com/p/fa5512dfb4f5一、实现思路1、绘制线2、绘制一个点，将线的第一个点赋值给点3、将geometry中线的每个节点值 ...

2020-12-11 18:00:36 1891

原创 vue 微信登录（前后台详细教程）

一、pc端（网页端实现的是扫码登录）微信网页应用登录开发指南第一步：点击微信登录的按钮的时候-调取微信登录的服务请求code (前端)let APPID = "这个是申请的APPID";let REDIRECT_URI = encodeURIComponent("这个是在微信开发工具网页端的地方填写的地址 - 授权回调域中后面可添加"); this.urltest = `https://open.weixin.qq.com/connect/qrconnect?app.

2020-11-10 13:28:46 12396 3

原创 js 校验是手机端还是pc端

let that = this; if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { that.ispc = false; } else { that.ispc = true; } window.addEventListener("resize", function () { if (/Android|webOS|iPhone|iPod|Bla..

2020-11-02 17:59:38 172