一、引言

二、数据

temcat and geoserver

leaflet 调用geoserver中发布的数据

三、README

搭建环境及数据说明

插件

本地启用

界面介绍

四、网站部署

gitee 部署网站

github 部署

五、小结

一、引言

最近一周在做网络地理信息的结课作业，记录一下从零开始使用leaflet、geoserver、temcat、git等工具完成网站开发到部署。

一切的开始是师兄从百度地图爬下来的核酸检测点数据，刚好可以作为结课作业的数据。demo使用的是leaflet，并没有使用课程教的cesium。原因就是感觉未来接触三维地图开发的机会较少，决定使用二维leaflet。设计初大体分为三个功能：核酸检测点的展示、真实定位和虚拟定位、核酸检测点查询；

demo已经在gitee上发布：北京核酸检测服务

二、数据

temcat and geoserver

分别下载temcat和geoserver.war文件，配置环境变量
将geoserver.war文件拷贝到Tomcat目录下的webapps文件夹中
启动temcat，在localhost:8080/geoserver 可以启动geoserver (默认用户名:admin;密码:geoserver)
上传核酸监测点数据（shp格式）并发布

leaflet 调用geoserver中发布的数据

利用WFS服务发布矢量数据的geojson格式

发布后我们可以获取一段网址

localhost:8080/geoserver/ucas/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ucas%3Abj_hs_pois&maxFeatures=50&outputFormat=application%2Fjson

从上述网址中获取相应的参数

var urlString = "http://localhost:8080/geoserver/ucas/ows";
var param = {service: 'WFS',version: '1.0',request: 'GetFeature',typeName: "ucas:bj_hs_pois",outputFormat: 'application/json',maxFeatures:10000,srsName: "EPSG:4326"}

利用L.geojson对数据进行读取处理


