自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(138)
  • 资源 (1)
  • 收藏
  • 关注

原创 vue3+mapboxgl鼠标浮动显示cgcs2000

鼠标在地图中浮动展示地图的经纬度,cgcs2000 xy 还有显示带号。

2023-07-11 14:36:03 968

原创 js gcj02转成wgs84

GCJ-02又名火星坐标系是由中国国家测绘局(G表示Guojia国家,C表示Cehui测绘,J表示Ju局)制订的。

2023-07-06 16:11:47 498

原创 vue+cesium 获取鼠标浮动的经纬度

cesium在地图中展示鼠标的经纬度。

2023-07-05 15:02:39 541

原创 vue3在浏览器段展示海康监控视频

vue3在浏览器段展示海康监控视频

2023-07-04 14:16:32 1160

原创 滚动的公告

遍历数组运用 setInterval 来对数组循环。

2023-02-20 17:15:57 117 1

原创 mapbox-gl-draw 绘制态势标绘-分队战斗行动

mapbox-gl-draw 绘制态势标绘-分队战斗行动

2023-02-14 16:01:03 578

原创 mapboxgl 拖拽切换图层顺序

通过dragstart,dragenter,dragend方法来获取到他的id。dragenter方法实现他在移动过程中的样式。首先获取到他的列表先遍历加载他的图层。

2023-02-14 15:50:39 397

原创 cesium 展示glb数据

这个数据会转成xyz ,所以可以将position换成。0:x, 1:y, 2:z 3:半径。这个shpere 中一共有4各参数。可以直接使用他的xyz 不需要转。xyz 转换成经纬度和高度。

2022-11-08 16:37:40 530

原创 前端常见问题(vue-题库一)

最近关注了一下前端面试题可以和大家 分享一下,有些解释的不全面或者不对的地方可以指正交流一下问题1:v-model 双向绑定的原理是什么答:问题2:v-for 为什么要加key答:

2022-08-23 17:36:20 350

原创 vue3 + view-ui-plus + js 项目 升级

vue3 + view-ui-plus + js 项目 升级

2022-07-27 15:15:14 2633

原创 vue3和vue2的区别并且如何升级 (对于vue2有基础的)

vue3 学习

2022-07-22 15:22:06 1048

原创 mapbox-gl-draw 绘制态势标绘-进攻方向(尾巴)

代码】mapbox-gl-draw绘制态势标绘-进攻方向(尾巴)

2022-07-15 17:07:36 780 1

原创 vue 填写选择的日期

vue 填写带旬的日期

2022-07-08 16:38:32 365

原创 mapbox-gl-draw 绘制态势标绘-进攻方向

mapbox-gl-draw 绘制态势标绘-进攻方向

2022-06-29 09:56:51 799 3

原创 vue+css实现颜色渐变

<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 1002

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

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

2022-06-23 10:32:15 1166 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 1980

原创 js日历(包含农历节假日)

原始地址vue封装了个日历组件(包含农历,节日)_m0_49159526的博客-CSDN博客_vue日历插件显示节日的实现样式层级index.vue<!-- * @Description: * @Author: lzp * @Date: 2021-06-23 16:55:55 * @LastEditTime: 2021-07-02 12:25:17 * @LastEditors: xxx--><template> <div c..

2022-01-27 14:42:03 3526

原创 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 2437

原创 雪碧图的展示和选择

<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 433

原创 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 675

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

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

2021-12-13 11:02:23 708

原创 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 2614

原创 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 127

原创 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 315 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 648 1

原创 canvas 基础学习笔记

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

2021-07-16 17:50:52 120 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 284

原创 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">&#xe654;...

2021-06-29 15:40:41 1253 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 730

原创 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 135

原创 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 232 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 3128

原创 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 3090 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 197

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

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

2021-02-03 10:11:18 965 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 450

原创 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 1577

原创 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 10176 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 125

vue3在浏览器段展示海康监控视频

vue3在浏览器段展示海康监控视频

2023-07-04

vue+mapboxgl 添加点,添加注记

vue+mapboxgl 添加点,添加注记

2023-06-14

mapboxgl在地图上添加图片,动图

mapboxgl在地图上添加图片 mapboxgl在地图上添加动图,gif

2023-06-14

mapboxgl2.4.1加载3D建筑物

mapboxgl2.4.1加载3D建筑物 建筑物用的矢量瓦片,用的是geoserver本地发布的数据

2023-06-14

vue+mapboxgl 双屏同步展示

vue+mapboxgl 双屏同步展示

2023-06-13

vue+mapboxgl 卷帘功能

vue+mapboxgl 卷帘功能 可实现左右滑动

2023-06-13

vue+mapboxgl 鹰眼展示

运用vue加mapboxgl,编写的鹰眼图,全局视图,通过小图查看大图的展示功能 1、首先要有两个地图 大图,小图,鹰眼范围图(简称鹰眼) 2、大图移动,放大缩小的时候要相应的放大和缩小 3、小图不动,鹰眼图放大和缩小时,大图展示相应的位置

2020-05-25

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除