- 博客(57)
- 收藏
- 关注
RSS订阅原创 mpabox gl加载矢量切片服务
代码如下： //加载矢量切片服务 map.addSource('qing_', { 'type': 'vector', 'scheme': 'tms', 'tiles': [ 'http://localhost:8085/geoserver/gwc/service/tms/1.0.0/myTest%3Aexport_output_1@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf' ] }); map.a
2022-02-11 15:16:26
977
原创 mapbox gl添加symbol图层
话不多说，直接上代码，就是个小例子：<script> mapboxgl.accessToken = '';//mopbox 密钥 var map = new mapboxgl.Map({ container: 'map', // style: 'mapbox://styles/mapbox/streets-v11', style: 'mapbox://styles/mapbox/streets-v11', center: [114.1
2022-02-11 15:09:02
2203
1
原创 原生js写个文字向上轮播播放的功能，添加鼠标滑入滑出事件
1.写上对应的元素;<div id="rebox"> <ul id="comment1"> <li>第一条</li> <li>第二条</li> <li>第三条</li> <li>第四条</li> <li>第五条</li> <li>第六条</li> </ul>
2022-02-11 15:04:39
507
原创 使用truf.js渲染出两个面重合的部分（挖洞）
1.定义一哥加载面的函数： //加载面数据 function polygonRender(id, geojson, color, opacity) { map.addSource(id + '_maine', geojson); map.addLayer({ 'id': id, 'type': 'fill', 'source': id + '_maine', 'layout': {}, 'paint': { 'fill
2022-02-11 14:53:46
1244
原创 mapbox gl结合turf.js完成绘图工具画线等距平分
1.首先引入对应的sdk插件，以及页面元素，代码如下：<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script><script src="js/mapbox-gl-draw.js">
2022-02-11 14:45:11
1560
原创 vue 里的 ant design表格数据的字段转换处理，如日期、布尔类型、三元表达式判断等
最近在使用vue ant design 的时候，在处理接口返回的列表数据的时候老是出现各种问题，比如接口里返回的是时间戳，怎么在表格里展示成日期格式；还有接口返回的是bool类型，怎么展示成对应的文字描述等，话不多说，直接上代码。const columnsList = [ [ { title: "名称", align: "center", width: "200px", dataIndex: "name", scopedSlots
2022-02-11 09:45:07
2419
1
原创 ant design 上传（a-upload）excel
最近老是有导入excel的功能，现在有空就来整理一下，欢迎大家提意见。直接上代码： <a-upload style="display: inline-block;" :accept="UPLOAD_FILE_SUFFIX" name="file" :multiple="false" :fileList= fileList :before
2022-01-04 14:28:17
3271
原创 vue里的select标签的使用
1.拿出select的标签元素<el-select size="small" class="collapse-tags-select mini selectBox" style="min-width: 140px" clearable @change="timeChange" v-model="timeTypeVal" placeholder="请选择" collapse-tags filterable > ...
2021-12-30 11:59:09
5316
1
原创 vue执行npm install报错的问题
当出现上述报错的问题时候，不要惊慌，我解决的步骤如下：1. 首先执行npmconfiglist，看看有没有安装错一些插件包；2.执行npm uninstall node-sass卸载失败的安装；3.执行npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/如果出现如下错误：执行npm update命令，在执行npm run serve即可。【报错原因是没有可用的chokidar版...
2021-09-17 13:57:47
531
原创 postgis导入shp数据在geoserver里发布切片
今天就来说说这段时间自己整理出来的在使用mapbox sdk去调用geoserver发布的矢量切片服务。1.安装好需要的软件环境，比如postgis、geoserver。打开postgis，点击view connection按钮，连接上对应的数据库服务，导入需要的shp数据。注意：点击option按钮，编码格式改成GBK，勾选最下面的复选框选项，点击ok按钮即可。shp文件目录中不要出现中文，否则会报.dbf can not be opened的错误提示。2.打开geoserver，添加新的工.
2021-04-22 14:06:57
638
原创 VSCode安装离线下载插件
1. 首先在官网找到自己需要下载的离线插件包，网址如下：https://marketplace.visualstudio.com/2. 找到安装VSCode的bin目录，把下载好的离线插件包放在bin目录下，在该目录下右键，打开命令窗口执行如下命令：code --install-extension techer.open-in-browser-2.0.0.vsix回车执行，看见 successfuly字样就是操作成功。一般需要安装浏览的插件用techer.open-in-browse
2020-12-23 16:46:55
2016
3
原创 mapbox gl 加载gltf模型
首先得理解gltf文件就是一个json文件，GLTF代表Graphics Language Transmission Format（图形语言传输格式），描述的是三维场景数据的组成和构造。1.引入mapbox gl的sdk，另外也得引入<script src="js/three.min.js"></script><script src="js/GLTFLoader.js"></script>这两个js插件，废话不多说，直接上代码：<!DOCT.
2020-12-22 21:44:07
2207
原创 Css Grid代码搞定响应式布局
老规矩，直接上代码。1.css里的Grid布局【网格布局】：html代码：<div class="cotn"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div&g...
2020-05-04 11:20:18
267
原创 图片样式和下载
1.图片水平垂直居中：{ display: inline-block; margin: 0 auto; object-fit: cover;//被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。（fill/contain/none/scale-down等属性） width: 100%; ...
2020-05-04 10:56:02
186
原创 前端对象数组去重的几种方法
1.对象数组去重：$(document).ready(function(){ let data = [ { id: 201801, name: '张三', age: 15, }, { id: 201804, name: 'John', age: 18, }, { id: 201802, name: '李四', ...
2020-05-04 10:54:10
3355
原创 mapbox-gl知识点整理
1.mapbox概述：mapbox致力打造全球最漂亮的个性化 地图，样式的设置都支持矢量瓦片。目前mapbox-gl.js的版本是11.0版本，样式版本由7升到8。默认的投影坐标是3857。加载矢量切片服务时需要加载sprite【图标符号】和glyphs【指定矢量图层的字体】。其中sprite用来指定图标资源的url，一般情况下是.json或者.png后缀结尾；glyphs则是以.pdf后缀结...
2020-05-04 10:45:03
5152
3
原创 天地图服务在https协议下请求正常加载显示地图
首先把需要使用的天地图服务，如矢量地图服务地址如下：//天地图矢量服务"http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&LAYER=vec&TILEMATRIXSET=c&FORMAT=tiles&VERSION=1.0.0&STYLE=default&...
2019-09-27 18:20:55
6428
11
原创 mapbox利用geojson数据来渲染点线面
//针对的是mapbox加载geojson的数据格式去渲染点线面首先说说source的类型有哪些：source的类型有：1.type: "geojson" （点（circle）线（line）面（fill）图标（symbol））【map.getSource('geojson').setData(geojson)给数据源赋值】2.type: "image"（图片）【map.getS...
2019-09-27 17:58:38
8373
6
原创 加载天地图服务出现空吧图片类似404图片加载失败的效果
如果出现加载天地图出现该情况：解决办法其实很简单，一句代码就ok了，话不多上，上代码：//创建自定义图层对象var lay = new T.TileLayer(layers[i].layer.FR,{errorTileUrl:'./images/blankbg.png'});//将图层增加到地图上this.twomap.addLayer(lay);加上{errorTil...
2019-09-27 17:50:29
1450
原创 前端试题
1.bind(), live(), delegate()的区别bind： 绑定事件，对新添加的事件不起作用，方法用于将一个处理程序附加到每个匹配元素的事件上并返回 jQuery 对象。live： 方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回 jQuery 对象。delegate： 方法基于一组特定的根元素将处理程序附加到匹配选择器的所...
2019-01-25 10:00:44
480
原创 css3样式秀
通过css3展示各种图形，动画效果等，代码展示如下效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin-left: 100px;} .d
2018-08-28 12:01:48
154
原创 arcgis for js3.x的导入功能
有时候项目里需要导入一个shape文件，里面是临时的图斑地块，可能是一个或者是多个地块，页面代码如下：<div class="layui-upload" id="impFiles"> <input type="file" id="file" style="width:150px;" /> <input type="submit&q
2018-03-22 09:57:52
568
原创 数组对象去重
得到数组对象：方法一：for (var i = 0; i < features.length; i++) {for (var j =i+1; j <features.length; ){if (features[i].attributes.XZQDM == features[j].attributes.XZQDM ) {//通过XZQDM属性进行匹配； fea...
2018-02-02 11:19:43
278
原创 arcgis for js 4.x定位控件Locate显示不了的问题
开发者在本机可以显示定位控件，如果被部署到服务器，或者是你用手机去访问该地址，也许就会碰见定位按钮不显示的问题，这个原因是4.x的Locate控件对web服务器环境要求是安全的，必须是以https请求或者以localhost请求即可显示，如果是用http那就没法显示，这个可以详细去看api里的Locate的介绍。var EWlocateWidget = new Locate({view:
2017-09-14 09:00:42
1138
4
原创 arcgis for js 4.x加载服务后缀为WMTS格式的服务
首先在浏览器输入该服务的url地址，比如：http://192.168.1.248:9009/arctiler/ogc/services/TiandituRoadMap3857/WMTS此时一看见WMTS，我当时就立马去api里找例子，立马就用这个，WMTSLayer =new WMTSLayer({url:"https://gibs.earthdata.nasa.
2017-09-12 09:59:23
3949
4
原创 使用arcgis for js 4.x api加载地图和服务
首先引入对应的esri的包： （也可以这样 script src="https://js.arcgis.com/4.4/library/4.0/4.0/init.js">script> ）也可以引入bootstrap的包，因为4.x样式引入bootstrap的样式，所以对应的包如下（也可以不引用）： 接着就是代码的展示：var
2017-08-17 11:57:48
4683
原创 jquery将日期数字转换成日期格式
$(function(){var str=1403058804;var oDate = new Date(str), year = oDate.getFullYear(), oMonth = oDate.getMonth()+1, oDay = oDate.getDate(), oTime = year+
2017-08-17 11:38:26
1960
原创 获取所在地的省份和ip
//通过调用新浪IP地址库接口查询用户当前所在国家、省份、城市、运营商信息$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js',function(){ alert(remote_ip_info.country);//国家 alert(remote_ip_info.province);//省份
2017-07-11 15:37:41
2312
原创 arcgis的基础知识点的了解
首先ArcGIS9由ESRI在2004年推出，是一个统一的地理信息系统平台，由数据服务器ArcSDE及4个基础框架组成：桌面软件Desktop、服务器GIS、嵌入式GIS和移动GIS。接下来了解其他的知识点：1.电子地图数据分类与来源 ： 矢量数据、栅格数据、瓦片数据、三维数据和CAD数据等。（其中CAD数据以矢量数据的格式导出，然后发不成服务即可）底图数据 ：a)
2017-07-11 15:30:22
1995
原创 document.location和window.location有什么区别
document你可以理解为文档，就是你的网页；window理解为窗口，就是你的ie浏览器包含的无框架(没有嵌套iframe)：简单的说，没有框架的情况下，是等同的有框架(有iframe)：在有框架的情况下，最外层是相同的，在iframe里面的document.location和window.location不同的。iframe里面的document.location
2017-07-11 08:37:59
1819
原创 layui里的上传控件问题
很多时候，项目里都是需要上传功能的，现在就来研究研究，首先，在html页面引入layui的包，如：接着在html页面写： <input type="file" name="file（queryUpload）" class="layui-upload-filelayui-upload-file_chaxun">然后再在js文件里对其渲染：
2017-05-11 15:57:36
22453
3
原创 layui里的弹出框问题
首先引入对应的包，下面这种是一种方式layui.use('layer', function(){var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句var othis = $(this);//触发事件var type = othis.data('type'),text = othis.text();
2017-04-26 16:10:27
1891
原创 bootstrap里的表格动态加载
创建一个表格：data-toggle="table">$(function(){$('#tab').bootstrapTable('destroy'); $("#tab").bootstrapTable({method:"get",url:"aa.json",striped:true,pagination:true,p
2017-04-25 10:37:39
1130
原创 bootstrap里的弹框组件Model
首先，你得引入对应的包：接着创建一个提供出发弹框的标签：点我这里的标签也可用再接着就是创建弹框：标题内容 关闭提交值得提醒的是，span 标签或者是你的button标，这个data-toggle="modal"属性用来把 的内容识别为模态框；里面的data-
2017-04-25 10:23:05
2788
原创 iframe使用问题
1.iframe的优缺点：优点：使用方便，容易被人会很快的理解使用，且不需要重新加载原页面，节约时间，缺点：用了iframe之后，页面导航栏后退按钮失效，因为嵌套的页面过多，所以不方便打印，小型的移动设备显示不了该框架，兼容性差，增加了服务器的http请求，对于较大的项目是不可取的2.eval的使用：eval可以将string转换成js的对象使用，它也可以将一个短小的表达式打印出来
2017-04-14 16:57:54
469
原创 js和jquery小对比
1.js的使用：创建一个div： var oDiv = document.createElement('div'); oDiv.innerHTML = '添加的div'; document.body.appendChild(oDiv);设置所以 属性：var input = document.createElement("input
2017-04-14 16:57:06
224
原创 spring-boot加mybatis
对于查询单表的信息，用easyui里的datagrid展示，并且自带分页，java代码如下显示：@ApiOperation(value = "查询所有日志信息", notes = "分页查询所有日志信息")@RequestMapping("/findAll")@ResponseBodypublic EasyUiResult findAll(Integer page,Integer
2017-03-30 16:11:33
376
原创 页面加载报各种插件包406的错误
当你用controlg来控制页面的加载，这样就是把@RequestMapping映射的路径漏掉了，添加上去就好了。这种情况下不回事页面的引入错误，而是要查看java代码的逻辑是否对。
2017-03-22 14:25:44
546
原创 easyui
1.面板的使用：创建div，直接渲染$('#p').panel({ width:392, height:250, title: '面板', tools: [{ iconCls:'icon-add', handler:function(){ $("#ff").show(); $('#dd'
2017-03-13 16:28:24
173
原创 easyui里的layout折叠显示标题
认为只需要在jquery.easyui.min.js文件的最下面写上下面的代码即可：var buttonDir = {north:'down',south:'up',east:'left',west:'right'}; $.extend($.fn.layout.paneldefaults,{ onBeforeCollapse:function(){
2017-03-11 23:28:28
2192
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人