- 博客(444)
- 资源 (63)
- 收藏
- 关注
RSS订阅原创 geoserver矢量切片加密与调用
本文，讲的是有关安全的话题。概述GIS的数据一直是比较敏感的，所以数据安全也是一个“老生常谈”的话题。本文利用geoserver的矢量切片插件对数据进行发布，通过自己写的中间接口实现矢量切片的加密，并修改mapboxGL源码，添加数据的解密与展示。实现效果实现1. MapboxGL 2.X离线时候的token强认证2.X的mapboxGL是有token的强制认证的，离线的时候我们可以通过修改源码取消这个强制认证。2. geoserver矢量切片加密大致流程如下：修改vect.
2022-04-26 12:45:38
1291
原创 qgis制作离线切片包并发布调用
概述最新版本的qgis既可以做栅格切片，也可做矢量切片，切片的保存格式可以是文件夹也可以是mbtiles的打包文件。在日常的项目中，如果是文件夹的形式在做部署的时候会很麻烦，所以建议大家用mbtiles的打包文件，同时mbtiles的打包文件也经常用在移动端的离线地图。效果实现本文用的是最新版的qgis(3.24.1-Tisler),用OSM作为测试，用node写了一个简单的切片服务，实现代码如下：const sqlite3 = require('sqlite3');const express
2022-04-13 16:23:00
2219
1
原创 websocket实现GPS数据的实时推送与地图的展示(优化)
概述前两天，发布了一片文章websocket实现GPS数据的实时推送与地图的展示，文章发出后引来了不少读者的关注，也有不少读者要求做进步一优化。本文应大家的要求，对上文的内容做一个优化，优化地方包括：加入了GPS方向的展示；加入了GPS精度的展示；加入了GPS轨迹的展示；效果实现node模拟数据const io = require('nodejs-websocket')let connection = nulllet gps = {}for (let i = 0; i <
2022-03-29 20:05:44
4375
3
原创 websocket实现GPS数据的实施推送与地图的展示
概述实时展示GPS的数据是webgis中比较常见的一个需求，本文通过nodejs-websocket模拟GPS数据的更新，实现GPS数据的实施推送与地图数据的展示。效果实现nodejs-websocket模拟数据// websocket.js// websocket.jsconst ws = require('nodejs-websocket')const createServer = () => { let server = ws.createServer(connect
2022-03-27 23:02:21
4794
1
原创 geoserver图层中的维度
概述在geoserver图层发布的时候有一个tab面板叫维度，里面包含了时间和高度两个维度，本文就讲一下geoserver有关维度的内容。效果数据来源本文测试数据来源于中国地震台网——历史查询 (ceic.ac.cn)，查询并下载了2012年以后震级大与四级的数据。下载下来后转成csv导入到qgis中，并添加字段date，类型日期，并通过字段计算器输入公式to_date(time)给字段赋值。geoserver发布数据先添加shp数据源，再发布服务，发布服务的时候维度的配置如下图。服务调
2022-02-16 22:54:48
988
1
原创 qgis中加载矢量切片
概述qgis既可以做矢量切片，又可以加载矢量切片。本文以geoserver作矢量切片，并在QGIS中进行加载展示。效果说明：矢量切片是用geoserver做的；服务中只有两个图层：省边界和省会城市；实现1. 添加矢量切片上图中，两个配置的地方：// url:http://localhost:8086/geoserver/gwc/service/tms/1.0.0/sfmap:layer_base@EPSG:900913@pbf/{z}/{x}/{-y}.pbfhttp://loc
2022-01-10 10:19:08
2423
原创 地图放大镜的实现
概述闲来无事，就做一个花里胡哨的功能：地图放大镜，从中可以学习：1、根据坐标计算对应级别的切片；2、canvas绘图。实现效果实现思路注册map的pointermove事件；通过当前级别+放大级别，计算当前坐标所在放大级别对应的切片；请求切片图片，并绘制到canvas上面；实现代码const tileSize = 256const canvas = document.createElement('canvas')canvas.width = tileSizecanvas.heig
2021-11-25 23:50:23
1394
2
原创 webgis中的比例尺实现
概述比例尺在地图中是一个非常重要的概念，有着辅助读图的作用。本文在ol框架下，实现webgis中的比例尺功能。实现效果概念在课本中，对其的定义是：地图上所表示的空间尺度称作比例尺。在webgis中，比例尺代表的是一个像素代表实际中多少米，因此在不同的级别比例尺不同。在webgis中，跟比例尺对应的还有一个概念叫做分辨率。在标注切片下，分辨率和比例尺的对应关系如下：实现在ol中比例尺的实现代码逻辑如下：const minWidth = 60const dom = document.getE
2021-11-19 22:07:37
825
原创 Java实现地图的导出
概述**前文**讲了在前端实现地图的导出，本文简单的通过java实现一下后端地图的导出。实现效果实现代码package com.lzugis.image;import sun.misc.BASE64Decoder;import javax.imageio.ImageIO;import java.awt.*;import java.awt.image.BufferedImage;import java.io.ByteArrayInputStream;import java.io.Fil
2021-11-17 22:41:44
1999
原创 写给毕业生的面试建议
虽然说“金九银十”，但对于毕业生，只要还没毕业好像都是求职期。最近，作为面试官也面试了很多，在面试的聊天中，我觉得他们应该可以表现的更好，所以本文从我作为面试官的角度出发，给毕业生们提点有关简历和面试不太成熟的建议。简历之所以叫做**“简历”**，就是在制作的时候需要满足：1.“简”，用简明扼要的方式；2.“历”，指的是经历，包括学习经历、实习/工作经历等。一般来说，按照重要程度毕业生的简历中应该包括以下几个方面。1. 基本信息基本信息写姓名、性别、籍贯、联系方式、政治面貌这五部分就可以了，最好.
2021-11-16 23:32:07
459
原创 【node爬虫】通过高德接口爬取地址的经纬度
概述通过地址的经纬度在GIS中我们称之为地理编码，与之对应的就是通过经纬度获取地址，被称为逆地理编码。不论是地理编码还是逆地理编码，在我们实际的工作、学习中都会有很多的场景，本文讲述的在node环境下，通过高德API实现经纬度数据的获取。效果实现在本示例中，首先将地址数据导入到数据库中，同时将获取到的经纬度数据存储在数据库中。实现代码如下：const pgConfig = require('./model/pgConfig');const pg = require('pg');cons
2021-11-15 17:53:57
2015
1
原创 结合html2canvas实现openlayers中区域地图导出
概述GIS的“5M”应用中，有一个非常重要的应用领域——制图（Mapping）。然而现在的趋势是webgis的应用更为广泛，如何在web端实现地图的制图、导出与打印就是一个非常有用的功能，本文将结合html2canvas实现区域地图的导出。实现后效果实现思路实现代码const dragPanInteraction = map .getInteractions() .getArray() .find(interaction => { return interaction
2021-11-14 11:23:58
1234
1
原创 GISer开发者的技能清单
申明：本文内容仅代表个人观点，同时因个人能力有限，如有遗漏和错误之处，还望各位看官批评指正。一、WHY为什么要写这篇文章，是为了劝退初学者，还是为了秀自己，还是图财图色……我没有，别瞎说，不是我！我是“牛老师”，为人师者，当然是为了“传道、授业、解惑”了。上面不正经了一分钟，下面我们进入正题。为什么打算写这篇文章，原因是很多添加我微信的人不是学生就是刚入行的，一些寻找问题答案的，一些是寻找学习资料的，有很大一部分的是有关职业发展与规划的。据我了解很多高校没有设计开发相关的课程，即使有的设计了也没有显
2021-11-11 00:30:43
3051
3
原创 OL中通过tileUrlFunction实现多底图加载
概述业务发展好了，肯定会有一些国际业务，会用到全球底图，但是又想国内的又想用国内的，本文就结合openlayers中的tileUrlFunction加以简单实现。效果实现代码const tile = new ol.layer.Tile({ visible: true, source: new ol.source.XYZ({ tileUrlFunction(zxy, pixelRatio, proj) { const [z, x, y] = zxy let u
2021-11-09 23:42:05
1140
1
原创 分享一个切片网格的生成函数
概述本文分享一个切片网格生成的方法，并在openlayer中加以测试展示。效果实现代码function getMapTileGrid(extent, zoom, tileSize = 256) { let resolution = 156543.03392804097 let resolutions = [] for (let i = 0; i < 19; i++) { resolutions.push(resolution) resolution = reso
2021-11-08 22:42:08
344
原创 turf.js实现多边形分割
概述在做编辑的时候，难免会遇到多边形的分割问题，本文用turf.js实现此功能。效果实现思路实现代码function polygonCut(poly, line, tolerance = .001, toleranceType ='kilometers') { // 1. 条件判断 if (poly.geometry === void 0 || poly.geometry.type !== 'Polygon') throw ('传入的必须为polygon'); if (l
2021-11-07 11:29:59
3574
6
原创 webgis中捕捉功能的实现
概述本文以openlayers为例，结合turf.js讲一下webgis中绘制和编辑时如何实现捕捉功能。效果为了验证捕捉的结果是否正确，就将绘制的几个面做了一个合并的测试，效果如下：实现思路输入要捕捉的图层，此处为vectorSource捕捉的范围，单位是像素鼠标移动时的坐标输出满足条件的点捕捉工具的舒适化参数如下：实现的大致流程如下：实现代码 /** * 获取捕捉点 * @param {Array} coords - 传入坐标 * @retu
2021-11-06 09:01:45
703
1
原创 mapboxGL2中Terrain的离线化应用
概述mapboxGL2中比较大的一个更新就是加入了Terrain，可以实现三维的立体效果，本文书接上文“mapboxGL2离线化应用”，说说Terrain的离线化应用。效果实现分析打开官方例子，F12打开调试工具；在网络请求里面查找terrain-dem,接口及返回数据格式如下：根据上面返回的数据，我们不难理解每个字段的含义，这里面核心的：description，里面描述的是dem到RGB的转换算法height = -10000 + ((R * 256 * 256 + G * 256
2021-09-17 00:04:33
1905
1
原创 mapboxGL2离线化应用
概述mapboxGL升级到2的版本之后，用官方的引用token是必须要有的，为了能够离线使用，我们需要对源码做一定的修改后编译，本文讲述如何进行mapboxGL的离线应用。效果实现clone代码git clone https://gitee.com/lzugis15/mapbox-gl-js.git安装依赖npm install-- 建议用cnpm，安装速度会快点cnpm i修改源码token强制认证是在文件src/ui/map.js中，注释掉2871行的代码this.
2021-09-15 07:38:05
3194
2
原创 openlayers4+中高德导航路径的实现
概述许久未更新了，今天特此更新一篇，以示我还在，我也会一直在。今天的更新比较简单，就是在openlayers4+中实现类似于高德导航路径的样式。效果实现思路用ol.layer.Vector的styleFunction，返回一个styleCollection；ol.geom.LineString的getCoordinateAt接口实现线上等距的箭头展示；箭头方向通过rotation参数来控制，其计算公式是const angle = (Math.atan2(point0[0] - point[0
2021-09-13 22:36:23
1481
3
原创 使用roolup构建你的lib
概述Rollup, 和 Webpack, Parcel 都是模块打包工具(module bundler tool), 但是侧重点不同, 我们要聊的 Rollup更加适合用于构建lib 而 Webpack, Precel 更加适合开发应用。本文，将结合一个简单的例子说说如何使用Rollup构建自己的lib。实现目标创建一个完整的rollup的lib工程；区分开发和生产配置，方便开发测试；引入第三方库（如：ol）,并实现第三方库的打包；实现步骤一 rollup基础1. 初始化工程cnpm
2021-07-31 08:09:50
615
原创 topojson转换与应用
概述topojson很早就问其大名，但日常用的比较多的还是geojson为主，最近在项目里面开始用到了，所以就写此文记录一下。topojsonGeoJSON是用于描述地理空间信息的数据格式。github上对TopoJSON的解释是： GeoJSON 按拓扑学编码后的扩展形式。TopoJSON 消除了冗余，允许将相关几何图形有效地存储在同一文件中。对比1.文件大小2.渲染效率转换以及在mapboxGL中的使用1.转换借助topojson-client，可方便的实现topojson到
2021-07-17 18:45:30
1554
原创 openlayers中海图的加载
概述在openlayers中直接加载海图会有偏移，这是因为海图的坐标是做了便宜的，所以需要定义海图的坐标，本文将讲述如何实现，并对比OSM和高德。效果实现<!DOCTYPE html><html><head> <title>XYZ</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://openlayers.org/en/v4
2021-07-07 13:51:32
1326
原创 小程序物流详情展示的实现
概述在日常生活中，我们会很方便的用小程序查看实时的物流详情，本文通过高德API模拟物流的路径数据，实现小程序中物流详情的展示。效果准备因为需要调用高德的API，所以需要先将https://restapi.amap.com添加到小程序的request合法域名里面。实现<template> <view class="content"> <view class="map-box"> <map class="map" :lat
2021-06-24 13:52:55
825
1
原创 mapboxGL中sprite的前端生成
概述在前面的文章讲述了mapboxGL中的sprite以及其java中的生成方式，本文将结合Promise讲讲其前端的生成方式。效果实现思路通过新建一个Image，并拿到image的宽和高，动态的计算canva的大小；结合Promise.all实现sprite.json的输出；实现1. 生成图标库<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t
2021-05-26 21:02:14
703
1
原创 mapboxGL列表和地图联动
概述列表和地图联动是webgis中一个非常常见的功能，本文讲一下在mapboxGL中结合vue如何实现此功能。效果实现思路1. 获取数据获取数据并将数据保存起来；2. 列表展示列表简单的用ul、li来实现。3. 地图展示数据获取之后，通过document.createElement()的方式创建marker，将结果在地图上展示。4. 列表地图联动联动存在两个交互：鼠标移动和点击选中，所以需要两个变量用来记录当前鼠标经过的和点击选中的，如果鼠标经过的和点击选中发生变化的时候，去设置对应
2021-05-10 22:39:09
808
原创 mapboxGL多图对比
概述前面的文章mapboxGL卷帘里面实现的时候已经有涉及多图联动了，本文在此基础上进一步优化，加入鼠标位置展示。效果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ePw9Y5iC-1620480677395)(https://upload-images.jianshu.io/upload_images/6826673-3942ed8f06523194.gif?imageMogr2/auto-orient/strip)]实现思路注册map的mouseover事件，
2021-05-08 21:31:58
534
原创 mapboxGL卷帘实现
概述卷帘对比是webgis中常见的一种对比方式，本文讲述一下如何在mapboxGL中实现卷帘对比。效果实现思路通过input[range]实现卷帘的操作；通过地图的事件实现两个地图的联动操作。实现代码<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge
2021-05-07 18:56:26
1094
原创 主流webgis框架介绍与对比
概述想写本文，主要是源于前两天有个老师找到我说让我录一个大概半个小时的视频，跟大家分享一下各webgis框架之间的区别以及在应用的过程中应该如何选择。其实之前也有学员问过类似的问题，当时只是针对他们的疑问做了回答。虽然各个框架都有用过，有几个还算比较熟悉，但并没有全面的对各个框架进行过比较，刚好借着这个机会，一方面重新对各个框架有一个比较全面的认识，另一方面对各个框架做一个比较，以便后面使用的时候有一个较好的选择。框架介绍Openlayers最新版本v6.5.0简介OpenLayers ma
2021-04-23 10:58:24
3498
9
原创 解答一些GISer开发者的疑惑
对于大部分学GIS的学生来说，“开发能力弱”应该是大部分人的状况。这种“状况”的产生，跟高校的课程背景、师资力量、课程设置等有关系，跟个人的学习意愿、学习能力、学习方法也有关系，还跟企业的发展方向、业务结构、培养方式有关系，所以，这是在诸多的因素下共同产生的一个结果，当然这里面不排除一些比较厉害大大佬们，可以再技术这条路上走的很远很远，本文不是写给他们看的。但是作为普通的GISer和GISer开发者，那我们应该如何破这个局或者做我们的职业规划走出这个困境呢？在前面的第一部分里面我提到了“GIS是一个工具”
2021-04-10 16:50:32
561
3
原创 投资自己
概述晚间翻看了去年回学校分享的PPT，最后的张片子，说的是有关“投资”的事情，内容是我毕业这么多年来总结的一点心得，觉得不论是否正确还是有必要分享出来，希望对看到此文的人有所启示，仅此而已。投资自己“投资自己”是第一张片子的标题，里面提到了“最好的投资”，即：大脑、人脉、身体。1. 投资身体俗话常说“身体是革命的本钱”，是的，没错。当讲到这张片子的时候老师问了我一个问题：这三个如果排优先级的话，哪个最先？我当时是毫不思索的回答了“身体”。说到“身体”，我想大家的第一反应是“健康”，没错，“健康”
2021-03-30 23:35:50
383
2
原创 qgis切片下载与本地部署以及调用
概述关于切片下载以及切片的本地部署的问题，本来我觉得挺简单的，但是一直会有有好多童鞋问我，所以借此文章，将这件事情在此说明清楚一下。工具1. qgis借助qgis的插件QMetaTiles插件实现第三方地图的切片下载。2. nginx通过nginx，将下载的切片提供xyz的服务出来。3.mapboxGL通过mapboxGL调用发布的切片服务。实现效果操作1.qgis中添加xyz服务浏览器——>XYZ Tiles——>右键——>新建连接，输入连接名称，在URL框中输
2021-03-23 22:32:47
3869
2
原创 Geoserver的ImageMosaic数据源
概述ImageMosaic翻译成中文就是影像拼接，适用于多个影像文件需要在一起展示的场景，针对这种场景，我们可以对每一个影像数据发布服务，完了通过layergroup的方式统一成一个服务，很显然，如果当影像很多的时候这种操作既耗时又费力，这个时候你就需要用到geoserver的ImageMosaic，它可以实现将一个文件夹下面的所有影像文件发布成一个服务的需求。效果本文所用的测试数据是北京30m分辨率的dem数据，为方便测试按照下图切割成了四份，为防止中间会存在数据的丢失，在边缘区域将范围扩大了一点。
2021-03-09 10:33:40
1633
原创 点连线的思路与js的简单实现
概述很多时候，我们会有一堆点连成线的需求，但大多数情况下这些点是无序的，导致现有的软件的连线结果并不是我们想要的，这也是本文产生的原因。实现思路为了能够更好地完成点连成线的需求，因此我们需要确定一下起点，完了之后通过起点去逐个点找该点的下一个点，并将该点的坐标记录下来，直到找到终点，这个查找结束。实现结果实现代码function Points2Line(start, data) { if (!this instanceof Points2Line) { return
2021-03-05 17:48:22
1765
1
原创 QGIS操作教程——图说中国人口
概述如果用一句歌词来描述QGIS的话，我想应该是：有人问我你究竟是哪里好，没见过你的人不会明了。从本篇文章开始，我将开始写一系列有关QGIS操作的文章，那么本文，就先开个好头，讲讲“图说中国人口”，这里面涉及到：1、栅格数据的配准；2、创建并编辑矢量数据；3、栅格数据的分区统计；4、简单配图与制图；5、数据的导出。本文涵盖的内容比较多，各位看官要看仔细了。数据说明人口数据我们将使用哥伦比亚大学的网格化人口2.5KM分辨率数据集；区域数据我们用的是源自国家基础地理信息网1:100w的地市级别的数据。操
2021-01-31 18:07:44
2247
1
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关注的人