- 博客(444)
- 资源 (63)
- 收藏
- 关注
RSS订阅原创 canvas绘制切片并导出图片
概述本文讲述在canvas中绘制地图切片，并将切片拼接成一个完整图片的实现。效果实现<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>map</title></head><body> &l...
2019-10-23 22:25:17
1992
原创 ol中闪烁点动画的实现
概述本文讲述如何在ol中实现闪烁点动画。实现效果实现思路实现如图的动画，可以用两种思路：1.overlay+css3动画实现；2.canvas动画实现。实现1、overlay+css3实现css的实现如下：@keyframes animate { 0% { transform: scale(0.3); } 100% { transform: scale(1); }}...
2019-08-23 20:37:42
1529
原创 ol4通过ImageCanvas实现大量点的展示以及交互的实现
概述在ol4里面可以通过Vector Layer的方式进行点的渲染，但是当点的个数比较多的时候，会存在明显的操作不流畅。本文讲述如何利用ImageCanvas接口，对大量的点进行展示，并添加相应的交互。实现效果实现分析1.效率差异如何得来？ol的最终渲染也是通过canvas的方式来渲染的，但是为什么效率会差这么多呢？分析原因，是因为：1）Vector的渲染方式会保留很多交互相关的操作...
2019-08-14 13:58:15
1752
2
原创 ol仿百度拖拽调整圆的大小的实现
概述用过的百度地图的人都非常喜欢百度地图里面的周边搜索功能，它能够通过拖拽查询范围的大小，甚是好用。在本文，仿百度实现类似的效果。效果实现思路在实现的时候，有几个点：1.通过overlay实现拖动工具；2.添加div的ondrag事件添加拖动；3.保持y不变，控制只能在横向拖动；4.通过伪元素：after实现圆的半径的展示。实现代码<!DOCTYPE HTML>...
2019-08-09 20:55:19
1569
1
原创 将数据压缩到图片并在前端做解析渲染
概述在做前后端数据交互的时候，你一定遇到过这样的问题：数据量大，尤其是在气象行业！在本文，讲解一种将数据压缩到图片并在前端实现数据的解析与展示的功能。流程整体操作流程图如下图：实现的效果1.前端绘制数据图；2.移动鼠标展示鼠标所在位置的值；3.间隔展示数据值；关键实现1、获取图片并解析数据var img = new Image();img.src = 'css/ws_ch...
2019-08-05 18:34:58
1006
原创 固定表头和第一列表格的实现
概述在开发的时候，我们有时候会有这样的需求：由于表格的内容比较多，如果横竖都出现滚动条就看不到表头了，这就要求表格的表头和第一列固定，并且出现双向滚动条。本文就就给大家介绍一种通过css和两行js简单实现。效果实现思路1.区域划分如下图，将整个表格分为四个区域：1、左上区域需要单独出来，因为此区域不参与滚动；2、上部表头，需要固定在顶部并且参与横向滚动；3、左边表头，需要滚动并且参与竖...
2019-06-01 10:11:56
2327
原创 ol5里面实现相册地图
概述如下图，在手机里面有一个这样的功能，我称之为“相册地图”，本文讲述的是通过扩展ol.style的类，来实现“相册地图”这个功能。关键点要实现这个功能有两个关键点：1、地图聚合；2、图片样式。有关地图聚类的在很早之前的文章里面已经涉及到过，所以本文重点讲述图片样式。实现效果实现1、扩展ol.style.Photo/** * @classdesc * Set Photo s...
2019-03-23 10:57:00
1523
原创 openlayers5中用iconfont作为图标
概述前面有文章 openlayers4中用font设置图标样式 就iconfont在ol5中的使用做了一个尝试，后面有很多童鞋问我说实现不了，一直没有时间去做一个详细的测试，最近在做了诸多测试后，觉得这种方式比较靠谱，在此分享出来，希望对用到的童鞋有所帮助和启示。实现思路实现的思路流程图如下：实现后效果实现后效果如下：实现代码<html xmlns="http://ww...
2019-03-20 16:38:08
2359
1
原创 8012年终总结
本想乘着昨天8012的小尾巴完成此总结的，可惜的是没有完成，不过没有关系，9012的第一天，首先恭祝大家元旦快乐，新年发大财。下面如数家珍般的就过去的这一年做一个总结，这样类似的总结从来都不是给别人炫耀的，而是对自己的一个盘点，好做到知己而已。8012年对我来说应该是一个转折点：1、年龄上，三十而立；2、思维上，有一个比较大的转变。就1，三十而立，只是到了这个年龄段了，能否立，还是有待商榷的...
2019-01-01 07:59:51
1064
1
原创 ol3中妙用Arcgis Server Rest Export接口模拟WMS，并实现属性过滤
概述在本文，讲述如何妙用Arcgis Server的REST Export接口实现WMS服务的调用和图层的属性过滤。参考1、巧用Arcgis Server的REST接口实现OL2中WMS添加过滤2、OGC——WMS详细介绍（arcgis server举例）参考文章2中，提到了Arcgis Server提供WMS的参数，如下图：从上图我们可以看出，Arcgis Server提供WMS的...
2018-11-10 16:53:37
1483
原创 写给在校的GISER
此文，写给在校的学生。我想，看到此文的人应该是幸运的，因为下面我说的东西对于你们专业的认识和以后的职业生涯发展有一定的指导意义和参考价值，这也是我写此文章的目的所在。和很多gis专业的童鞋聊：关于为什么会选择这个专业？很多童鞋的回答都是调剂过来的，并且表示没听说都没有过这个专业，只有少数的表示听说过，知道并了解的更是寥寥无几了。说起高考志愿这个事情，我自己有段趣事，分享出来，逗大家一乐：我...
2018-11-07 00:08:57
2480
5
原创 从我的历程谈谈该如何学习
作为一个师者，其职责是“传道、受业、解惑”。可是，我做的不够好。很多时候，会有一些刚毕业或刚入行的童鞋问我：老师，怎么学习webgis开发？我也一直在思考这个问题，作为一个新人，应该如何学习webgis，降低webgis的学习成本。对于如何学习，是一个很模糊也很难有标准答案的问题，因人而异，仁者见仁，智者见智。本文，从我个人的学习路程上抛砖引玉的简单说说，希望有所启发，有所帮助。首先，介绍下我...
2018-10-16 11:22:06
11895
32
原创 Openlayers4中图片填充的实现
概述本文讲述如何在Openlayers实现面状要素的图片填充。实现后实现代码var bounds = [73.4510046356223, 18.1632471876417, 134.976797646506, 53.5319431522236];var projection = new ol.proj.Projection({ code: 'EPSG:4326', ...
2018-10-11 20:51:10
3576
原创 geotools实现两个shp的相交计算
概述在Armap工具箱‘分析工具->叠加分析’，不得不说，非常好用，本文给你讲讲如何在geotools中实现。关键点要实现类似的功能有两个关键点： 1、已经计算过的两个数据不能重复计算； 2、需要保留两个shp图形的属性。 这两点在后面的代码里面会有相对比较详细的注释的。实现结果 实现代码package com.lzugis.test;...
2018-08-29 07:13:52
6082
1
原创 ol4加载pbf矢量切片与样式定义
概述看了一下mapbox的矢量切片的展示方式，其核心是定义的一个样式配置文件，我就在想：Ol4里面我是否通过styleFunction的方式实现同样的效果呢，折腾了一上午，别说，styleFunction真好用，在此分享出来，供大家参看。mapbox的样式配置 如上图所示，mapbox的样式定义是通过一个这样的配置实现的，实现后效果如下： openlayers4的样式配...
2018-08-10 17:25:51
3305
3
原创 OL4中styleFunction的妙用
概述越用越觉得styleFunction是一个好东西，爱不释手啊，今天分享一个简单的memo。效果 说明： 1、就一个点，实现上述的效果；实现 function styleFunction(feature){ var count = feature.get("count"), geom = f...
2018-08-03 15:41:34
1874
1
原创 OL3+中链家地图找房功能实现
概述今天呢，我们说说如何在OL3+的版本中实现链家的地图找房功能。准备工作1.功能分析看看链家的地图找房功能，其实比较简单，主要包涵： 1）基于行政区划的统计展示； 2）分级别展示，逐级钻取。2.数据获取首先，打开链家地图找房连接，按下F12进入调试，切换到“网络”选项卡，选择“js”，在过滤中输入关键字“callback=J”，这个时候逐个点一下，就能看到...
2018-07-24 06:38:58
5702
1
原创 地图模态层的实现
概述咱们书接上上文，在上上文里面给大家分享了”ol4中实现只能查看用户权限所在区的地图“，在本文给大家分享一个结合turf.js实现区域裁剪实现地图模态层的效果。效果 实现一、生成模态数据1、输入 1）最大的四至（-180,-90,180,90） 2）裁剪区域的地图边界数据；2、操作 计算最大四至和裁剪区域的difference3、输出 裁除了...
2018-07-21 17:29:27
1445
原创 echart实现地图的逐级钻取
概述本文讲述在echart下基于行政区划的地图逐级钻取功能。主要实现： 1、点击地图展示下一级地图； 2、通过区域导航可返回上一级地图；效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit
2018-07-19 15:09:09
4072
1
原创 ol4中实现只能查看用户权限所在区的地图
概述我们经常会碰到这样的需求：北京的用户只能查看北京的地图，天津的只能看天津的地图……这里面涉及到了一个地图的访问权限问题，要实现这样的功能如果用服务+过滤的方式比较繁琐，所以本文讲述一种比较简单的实现方式。输入与输出 输入：地区边界+地图 输出：按照地区边界裁剪的地图，并显示地区边界实现1、技术关键点 实现此功能中，包含几个关键技术点： 1）地图坐...
2018-07-16 15:30:23
1243
原创 geotools编写shp转sql，实现shp数据入Oracle Spatial库
概述用到Oracle Spatial就很难避免shp文件的入库问题，虽然有shp2sdo工具，但是用起来不是很习惯，所以，本文讲述如何结合geotools实现shp2sql的转换。效果实现代码package com.lzugis.geotools;import com.lzugis.CommonMethod;import com.vividsolutions....
2018-06-27 19:38:27
2420
2
原创 Geotools中蜂巢的实现
概述本文讲述如何在geotools中实现蜂巢效果。效果实现1.扩展类IntersectionBuilderimport com.vividsolutions.jts.geom.Coordinate;import com.vividsolutions.jts.geom.Geometry;import com.vividsolutions.jts.geom....
2018-06-23 08:13:35
2543
原创 说说地图中的聚类
概述虽然Openlayers4会有自带的聚类效果，但是有些时候是不能满足我们的业务场景的，本文结合一些业务场景，讲讲地图中的聚类展示。需求在级别比较小的时候聚类展示数据，当级别大于一定的级别的时候讲地图可视域内的所有点不做聚类全部展示出来。效果实现在实现的时候，自己写了一个很简单的扩展myclusterlayer，代码如下：var myClu...
2018-06-20 19:21:08
3753
1
原创 全国航班数据与可视化分析
概述本文通过爬取全国航班的数据，并对行数据进行可视化展示与分析。数据来源数据是从哪儿也不想去的去哪网抓过来。为了能够获取到数据，抓取了下请求的地址，抓取的地址如下：https://flight.qunar.com/touch/api/domestic/wbdflightlist?departureCity=%E5%8C%97%E4%BA%AC&amp;arrivalCity...
2018-06-10 11:15:41
27122
8
原创 geotools等值线生成
概述前文中，提到了等值面的生成,后面有人经常会问等值线的生成，本文在前文的基础上做了一点修改，完成了等值线的geotools生成。效果实现代码package com.lzugis.geotools;import com.amazonaws.util.json.JSONObject;import com.lzugis.CommonMethod;import...
2018-06-03 14:28:44
7781
2
原创 OL4结合turf.js实现等值线
概述本文分享一个结合turf.js实现前端等值线的生成，并对结果做了圆滑处理，并在OL4中进行展示。效果实现实现比较简单，源代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charse...
2018-05-31 15:25:13
6482
1
原创 openlayers4中用font设置图标样式
概述font其实是个好东西，不论是写css还是。。。，这不，牛老师想把它用在openlayers4中，用以很方便的设置图标的大小、颜色，还不失真，东拼西凑，终于算是完成了。效果换个大小？ 换个颜色？ 先炫耀到这吧，确实很6啊。。。实现1、样式引入<link rel="stylesheet" type="text/css" href="css...
2018-05-29 15:06:16
3980
3
原创 牛老师的“智囊库”
概述本文，牛老师给大家分享一些自己平常工作和学习常用的网站或资源，希望对大家有所帮助。智囊库1. myself1) mapdemo 说明：主要为前端代码库，分效果展示和代码展示两个tab，比较方便。2) lzugis 说明：主要为后端代码库，包括一些常见的Geotools操作等。3) 我的博客 4) Arcgis for js教程 5) ...
2018-05-10 11:31:32
1725
原创 巧用Openlayers4的Style
概述非常细化Openlayers4中的StyleFunction，因为它可以让我非常方便的实现各种效果，本文带你一起一探究竟。StyleFunctionStyleFunction是一个样式函数，参数包括：feature和resolution，如下图。 不过，一般来说，resolution我用的很少，我一般会用zoom替换掉resolution这个参数；StyleFunctio...
2018-04-30 14:10:29
4641
原创 分享个天气网7日天气样式
概述最近项目里面用到了天气网“7日天气”的功能，本来想趴一个样式的，可是看了看太费劲，索性自己写吧，分享下。效果高仿真，有木有，有木有？？？代码css代码：@charset "utf-8";.weather-7d{ margin: 0; padding: 0; list-style: none; width: 600px; ...
2018-04-25 21:03:51
1097
原创 js实现城市首字母导航
概述本文讲述如何在前端实现城市首字母导航的效果。效果实现1、数据格式 2、实现代码var map, pyList;function init() { var wms = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, ...
2018-04-22 10:59:13
24161
原创 Openlayers4中的全屏
概述Openlayers4中，ol.control.FullScreen()可实现地图的全屏展示，可是当地图的初始化宽度和高度都不是100%的时候，全屏的时候只会宽度的100%，高度还是原来地图的高度。本文讲述如何解决此问题。效果解决解决此问题的关键还是在于全屏的时候地图的容器的高度也得变成100%。因此，解决代码如下：html,body,#map{...
2018-04-09 13:00:56
2127
原创 gps实时位置的展示
概述很多时候，我们有这样的使用场景：外业人员在外作业，我们需要知道人员的当前的实时位置和人员信息，如何实现呢？本文将为大家简单的说明该场景下我们应该实现。效果 思路解决实时位置的展示，最核心的有两点：1、数据的传输与存储；2、设备端如何和监控端进行数据交互。首先，我们来说第一个的问题：数据的传输与存储。大多时候，设备传输过来的位置信息数需要做存储的，除了个别情况外。因...
2018-04-07 13:33:54
5204
转载 【数据可视化】 D3+ArcGIS 迁徙图实现
概述用D3和ArcGIS结合做效果已经将近一年的时间，却一直没有时间整理博客，将知识分享，终于，我的第一遍博客将迎来了。效果图具体流程1.svg叠合ArcGIS Server发布的地图服务叠加展示，在ArcGIS Server的地图中有一个svg标签可以供D3来绘制。var poitMoveSvg = d3.select("#" + map.id + "_gc"...
2018-04-02 07:27:11
5444
2
原创 结合Geotools实现百度09，国测局02和经纬度的相互转换
概述本文讲述在Java中，结合结合Geotools实现百度09，国测局02和经纬度shp数据的相互转换。结果说明： 1、红色的线条是百度09的； 2、蓝色的线条是国测局02的； 3、填充的是原始wgs84的。 4、从图中可以看出，gcj02和wgs84的区别不是很大在一些不是很精确地情况下可以认为是一样的，bd09的区别稍微大一点；#...
2018-03-20 17:21:49
2060
原创 开源WebGIS开发入门-牛健平-专题视频课程
本系列课程涵盖以下知识点：1、Openlayers；2、Geoserver；3、postGIS；4、QGIS；5、Geotools；6、java web基本框架……
2018-03-19 10:21:49
4491
7
原创 开源WebGIS开发系列课程开课啦~~~
李白有诗云“烟花三月下扬州”，辛弃疾有诗道“正值春光二三月”。可见三月是个好时光，告别二月的喧嚣，伴着拂面的清风…… 借着如此好的时光，“GIS讲堂”的“开源WebGIS开发系列课程”也准备与大家见面了。初来乍到，还望大家多多照顾，下面就课程做一个详细的介绍。1、课程内容本系列课程涵盖以下知识点：1、Openlayers；2、Geoserver；3、post...
2018-03-10 11:18:47
3526
7
原创 shape文件上传与展示
概述本文讲述如何在OL中结合GeoTools实现shp数据的上传与展示。流程实现效果 使用技术jquery插件uploadify和ServletFileUpload实现shp文件的上传；ZipFile实现zip文件的解压；Geotools实现shp文件转换为geojson；openlayers4实现数据的展示。实现代码1、前端代码
2018-01-30 13:01:44
2549
原创 盘点2017，迎接2018
引言过了春节，才算是真正的过年！今天是腊月初一，离过年的日子越来越近了，在这个特殊（今天是我小侄子的一周岁生日）的日子里，盘点一下即将结束的2017年，为的就是在即将到来的2018，能够有所为，有所不为。概述今年的总结不扯没用的，用数据说话，用事实说话。今年的总结主要从工作、生活、业余三个方面展开。总结一、工作由于各方面的原因，与今年5月初加入了现在的公司与
2018-01-17 22:51:46
1102
原创 结合WebSocket和Openlayers4实现地图内容的刷新
概述本文讲述如何结合WebSocket和Openlayers4实现地图内容的实时刷新。需求概述定时接受推送的数据（tif格式）；数据的预处理与加工（png格式）；推送到前端并展示。实现效果列表内容实现思路结合WebSocket实现数据加工完后，将结果推送到前端，并在前端展示。在本实例钟，使用了后台的定时刷新机制，模拟数据推送、数据加工这个流程
2018-01-16 15:15:24
2610
Jquery封装的地图工具
2014-11-03
sqllite相关文件
2013-12-16
交通红绿灯
2013-04-17
SvgImageLayer.js
2017-10-20
PostGIS空间函数简介
2017-03-09
Arcgis for Javasctipt中常见的layer简介
2015-01-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人