目錄

?

?

系統運行截圖

所使用的技術

前端

后端

Geoserver

數據庫

---

?

系統運行截圖

輸入一個城市，比如烏魯木齊，就會生成一個黃色的圓環，并且直接定位到那邊！

點擊左下角的table內的數據，也可以定位：

這里地圖界面是飛過去的，來個動態圖（這里GIF針數，不太好）：

?

這里目前提供了web版的系統，本人新電腦還沒到，等到了，就準備寫一個C++|Qt版本的本地GIS定位系統，目前的電腦堅持了5年了，系統重來沒有恢復過，現在已經不太好使用了，等新電腦來到時候就可以出一個C++版本的本地GIS定位系統！

?

所使用的技術

這里后端使用的是java的spring boot；

前端框架是vue-cli，輸入框等表格使用的element ui。找到地帶后黃色的圈使用的是echarts，地圖在web顯示使用的是leaflet。

這里前后端是分離的。前端使用axios向后端請求數據。

本地GIS使用Geoserver作為服務器。而地圖素材使用全能電子地圖下載器，下載的 谷歌 地圖。

地理坐標等相關信息存儲在mysql數據庫中。

?

?

前端

這里使用的大框架是vue-cli，控件等使用的element ui，找到地帶后黃色的圈使用的是echarts，地圖在web顯示使用的是leaflet。

這里點一下關鍵的知識點，把leaflet官方的WMTS瓦塊地圖插件在vue cli中使用

