茶梨吐司-CSDN博客

原创 ArcGIS API 4.x for Js 点击图层弹出信息框

需求：点击小船图层后弹出信息框，信息框中包含该船只(图层)的信息效果：核心步骤1.通过点击事件筛选图层 view.on(“click”,function(event){}2.将图层中attributes属性包含的信息动态渲染到自定义的信息框中3.设置信息框的显示关闭完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>点击图层弹出信息框<

2021-03-26 15:12:32 2189

原创 ArcGIS API 4.x for Js 点击地图获取经纬度

需求鼠标点击地图后获取当前的经纬度效果需添加API“esri/geometry/support/webMercatorUtils”代码view.on("click",function(e){ geom = webMercatorUtils.xyToLngLat(e.mapPoint.x,e.mapPoint.y); console.log(geom[0],geom[1]); // console.log('当前地图zoom',view.zoom);

2021-03-25 11:12:58 2080

原创 ArcGIS API 4.x for Js 点、线、面的绘制

需求添加自定义的点、线、面图层效果需添加以下API“esri/layers/GraphicsLayer”,“esri/Graphic”,“esri/geometry/Polygon”,“esri/geometry/Polyline”,“esri/geometry/Point”完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>创建点、线、

2021-03-25 10:38:50 1630 2

原创解决div隐藏后再显示其内嵌的iframe不显示

需求解决点击默认内嵌iframe的div显示时，iframe内容不显示解决 $("#iframe").css('display','block'); //再显示时需重新再加载一次iframe的地址即可 $("#iframe").attr("src",`iframe地址`);

2021-03-04 15:18:54 556 1

原创 echarts 添加滚动轴

需求：解决x轴数据过多导致页面拥挤解决：添加滚动轴 dataZoom dataZoom:[ { //y轴固定,让内容滚动 type: 'slider', xAxisIndex: [0], show:true, //显示滚轴 height:8, //设置滚轴的高度 bottom:0, //设置滚轴在底部 start: 0, end: 80,//设置X轴刻度之间的间隔(根据数据量来调整).

2021-03-04 15:00:35 1566 2

原创 echarts的基本使用

首先可以在该网址中找到适合自己所使用的图表https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all引入echarts.jshttps://cdn.staticfile.org/echarts/4.3.0/echarts.min.js

2021-03-04 11:51:26 798 1

原创 select下拉框动态添加option选项

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>select动态添加option</title> </head> <body> <select id="test"></select> </body> <script src="https://cdn.bootcss.c

2021-02-26 17:25:25 2713

原创前端实现HTML导出为word文档

需求：将页面或者页面上所需要的部分导出为word文档准备工作：jqueryFileSaver.jsjquery.wordexport.jsjs文件地址：https://github.com/eligrey/FileSaver.js/https://github.com/markswindoll/jQuery-Word-Export实现过程引入jquery 以及...

2020-10-23 13:14:13 9107 5

原创 Js实现banner轮播图的切换

一、实现效果方案一：点击左右按钮实现图片的左右切换方案二: 点击底部的小按钮实现图片的切换方案三：实现轮播图的自动播放二、实现步骤1.准备对应的文件和所需的图片2.静态页面的布局banner.html <div id="banner"> <div> <input type="button" id="leftBtn" value="上一...

2020-03-31 19:01:45 2624

原创 Vue.js指令的基本使用【总结】

首先在使用指令前，先了解在vue中的模版语法。<div id="app"> {{message}}//将message属性通过胡须（双括号）进行绑定</div><script src="../js/vue.js"></s...

2019-12-09 11:46:58 957

原创【filter函数】【map函数】【reduce函数】的基本使用

一、基本作用这三个函数都需要传入回调函数作为参数** filter() **数组中存放的元素是通过检查指定数组中符合条件的所有元素。map()遍历数组中的元素** reduce()**对数组中所有内容进行汇总二、案例需求遍历出数组中小于100的数，并乘以2，最后相加算出总和...

2019-12-03 13:25:05 253

原创基于Ant Design Pro下使用mock模拟本地数据

1.安装antd pro 脚手架在使用mock模拟数据之前需要先进行antd pro脚手架的安装，具体的安装步骤不详细说明。可参考官网：https://pro.ant.design以下是项目的目录结构：├── config # umi 配置，包含路由，构建等配置├── mock # 本地模拟数据├── pub...

2019-11-13 11:20:17 5095 1

原创新版本webpack 打包处理css样第三方-loader配置

旧版本{ test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]'] }新版本module.exports = { module: { rules: [ { test: /\.css$/...

2019-10-21 14:52:08 371

原创 MAC下安装Node、Npm以及Webpack的配置等过程记录

主要内容概览node、npm的安装基于项目的创建安装webpackwebpack的配置以及一些问题解决记录一、node、npm的安装1.进入nodejs官网 https://nodejs.org/en/ 下载安装包，按照步骤的提示安装即可，npm无需另外再进行安装。2.下载安装好后，通过在检测其版本号验证是否安装成功。在终端中分别输入：node -v 以及 npm -v 进行验...

2019-10-17 11:06:45 637 1

qq_41615323的博客