- 博客(195)
- 资源 (23)
- 收藏
- 关注
RSS订阅原创 cesium加载S3M白膜，通过分层设色实现渐变效果，设置点光源
var hyp = null;var layer = null;//加载白膜function fnOpenSCENE() { var promise = scene.open('http://www.supermapol.com/realspace/services/3D-CBDbuilding/rest/realspace'); Cesium.when.all(promise, function () { //切换视角至模型位置 scene.camera.setView({
2022-05-12 11:33:28
4792
3
原创 cesium加载线/面，通过shader自定义材质实现流动效果
定义PolylineTrailLinkMaterialProperty.js并引入(function () { /* 流动纹理线 color 颜色 duration 持续时间 毫秒 trailImage 贴图地址 */ function PolylineTrailLinkMaterialProperty(color, trailImage , duration) { this._definitionChanged = new Cesium
2022-05-11 16:17:38
3571
4
原创 cesium加载报警点，通过shader自定义材质实现圆形扩散波纹效果
定义CircleWaveMaterialProperty.js并引入function CircleWaveMaterialProperty(options) { options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT); this._definitionChanged = new Cesium.Event(); this._color = undefined; this._colorSubscr
2022-05-11 15:59:27
2445
3
原创 cesium加载电子围栏，通过shader自定义材质实现动态墙效果，cavans自定义材质实现分层效果
cavans自定义材质，设置颜色/** * 颜色渐变 */getColorRamp(elevationRamp, isVertical = true) { let ramp = document.createElement('canvas'); ramp.width = isVertical ? 1 : 100; ramp.height = isVertical ? 100 : 1; let ctx = ramp.getContext('2d'); let
2022-05-11 15:30:54
5826
12
原创 cesium加载3dtiles白膜，通过shader自定义材质实现渐变效果并显示动态光环
关键代码：function loadTilesShader(tileset) { tileset.style = new Cesium.Cesium3DTileStyle({ color: { conditions: [ ['true', 'rgba(0, 127.5, 255 ,1)'] ] } }); //实现渐变效果 tileset.tileVisible.addEventListener(function (tile) {
2022-05-11 14:56:14
5185
16
原创 Cesium加载entities实体，包括文字标注,图标(动态缩放效果),线(尾迹线效果)，面(动态闪烁效果)，背景图，围栏(立体分层效果)，渐变色圆柱，扇形图等
cesium加载entities实体，包括文字标注,图标(扩撒动画效果),线，面(闪烁动画效果)，图片，围栏，立体区域，渐变色圆柱，扇形图
2022-04-12 15:52:43
9622
2
原创 vue实现气泡运动撞击效果
封装组件<template> <ul id="main"> <li v-for="(item, index) in circleData" :key="index" :class="{'active': item.is_latest_sign_user}"> <div> <span>{{ item.nick_name }}</span> <span>签到</sp
2022-03-29 16:45:09
3017
2
原创 高德地图自定义贴图图层
核心代码 // 背景图 const imageLayerr = new AMap.ImageLayer({ url: "https://cdaipython.com/jinmahe/a5ccb26807c8dcb7c335176677151c0.png", bounds: new AMap.Bounds( [103.618909, 30.628971],
2022-03-25 16:52:17
3740
5
原创 高德地图加载标注并实现缩放动画
封装方法const data = [ { id: '1', lng: 103.758778, lat: 30.709979, degree: 1 }, { id: '2', lng: 103.75889, lat: 30.711127, degree: 5 }, {
2022-03-25 16:44:07
1191
原创 formData 实现文件上传或导入
html部分： 结合input标签<div class="panel-btn btn-box"> <el-button class="audit-btn" size="mini" :loading="importLoading">导 入 </el-button> <input class="import-input-file" :disabled="!manipulatio
2021-12-01 11:00:20
770
原创 vue 事件修饰符
.stop修饰符:：阻止事件冒泡，不让他向外去执行函数 <div @click="test1"> <div @click.stop="test2"> 测试 </div> </div> //点击内层div，输出：test2.prevent修饰符： 阻止组件本来应该发生的事件，转而去执行自己定义的事件<!-- 不再跳转页面 --><a href="https://www.baidu.c
2021-11-23 18:23:37
668
原创 cesium实现晴，雨，雾，雪等效果
晴 viewer.shadows = true; //阴影 viewer.shadowMap.enabled = true; viewer.shadowMap.size = 2048*2; viewer.shadowMap.darkness = 0.6;//阴影强度 viewer.shadowMap.softShadows = true; viewer.shadowMap.maximumDistance = 10000.0;
2021-09-26 15:47:27
1845
6
原创 Cesium在指定位置显示弹框，并跟随地图移动
创建popup.jsfunction poup() {};poup.prototype.viewer = null;poup.prototype.tackedEntity = null;poup.prototype.elementName = '';poup.prototype.width = 0;poup.prototype.height = 0;poup.prototype.postRenderHander = null;poup.prototype.p1 = 0;poup.pr.
2021-08-27 15:11:56
2608
原创 Cesium常用事件，包括点击事件，鼠标事件，相机移动事件
点击事件 let leftclick = Cesium.ScreenSpaceEventType.LEFT_CLICK; viewer.screenSpaceEventHandler.removeInputAction(leftclick); let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // 点击事件 handler.setInputAction((e) => { l
2021-08-27 11:51:42
6967
原创 Cesium视角切换、定位、读取文件，构建数据源，实体控制，模型控制等
飞至视角 initialPerspective() { //知道经纬度的情况下 /* viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(116.523753404617, 40.2340042591095, 1000.0), orientation: {"pitch":-0.5450456670292048,"heading":0.018399360640374063,"
2021-08-13 15:48:06
4742
原创 实现验证码登录并记住密码（cookie）
<template> <div class="login" @keyup.enter="submitClick"> <div class="formBox"> <div class="login_title">欢迎登录</div> <el-form :model="fromData" label-width="50px" label-positio
2021-08-09 11:24:10
521
原创 vue使用DES模式加密解密，包括Java加密解密
前端加密解密1.安装：npm install crypto-js2.在utils下创建一个cryptoAES.jsimport CryptoJS from 'crypto-js';//与后端约定的keyconst DESKey = 'httt360fusion';//加密export function encryptedDES(data) { const keyHex = CryptoJS.enc.Utf8.parse(DESKey); const srcs = Cryp
2021-08-09 11:15:04
555
原创 h5移动端适配
px：是分辨率的尺寸单位em：相对于父元素rem：相对于HTML根元素vw：视口宽度的 1/100，vh：视口高度的 1/100rem结合js实现适配新建rem.js方法，在main.js引用该方法// 设置 rem 函数const baseSize = 32;// 设置 rem 函数function setRem() { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientW
2021-06-22 17:58:10
802
原创 uni-app随笔
获取用户权限 // 获取用户信息uni.getUserProfile({ desc: '登录', // 这个参数是必须的 lang: 'zh_CN', // 返回中文信息 success: (infoRes) => { console.log(infoRes.userInfo) }, fail: (error) => { console.log(error) }})infoRes.userInfo参数：页面跳转1、navigateTo，保留当前页面
2021-06-03 16:21:31
387
原创 uni-app分包加载及优化
文件机构：pages.json配置：{ "pages": [ //pages数组中第一项表示应用启动页 { "path": "pages/index/Index", "style": { "navigationBarTitleText": "供货平台", "navigationBarBackgroundColor": "#1C74BE", "navigationBarTextStyle": "white", "enablePullDownRefresh
2021-06-03 14:05:26
1042
原创 mapbox加载全国及省份范围,显示多颜色动画点、迁徙线、3d柱状图等
//初始化地图 initMap() { let _this = this; map = new mapboxgl.Map({ container: "collection-map",//地图容器 style: { version: 8, glyphs: "/font/{fontstack}/{range}.pbf", sources: {}, layers: [
2021-06-02 18:21:37
1855
原创 将HTML转化成图片并导出为pdf（含 domtoimage、html2canvas）
通过html2canvas实现：注意：html2canvas 截图只能截到当前屏幕可视范围内的内容，滚动到屏幕以外的截取不到在index.html中通过引入js文件<script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js"></script><script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js
2021-06-01 16:33:45
1245
原创 mapbox使用，包括绘制、加载、修改、删除点和面，显示弹框等
一、在index.html全局引入mapbox-gl的js和css包，由于项目中会涉及到部分空间几何对象关系的计算，需借助turf.js，详细使用方法可参考https://blog.csdn.net/weixin_39150852/article/details/116758542二、创建地图组件，初始化地图<template> <div class="map-wrapper" :id="mapId"></div></template><
2021-05-31 14:59:45
12834
17
原创 通过tl-table行合并实现多样化表格
<template> <el-table class="common-table" :data="scoringTableData" :span-method="objectSpanMethod" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'
2021-05-25 17:34:35
307
原创 turf.js用法
1.在index.html直接引用 <script src="https://unpkg.com/@turf/turf@6.3.0/turf.min.js"></script>2.需要用的地方直接使用turf对象，turf主要用来空间几何对象关系的计算，点、线、面之间包含、相交等系统运算。具体使用方法可参考turf.js中文网：https://turfjs.fenxianglu.cn/category/#cdn%E5%BC%95%E5%85%A53.判断点是否在多边形范围内
2021-05-13 17:41:36
7875
4
原创 通过svg实现动画效果
1.拿到psd格式文件，选中相应图层，右键复制svg或者导出为svg2. 使用svg标签渲染，复制的svg中width和height单位是cm<div class="svg-streamline"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="203" height="110.5"> &l
2021-04-30 09:46:16
1694
原创 vue-seamless-scroll实现循环滚动列表，并实现列表点击事件
安装插件npm install vue-seamless-scroll --save使用<template> <div class="scorllBox"> <div class="scrollnameList"> <p v-for="(item, index) in scorllBoxListName" :key="index">{{ item }}</p> </div> <div.
2021-04-28 15:28:14
1381
原创 封装头部可拖拽的弹出框
封装组件：<template> <div class="base-popup" v-if="isVisible" v-draggable :style="styleConfig"> <div class="popup-header"> <i></i> <span class="popup-title">{{ popupTitle }}</span>
2021-04-16 19:12:42
120
原创 svg实现根据文字长度渲染图片
通过PhotoShop打开设计图，选中所需图层右键复制svg，或者导出为svg图片调整path值，“,”左边代表x轴，右边代表y轴，进行模板字符串拼接/** * 添加svg矢量标牌 * text： 标牌内容 * color： 填充颜色 */export function loadVectorIcons(text, color = 'rgb(29, 124, 218)') { let textLength = text.length; //40： 左右边距 //12：文字宽度 .
2021-03-22 15:55:19
353
原创 解决webpack下node.js导致CPU占用过高，内存持续升高的问题
近日遇到一个老项目，通过webpack自己搭建的脚手架，只要npm run dev开始运行内存就持续增长，一直到百分之九十多，电脑卡死。为了找到原因，尝试了很多办法，包括更换编译器运行（检查是否是编译器消耗内存）运行其他项目（检查是否是当前项目的问题）回滚代码（检查是否是代码造成内存泄露）更换nodejs老版本（检查是否是nodejs版本过高）等等，折腾了一天还是没有找到原因打开任务管理器发现node.js serve-side javascript一直居高不下最后，大致确定是webpack
2021-03-11 15:08:15
10868
11
原创 懒加载的el-table在增加、修改、删除后，实现数据刷新
1.加载根节点数据2.实现数据懒加载el-table增加参数 lazy :load="tableLoad" :tree-props="{ children: 'children', hasChildren: 'hasChild' }"3.编辑和新增节点时刷新数据a. 定义maps变量： maps: new Map()b. 加载子节点时赋值：c. 编辑或新增成功时赋值，并调用刷新函数： //编辑或新增 tableEditClick (row, type) {
2021-02-06 16:49:59
6855
10
原创 树结构之递归查询
1.通过节点name，查找对应节点id//instrumentList: 数据集合（树状）//name： 节点名称this.seekSameName(this.instrumentList, name)// 遍历寻找相同的id seekSameName (list, name) { list.map((t)=>{ if (t.name === name) { this.dataQueryForm.instrumentId = t.id //找到id，赋值
2021-02-02 13:58:01
481
原创 Hbuilder打包web项目为app时，下载文件失败问题解决
问题描述：vue开发的h5项目，在pc端浏览器和手机浏览器上下载文件没有问题，使用hbuilder打包成apk在手机上运行，下载文件时弹出如下页面：解决方案： downloadPdf (item) { var system = { win: false, xll: false }; //检测平台 let p = navigator.platform; system.win = p.indexOf("Win") === 0; system.x11 =
2021-01-12 17:12:49
2046
2
vue-project.zip
2020-07-21
echarts3-mapFile-master.7z
2020-03-24
纯html+css实现网站动态特效
2019-04-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人