/**** 插件移植開始*/$L.TileLayer.WMTS = $L.TileLayer.extend({defaultWmtsParams: {service: 'WMTS',request: 'GetTile',version: '1.0.0',layer: '',style: '',tilematrixset: '',format: 'image/jpeg'},initialize: function (url, options) { // (String, Object)this._url = url;let lOptions= {};let cOptions = Object.keys(options);cOptions.forEach(element=>{lOptions[element.toLowerCase()]=options[element];});let wmtsParams = $L.extend({}, this.defaultWmtsParams);let tileSize = lOptions.tileSize || this.options.tileSize;if (lOptions.detectRetina && $L.Browser.retina) {wmtsParams.width = wmtsParams.height = tileSize * 2;} else {wmtsParams.width = wmtsParams.height = tileSize;}for (let i in lOptions) {// all keys that are in defaultWmtsParams options go to WMTS paramsif (wmtsParams.hasOwnProperty(i) && i!="matrixIds") {wmtsParams[i] = lOptions[i];}}this.wmtsParams = wmtsParams;this.matrixIds = options.matrixIds||this.getDefaultMatrix();$L.setOptions(this, options);},onAdd: function (map) {this._crs = this.options.crs || map.options.crs;$L.TileLayer.prototype.onAdd.call(this, map);},getTileUrl: function (coords) { // (Point, Number) -> Stringlet tileSize = this.options.tileSize;let nwPoint = coords.multiplyBy(tileSize);nwPoint.x+=1;nwPoint.y-=1;let sePoint = nwPoint.add(new $L.Point(tileSize, tileSize));let zoom = this._tileZoom;let nw = this._crs.project(this._map.unproject(nwPoint, zoom));let se = this._crs.project(this._map.unproject(sePoint, zoom));let tilewidth = se.x-nw.x;let ident = this.matrixIds[zoom].identifier;let tilematrix = this.wmtsParams.tilematrixset + ":" + ident;let X0 = this.matrixIds[zoom].topLeftCorner.lng;let Y0 = this.matrixIds[zoom].topLeftCorner.lat;let tilecol=Math.floor((nw.x-X0)/tilewidth);let tilerow=-Math.floor((nw.y-Y0)/tilewidth);let url = $L.Util.template(this._url, {s: this._getSubdomain(coords)});return url + $L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow +"&tilecol=" + tilecol;},setParams: function (params, noRedraw) {$L.extend(this.wmtsParams, params);if (!noRedraw) {this.redraw();}return this;},getDefaultMatrix : function () {/*** the matrix3857 represents the projection* for in the IGN WMTS for the google coordinates.*/let matrixIds3857 = new Array(22);for (let i= 0; i<22; i++) {matrixIds3857[i]= {identifier : "" + i,topLeftCorner : new $L.LatLng(20037508.3428,-20037508.3428)};}return matrixIds3857;}});$L.tileLayer.wmts = function (url, options) {return new $L.TileLayer.WMTS(url, options);};/**** 插件移植結束*/

這里要記得導入：

import "leaflet/dist/leaflet.css"import $L from "leaflet"

后面是使用axios向后端請求數據

methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {axios.get('http://127.0.0.1:8080/ChinaCity/SingleCity?cityName=' + this.ruleForm.cityName).then((res) =>{//console.log(res);let emitData = {id: -1, x: -1, y: -1};emitData.id = res.data.data.id;emitData.x = res.data.data.x;emitData.y = res.data.data.y;// console.log(emitData)this.$emit('GoGIS', emitData);});}});}}

這里要注意跨域的問題，解決跨域的問題方法很多，在此不再再說明。

?

后端

后端使用的Java的Spring boot，其他可以用瀏覽器，使用ORM技術，使得開發簡單，具體使用的持久層框架為JPA。

import lombok.Data;import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.Table;/**** 中國城市地理坐標*/ @Entity @Data @Table(name = "china_city") public class ChinaCity {@Id@Column(name = "id")private Integer id;@Column(name = "name")private String name;@Column(name = "coordX")private Float coordX;@Column(name = "coordY")private Float coordY;public ChinaCity() {}public ChinaCity(Integer id, String name, Float coordX, Float coordY) {this.id = id;this.name = name;this.coordX = coordX;this.coordY = coordY;} }

這里來試試請求

烏魯木齊的請求：

數據從哪里來的，具體將會在數據庫中提到！

?

Geoserver

這里使用了Geoserver搭建了一個中國地圖的GIS服務：

這里采用的是谷歌EPSG900913的坐標系統，如何去搭建以及如何下載地圖，參考本人這篇博文：

https://blog.csdn.net/qq78442761/article/details/100581622

在這里，本人就不再重復說明了！

?

?

數據庫

這里的數據庫數據是從百度中下載的，自己稍微修改了下：

但百度上的不太靠譜，有錯別字，而且精度不太好，小數點后面的位數太少了！

然后本人寫了一個C++的小程序，把這個文件，直接導入到了MySQL數據庫，具體如下：

#include <QCoreApplication> #include <QFile> #include <QSqlDatabase> #include <QDebug> #include <QSqlError> #include <QVector> #include <QSqlQuery>struct CityData; static QVector<CityData*> cityVec;struct CityData{QString name = "null";float x = -1.0;float y = -1.0; };void insertToMySQL(){QSqlDatabase db = QSqlDatabase::addDatabase("QMYSQL");db.setHostName("XXX.XXX.XXX.XXX");db.setDatabaseName("XXXX");db.setUserName("XXX");db.setPassword("XXX");if(!db.open()){qDebug() << "The database opend failed : " << db.lastError().text();return;}for(int i = 0; i < cityVec.size(); i++){QSqlQuery query;QString sql = QString("insert into giscoord.chinacity(name, coordX, coordY) values('%1', %2, %3)").arg(cityVec[i]->name).arg(cityVec[i]->x).arg(cityVec[i]->y);if(!query.exec(sql)){qDebug() << query.lastError().text();}}qDebug() << "insert over!";db.close(); }int main(int argc, char *argv[]) {QCoreApplication a(argc, argv);QFile file("C:\\Users\\Administrator\\Desktop\\demo2.csv");if(!file.open(QIODevice::ReadOnly | QIODevice::Text)){return -1;}while(!file.atEnd()){QStringList listStr = QString::fromLocal8Bit(file.readLine()).remove("\n").split(",");CityData *city = new CityData;city->name = listStr[0].toUtf8();city->x = listStr[1].toFloat();city->y = listStr[2].toFloat();cityVec.append(city);}file.close();insertToMySQL();for(int i = 0; i < cityVec.size(); i++){delete cityVec[i];}cityVec.clear();qDebug() << "programme over!";return a.exec(); }

?

總結

以上是生活随笔為你收集整理的混合知识实例-本地GIS定位系统Web版（Java、vue、Geoserver）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。