从零开始,构建电子地图网站
才华横溢吴道简
实践出真知。
展开
-
GIS算法:4_空间检索RTree原理
RTree主要是为了快速进行空间检索。维基百科关于它的释义如下:R树是用来做空间数据存储的树状数据结构。例如给地理位置,矩形和多边形这类多维数据创建索引。R树是由Antonin Guttman于1984年提出的。人们随后发现它在理论和应用方面都非常实用。在现实生活中,R树可以用来存储地图上的空间信息,例如餐馆地址,或者地图上用来构造街道、建筑、湖泊边缘和海岸线的多边形。然后可以用它来回答“查找距离我2千米以内的博物馆”,“检索距离我2千米以内的所有路段”(然后显示在导航系统中)或者“查找(直线距离)原创 2020-06-08 21:58:28 · 1381 阅读 · 0 评论 -
从零开始,构建电子地图网站----索引目录
从零开始,构建电子地图网站:0_1_软件安装https://blog.csdn.net/sinat_41310868/article/details/104742864从零开始,构建电子地图网站:0_2_数据处理postgishttps://blog.csdn.net/sinat_41310868/article/details/104742927从零开始,构建电子地图...原创 2020-04-11 10:13:09 · 1124 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_20_腾讯云部署srpingboot工程
这是最后一步了。我们之前已经在云主机上安装了jdk和postgresql,并且配置了postgresql可以通过ip访问,数据也导进了云主机,也测试过了springboot本地部署。一、配置springboot工程清理targetIDEA打开gismap这个工程。Maven——Lifecycle——clean,清一下target。配置前端请求url打开文件\gi...原创 2020-03-10 07:56:33 · 441 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_18_腾讯云部署java web系统预装
程序开发完成后,一定要部署到服务器上,要不然别人怎么看?以前都要自己买硬件,部署服务器,相对麻烦,现在得益于云技术的发展,部署服务器变得简单多了。我们这边选择腾讯云服务器进行部署。首先要预装一下系统。一、安装xftp和xshell在部署云服务器之前,我们要先在自己的电脑上安装必要的工具,将程序包远程上传的工具xftp和xshell。这个可以在某宝买一个安装包,照着安装...原创 2020-03-09 19:48:25 · 331 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_17_Springboot2 web工程打包本地部署
我们的程序最终还是要部署到云服务器上,否则是没有办法通过外网访问的。这里先部署到本机,稍稍预演下。非常简单。一、工程打包用IDEA打包,首先在maven的Lifecycle中,先clean一下,再package一下,稍等一会儿,在Project中的target目录下,就会出现打包好的jar包。gismap-0.0.1-SNAPSHOT.jar。二...原创 2020-03-09 19:48:07 · 372 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_16_VUE打包合并到后端
我们要先把vue打包,合并到spring boot中,然后打包后端工程,统一上线。一、vue配置抽出因为打包之后,文件都会混在一起,就很难修改了,所以要先把可能会修改的配置提取出来,再进行打包。我们把请求后端的url提取出来。1.config.js在static中新建config.js文件。转存失败重新上传取消window.g = { BASE_U...原创 2020-03-09 19:47:53 · 378 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_15_VUE+leaflet+springboot数据交互功能实现
还是在HistoryMap.vue中实现最初的设计。Vue适合搭建交互简单的前端工程,像是整合leaflet这样,涉及到地图交互,组件之间的数据通信,挺麻烦的,最好还是用原生的来写。不管如何,我们把这个工程完成吧。因为通信比较复杂,所以取消了drawer抽屉移出属性table,直接用的leaflet的bindPopup。一、效果图二、文件结构文件结构长这样。Ico...原创 2020-03-09 19:47:36 · 1006 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_14_springboot跨域+vue+axios网络请求
我们的程序是前后端分离的。后端是springboot,在IDEA中启动GismapApplication.java,访问http://localhost:8080/history/geometry?category=prefpgn&start=-5000&end=-221,就能看到数据了。前端是vue,cmd到vue-gismap下,npm run dev,访问http:/...原创 2020-03-09 19:47:20 · 432 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_13_VUE整合leaflet
一.效果图我们大概要做这样的地图底图,腾讯底图,上面覆盖物有点point和面polygon,点击覆盖物会出现触发事件。页面长成这个样子,因为仅作示例用,所以写在了helpdocument上面,除了地图外,覆盖物有一个点、一个标签、一个面,右侧是chrome浏览器的开发者工具(crtl+shift+i),触发事件在工具上(console)打印了日志。二.安装leaf...原创 2020-03-09 19:47:06 · 730 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_12_创建工程VUE2脚手架+element布局+router路由
前端框架很多,vue相对来说上手快点,所以这里选用vue。地图js api也很多,百度、高德、腾讯、天地图都有,都是基于其自身的地图地图封装的,我们这里选择一个更经典、更原生的leaflet,这样就可以不囿于地图底图限制,且leaflet是瓦片加载,性能更好些。写程序,不管是后端,还是前端,跟造房子有点像,都需要先有框架,再往里面填塞。我们的前端程序,大致是这么个步骤。1.先用vu...原创 2020-03-09 19:46:48 · 533 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_11_引用geojson
在上篇中,我在MapController类中新建了一个方法JSONObject geometryToJson(Geometry geometry),用以将geometry对象转为json。这个方法有点问题,首先,point是一个点,只有一组坐标,polygon如果有孔洞,怎么表示?multipolygon都是多部件还好,要是有带孔洞的polygon怎么办?polyline怎么表示?而且我在...原创 2020-03-09 19:46:32 · 383 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_10_try-catch+配置log日志
接上篇,给程序加上注释、try-catch、log日志等。注释非常简单。在接口方法上输入/**,按下回车,该写什么就写什么吧。Try-catch在觉得会出问题的地方,加上try-catch,try没成功,就会catch异常,将异常log出来,用以排查问题。我把注释、try-catch、log都加在了controller上。一、新建日志配置...原创 2020-03-09 19:45:46 · 339 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_9_web+InitializingBean启动加载本地缓存
我有点忘了当初的宏愿了,所以要回到网站上看看,http://worldmap.harvard.edu/maps/chinaX。先下载个有道翻译,看下左侧的Overlays,忽然发现除了《中国历史地图集》上有的政区和治所沿革外。还有很多自然地理、农业地理、军事地理,人口变迁、海岸线变迁、黄河变迁的图层,这些数据都没有。那还是先用现有的数据,参考《中国历史地图集》的索引顺序,以朝代划分图...原创 2020-03-08 23:20:47 · 490 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_8_mybatis+TypeHandler+jts处理geometry
接上文,我们的数据里是有几何类型的,点和面。我们在navicat中运行一条sql:SELECT geom FROM v6_time_cnty_pts_utf_wgs84 LIMIT 1查出的结果geom是0101000020E6100000A165DD3F16C55B4089963C9E96814340这种格式是geohash编码的。再运行另一条sql:SELECT st_aste...原创 2020-03-08 23:17:45 · 807 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_7_IDEA新建web工程mybatis+postgresql+springboot2
本例细化到每一步骤的操作。网上不太好找详细的mybatis整合postgresql数据库搭建springboot2框架web工程的教程。所以以下我就一步一步详解,写一个细化的傻瓜教程。因为对于初学者来说,教程不够细化,就没有什么可复用性。以下,照着一步一步操作,可以搭建出来一个web工程。另外,写教程不附赠源码,就是耍流氓,最后有git地址。一、开发环境:开发IDE...原创 2020-03-08 23:14:26 · 640 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_5_git上传代码
一、git上传代码Git是一个开源的代码托管平台。把之前写的py脚本上传上去,做一个远程备份。Git的安装参见:https://www.jianshu.com/p/33108325fc87先安装git,再安装git小乌龟,再安装中文语言包。安装好了,在本地搞一个文件夹,作为本地仓库,把py脚本放进来,右键——TortoiseGit——推送。cnty_pts...原创 2020-03-08 23:08:10 · 265 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_4_数据处理python(2)
八、shp polygon文件写入pg库因为postGIS导入shp文件没有字段备注和表说明,且如果字段名过长,还会截短字段名。所以为了规范化,我这里不用PostGIS 2.0 Shapefile and DBF Loader Exporter工具导入shp文件,都用py脚本把数据读入postgresql数据库中。为了使程序简单明了,沿用之前的流程,将程序分成两个部分,第一部分,shp...原创 2020-03-08 23:04:56 · 378 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_3_数据处理python(1)
一、环境搭建Python往postgresql中导数据,至少需要3个库包,gdal、shaply、psycopg2。先一个一个来。1.安装gdal直接安会有问题,先去下个安装程序,https://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal根据python的版本选择程序。如果不知道python的版本,可以打开cmd,输入python,回车...原创 2020-03-08 23:00:45 · 848 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_1_软件安装
软件配置:后端开发软件:IntelliJ IDEA,语言JAVA。数据处理软件:pyCharm,语言python。前端开发软件:sublime,语言JavaScript。数据库:PostgreSQL+PostGIS,语言SQL。数据查看软件:QGIS。浏览器:谷歌chrome软件安装:后端 IntelliJ DEA后端开发IDE有一些,我用过ecli...原创 2020-04-06 10:50:48 · 649 阅读 · 0 评论 -
从零开始,构建电子地图网站:0_2_数据处理postgis
软件安装完,开始数据处理。从China Historical GIS下载一份数据。一、数据下载数据来源:China Historical GIS:https://sites.fas.harvard.edu/~chgis/data/chgis/v6/先下载一份时间序列数据:Download CHGIS V6 TIME SERIES Datahttps://dat...原创 2020-03-08 22:53:57 · 1177 阅读 · 2 评论 -
从零开始,构建电子地图网站:0_0_.目标确立与拆解
从零开始,做出一个电子地图网站。0_0_.目标确立与拆解一、目标:做出一个中文版的中国历史地理电子地图网站,样例就是哈佛大学世界历史地理电子地图。网址:http://worldmap.harvard.edu/maps/chinaX界面:二、目标拆解从页面分布上看,最上面是一些操作控件(Sign in、Create Map、Add Layyer、Ident...原创 2020-03-08 22:46:59 · 736 阅读 · 0 评论