var markers = L.markerClusterGroup({ chunkedLoading: true  });
function loadWFS(layerName, epsg) {var hs_points = nullvar urlString = "http://localhost:8080/geoserver/ucas/ows";var param = {service: 'WFS',version: '1.0',request: 'GetFeature',typeName: "ucas:bj_hs_pois",outputFormat: 'application/json',maxFeatures:10000,srsName: "EPSG:4326"};var u = urlString + L.Util.getParamString(param, urlString);console.log(u);          $.ajax({url:u,async:false,dataType: 'json',// success: loadWfsHandler(data),success:function (data){console.log(data);hs_points = data;}});$.ajax({url:u,dataType: 'json',// success: loadWfsHandler(data),success:function (data){console.log(data);hs_points = data;layer = L.geoJson(data, {pointToLayer: function (feature, latlng) {var title = feature.properties.poi_addres;var marker = L.marker(L.latLng(feature.properties.poi_lat, feature.properties.poi_lon));// console.log([feature.properties.poi_lat,feature.properties.poi_lon])marker.bindPopup(title);markers.addLayer(marker);markers.refreshClusters(marker)}})}});return hs_points}

三、README

搭建环境及数据说明

- leaflet 提供地图服务
- Node.js
- 数据来源：由百度地图提供北京市及周边地区的核酸检测点(json格式)

插件

- 点的聚散样式：Leaflet.markercluster
- GPS定位: Leaflet.AccuratePosition

本地启用

npm 初始化

npm init

安装liver server

npm i live-server -g

修改package.json

"script {

"server": "live-server ./ --port=8181 --host=localhost --proxy=/api:http://www.abc.com/api/"

}

启动项目 localhost

npm run server

界面介绍

part 1 核酸点的聚合效果

part 2 GPS定位

定位前请打开电脑端的定位，不然无法定位

真实地理位置定位。点击**定位**后，会加载真实地理位置；需要说明的是，定位是根据当前IP进行定位

pc端定位：定位结果国科大玉泉路校区，IP地址是在玉泉路小区

手机定位：定位结果国科大雁西湖校区

part 3

除真实定位外，也提供了虚拟的的定位作为测试功能。点击选择按钮，在地图任意选择位置点击，便会出现虚拟位置坐标;且支持按住鼠标拖动虚拟位置；清除按钮会清除虚拟位置；

当前demo只支持对一个虚拟位置进行查询

part 4 查询

真实位置查询

虚拟位置查询

四、网站部署

网站部署主要分为三个方向

部署在自己的云服务器上，买了域名，但是备案时间较长。
部署到github，国内访问不稳定
部署到gitee，国内访问稳定

所以选择在gitee上部署

gitee 部署网站

准备工作：下载git、在gitee新建仓库，添加ssh key 开启Gitee Pages服务
复制仓库的ssh

在本地新建文件夹，启用git bash 从gitee中拉取项目到本地

git clone git@gitee.com:by-q/xxxxxxx.git

将写好的项目复制到新建文件夹中
在git bash 中推送到gitee并更新Gitee Pages中

配置用户名和邮箱

git config user.name "your name"

git config user.emails "your emails"

讲文件推送到gitee

git add ./

git commit -m "xxxx"

git remote add origin https://gitee.com/by-q/xxxxxxx.git

vscode 对上述推送有另一种方式，在通过git clone 拉取到本地后，本地会有一个隐藏的文件夹git

例如我更新README后，git会检测文件的改动

之后对更改点击加号加入暂存，依次按照箭头方向，添加远程库后需要添加远程库url,和仓库名称xxxxxxx；最后点击vscode左下角的同步按钮即可。

url :https://gitee.com/by-q/xxxxxxx.git

仓库名：xxxxxxx

github 部署

与gitee操作步骤一致，在settings下面的Pages服务，可以部署发布

五、小结

关于demo

整体上功能很简单，其实没有涉及到地理的空间分析，主要是从开发到部署流程整体走了一遍。在开发过程中，感觉较难的不是功能的开发，而是CSS的设计，一个好的审美布局，颜色搭配真的可以拯救一个网站。就侧边栏的颜色和布局我试了好几种方案，最终在一堆丑的方案下选了现在的方案。

关于leaflet

除此使用leaflet的文档，会跳出一个页面，下意识认为是说明性的文档，没有看就随手关掉。直到有一次看到这个页面的logo设计是蓝黄搭配；本来是下图。

简言概之就是：leaflet的作者将leaflet的命运与他的国家的命运联系在了一起，同生共死。

关于弯路

在用leaflet之前尝试用了openlayers,但感觉leaflet的插件功能十分强大，很适合我这菜鸡，果断改了leaflet。部署的时候尝试了wrodpress、vuepress，网上教程标题都是写着：“个人博客快速搭建，静态网页快速搭建”，脑子一抽我的demo也是静态的，不需要调数据库，说不定可以，结果越整越复杂，最后还是走小白路线。

关于欠缺

这次demo没有使用vue框架，上学期看的视频教学没有实际的用到，有点可惜。快做完demo才想起vue。那时已经懒得再改了（下次一定！）

一周小结：webgis—北京核酸检测—demo相关推荐

网易北京：全员核酸检测为阴性园区环境检测为阴性
1月23日消息,据网易通报,1月22日,居住在大兴区天宫院街道融汇社区的网易北京某员工被诊断为新冠肺炎确诊病例. 网易北京紧急采取防控措施,于1月22日对全体北京员工进行核酸检测,结果均为阴性,并在当 ...
互联网晚报 | 07月02日星期六 | 北京健康宝核酸检测天数计算规则调整；上海鼓励用人单位吸纳失业3个月及以上人员...
北京健康宝核酸检测天数计算规则调整近日,北京健康宝发布新版,结合北京市最新防疫政策及用户反馈,对扫码结果展示.到访人登记簿.疫苗接种状态等功能进行优化升级.调整后,健康宝核酸检测天数严格按照日历日计 ...
北京清华长庚医院核酸检测流程
2022年第一篇,写写北京清华长庚医院核酸检测流程首先切记,不要在114上挂号,在京医通上挂号,微信关注'京医通',没有绑定医保卡的绑定一下子,没有注册的注册一下子,然后就可以在上面挂号了,有人问了 ...
互联网晚报|12/27星期二| 国家卫健委：取消入境后全员核酸检测和集中隔离；新冠肺炎更名为新冠感染；知网回应被罚8760万...
国务院联防联控机制:取消入境后全员核酸检测和集中隔离国务院联防联控机制26日晚发布<关于对新型冠状病毒感染实施"乙类乙管"的总体方案>,方案提出,优化中外人员往来管理 ...
京东健康上线“新冠病毒”核酸检测在线预约服务
近日,京东健康与北京金域医学实验室达成合作,上线"新冠病毒"核酸检测的在线预约服务,成为全国首个提供核酸检测服务在线下单及预约的平台. 据介绍,用户通过京东APP搜索"核 ...
用 Elasticsearch 统计做了几次核酸检测？怎么破？
1.两个实战场景问题事出有因,近期的两个问题比较类似: Q1:如何在 Elasticsearch 实现统计做了 5 次(含以上)核酸检测的人员名单及详情? Q2:请教下大家,业务场景要记录每个人的每 ...
使用EXCEL制作核酸检测结果异常人员活动轨迹地图
1 引言 8月23日,我市在域外来(返)沈人员核酸常规筛查中发现3人核酸检测结果异常. 官方发布的人员轨迹信息,整理以下表格.按日期先后顺序排序. 使用[小O地图EXCEL插件软件]完成如下数据处理: ...
核酸检测抽签系统(每次在每个班级选择%22)easyexcel+ZipOutputStream
一.前情提要根据通知,每天从每个年级抽22%的人数去做核酸,五天做到全覆盖,那么问题来了,前四天做完之后是88%的人做完了,第五天12%的人没做,剩下的10%就要从做过的人中抽取,那么要怎么实现,而 ...
互联网晚报 | 马航MH370起落架舱门残骸被发现；香港前往内地和澳门无须在口岸进行核酸检测；网传辉瑞新冠特效药开启网售...
马航MH370起落架舱门残骸被发现,或证明飞行员有犯罪意图据英国<泰晤士报>当地时间12月12日报道,马航MH370失联谜团的背后可能存在犯罪意图.调查人员25天前在马达加斯加一户渔民家 ...

一周小结：webgis—北京核酸检测—demo

一、引言

二、数据

temcat and geoserver

leaflet 调用geoserver中发布的数据

三、README

搭建环境及数据说明

插件

本地启用

界面介绍

四、网站部署

gitee 部署网站

github 部署

五、小结

一周小结：webgis—北京核酸检测—demo相关推荐

最新文章

热门文章