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

By-Q

已于 2022-09-22 14:50:20 修改

阅读量1.1k

点赞数 5

分类专栏： webgis 文章标签： git web

于 2022-05-23 13:55:22 首次发布

本文链接：https://blog.csdn.net/weixin_44599604/article/details/124918765

版权

webgis 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

一、引言

二、数据

temcat and geoserver

leaflet 调用geoserver中发布的数据

一、引言

最近一周在做网络地理信息的结课作业，记录一下从零开始使用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 = null
    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"
    };
    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也是静态的，不需要调数据库，说不定可以，结果越整越复杂，最后还是走小白路线。