基于 Java 和 Leaflet 的湖南省道路长度 WebGIS 系统构建
基于 Java 和 Leaflet 构建湖南省道路长度 WebGIS 系统,解决传统道路信息管理方式中数据更新不及时、展示不直观等问题。系统利用 PostGIS 空间数据库存储道路及行政区划数据,通过 MyBatis Plus 实现后端空间检索与 API 接口开发。前端采用 Leaflet 地图引擎,结合颜色分级图例展示各地市道路里程分布,实现了省域道路长度的可视化查询与分析,为交通规划提供技术参考。

基于 Java 和 Leaflet 构建湖南省道路长度 WebGIS 系统,解决传统道路信息管理方式中数据更新不及时、展示不直观等问题。系统利用 PostGIS 空间数据库存储道路及行政区划数据,通过 MyBatis Plus 实现后端空间检索与 API 接口开发。前端采用 Leaflet 地图引擎,结合颜色分级图例展示各地市道路里程分布,实现了省域道路长度的可视化查询与分析,为交通规划提供技术参考。

地理信息系统(GIS)技术在交通管理、城市规划等领域发挥着重要作用。针对湖南省复杂的地理环境和庞大的交通网络,构建高效的道路长度信息管理系统对于优化物流运输及公众出行具有重要意义。本文介绍基于 Java 和 Leaflet 的湖南省道路长度 WebGIS 系统的构建实践,通过地图形式直观展示道路长度信息,提高交通管理效率。

| 序号 | 表名 | 说明 |
| 1 | biz_urban_road_mileage_info | 城市道路里程信息表,业务信息表 |
| 2 | biz_geographic_name | 城市名称信息表,点状空间数据表 |
| 3 | biz_city | 市级行政区划信息表,面状空间数据 |
需展示湖南省各地市行政区划范围及政府驻地标注信息。数据来源为 OSM,时效性仅供参考,权威数据建议从官网获取,代码和 SQL 查询逻辑一致。
采用空间数据库表关联业务表进行查询。SQL 示例如下:
SELECT t1.*, T3.province_code, t3.province_name, st_asgeojson ( t3.geom ) geomJson, st_x ( t2.geom ) lon, st_y ( t2.geom ) lat
FROM biz_urban_road_mileage_info t1, biz_geographic_name t2, biz_city t3
WHERE t1.parent_code = '430000'
AND t1.city_code = t3.city_code
AND T1.city_name = t2.NAME
AND st_contains ( t3.geom, t2.geom );
执行后可在数据库客户端查看结果。实际应用中可动态替换省份信息作为查询条件。
根据业务需要定义地市行政驻地位置,扩展子类包装成视图对象返回。核心代码如下:
package com.yelang.project.extend.earthquake.domain;
import java.io.Serializable;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.ToString;
@Data
@ToString(callSuper=true)
@EqualsAndHashCode(callSuper=false)
public class UrbanRoadMileageInfoVO extends UrbanRoadMileageInfo implements Serializable {
private static final long serialVersionUID = 1101541707654186490L;
@TableField(exist = false,value= "province_code")
private String provinceCode;
@TableField(exist = false,value= "province_name")
private String provinceName;
@TableField(exist = false)
private String geomJson;
private String lat;
private String lon;
}
使用 MyBatis Plus 进行数据库检索,将 SQL 写入 Mapper 对象以便调用。
package com.yelang.project.extend.earthquake.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.yelang.project.extend.earthquake.domain.UrbanRoadMileageInfo;
import com.yelang.project.extend.earthquake.domain.UrbanRoadMileageInfoVO;
public interface UrbanRoadMileageInfoMapper extends BaseMapper<UrbanRoadMileageInfo>{
/**
* - 查询省级以下地市路网长度 SQL
*/
static final String LIST_BYPROVINCE_SQL = "SELECT t1.city_code,MAX(t1.city_name) AS city_name," +
" SUM(CASE WHEN r.fclass IN ('motorway', 'motorway_link') THEN ST_Length(r.geom::geography) ELSE 0 END) AS highway_length, " +
" SUM(CASE WHEN r.fclass IN ('trunk', 'trunk_link') THEN ST_Length(r.geom::geography) ELSE 0 END) AS trunk_length, " +
" SUM(CASE WHEN r.fclass IN ('primary', 'primary_link') THEN ST_Length(r.geom::geography) ELSE 0 END) AS primary_length, " +
" SUM(CASE WHEN r.fclass IN ('secondary', 'secondary_link') THEN ST_Length(r.geom::geography) ELSE 0 END) AS secondary_length," +
" SUM(CASE WHEN r.fclass IN ('tertiary', 'tertiary_link') THEN ST_Length(r.geom::geography) ELSE 0 END) AS tertiary_length, " +
" SUM(CASE WHEN r.fclass IN ('residential', 'living_street') THEN ST_Length(r.geom::geography) ELSE 0 END) AS residential_length, " +
" SUM(CASE WHEN r.fclass IN ('service', 'unclassified') THEN ST_Length(r.geom::geography) ELSE 0 END) AS service_length, " +
" SUM(CASE WHEN r.fclass IN ('footway', 'pedestrian', 'path') THEN ST_Length(r.geom::geography) ELSE 0 END) AS pedestrian_length, " +
" SUM(CASE WHEN r.fclass = 'cycleway' THEN ST_Length(r.geom::geography) ELSE 0 END) AS cycleway_length, " +
" SUM(CASE WHEN r.fclass = 'track' THEN ST_Length(r.geom::geography) ELSE 0 END) AS track_length," +
+
+
+
;
List<UrbanRoadMileageInfo> ;
+
+
+
+
+
+
;
List<UrbanRoadMileageInfoVO> ;
}
控制层 API 主要分为页面跳转和获取各地级市信息列表。
package com.yelang.project.extend.earthquake.controller;
import java.util.List;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.yelang.framework.web.controller.BaseController;
import com.yelang.framework.web.domain.AjaxResult;
import com.yelang.project.extend.earthquake.domain.UrbanRoadMileageInfoVO;
import com.yelang.project.extend.earthquake.service.IUrbanRoadMileageInfoService;
@Controller
@RequestMapping("/eq/urbanroadmileageinfo")
public class UrbanRoadMileageInfoController extends BaseController{
private String prefix = "earthquake/urbanroadmileageinfo";
@Autowired
private IUrbanRoadMileageInfoService urbanRoadMileageInfoService;
@RequiresPermissions("eq:urbanroadmileageinfo:map")
@GetMapping("/")
public String main(ModelMap mmap){
return prefix + "/main";
}
@RequiresPermissions("eq:urbanroadmileageinfo:list")
@GetMapping("/data/{pcode}")
@ResponseBody
public AjaxResult {
List<UrbanRoadMileageInfoVO> dataList = urbanRoadMileageInfoService.getRoadMileageList(pcode);
AjaxResult.success().put(, dataList);
}
}
根据不同道路长度设置颜色区分。初始化颜色配置数组:
//里程颜色配置
var colorList = [
{name:"5千公里以下",color:"#00FF00",rgb:new Color(0, 255, 0),colorDesc:"绿色"},
{name:"5千 -8 千公里",color:"#FFFF00",rgb:new Color(255, 255, 0),colorDesc:"黄色"},
{name:"8 千 -1.1 万公里",color:"#FFA500",rgb:new Color(255, 165, 0),colorDesc:"蓝色"},
{name:"1.1 万 -1.4 万公里",color:"#113fc1",rgb:new Color(255, 0, 0),colorDesc:"橙色"},
{name:"1.4 万 -1.6 万公里",color:"#800080",rgb:new Color(128, 0, ),:},
{:,:,: (, , ),:}
];
颜色识别转换方法:
function getColorByLength(length){
if(length >= 0 && length <= 5000) { return "#00FF00"; }
if(length >= 5001 && length <= 8000) { return "#FFFF00"; }
if(length >= 8001 && length <= 11000) { return "#FFA500"; }
if(length >= 11001 && length <= 14000) { return "#113fc1"; }
if(length >= 14001 && length <= 16000) { return "#800080"; }
if(length >= 16001) { return "#FF0000"; }
}
数据库保存单位为米,页面展示需转换为万公里。核心代码如下:
function buildShowInfo(index,color,data){
var length = parseFloat(data.totalLength) / (1000.0 * 10000 );
var result = "<div + color + ";' animation-spaceInDown onclick='showDetails("+data.cityCode+")'><div>" + data.cityName ;
result += "<span>:"+ length.toFixed(2) +"万公里</span></div>";
result += "</div>";
return result;
}
道路地图标注方法:
function previewRoadMap(pid,provinceCode,name){
previewProvince(pid,name);
$.ajax({
type:"get",
url:ctx + "eq/urbanroadmileageinfo/data/" + provinceCode,
data:{},
dataType:"json",
cache:false,
processData:false,
success:function(result){
if(result.code == web_status.SUCCESS){
collisionLayer.clearLayers();
var dataArray = result.data;
if(dataArray != null && dataArray.length > 1){
var legendData = new Array();
for(var i =0;i< dataArray.length;i++){
var areaData = dataArray[i];
var tempTotalLength = parseFloat(areaData.totalLength) / 1000.0;
var color = getColorByLength(tempTotalLength);
var areaLayer = L.geoJSON(JSON.parse(areaData.geomJson),{: {:color,:color,:,:, : }}).(mymap);
myIcon = L.({ : , : , :[,], :[,], : (i,color,areaData) });
showLayerGroup.(areaLayer);
L.([areaData., areaData.], { : myIcon}).(collisionLayer);
}
collisionLayer.(showLayerGroup);
}
}
},
:(){
$.modal.();
}
});
}

按道路里程降序排序结果如下:
430100 长沙市 17753221.56551351
430400 衡阳市 14434666.394707818
430600 岳阳市 14222249.927994445
430900 益阳市 13073704.1462314
430700 常德市 11931665.375579692
431100 永州市 10818152.494340602
431000 郴州市 10666092.158735342
431200 怀化市 10115713.30456733
430500 邵阳市 9892107.19298748
430200 株洲市 7374936.096146714
433100 湘西土家族苗族自治州 6795835.819083372
431300 娄底市 572764.899432551
430300 湘潭市 4861742.381742725
430800 张家界市 3836270.2965029962
省会长沙市、衡阳市、岳阳市位列前三,空间分布主要集中在东部和东南部。

道路里程较长的集中在东北部的岳阳、益阳、常德等地区和南部的衡阳市。

湘西北的道路里程相对较弱,可能与山区地质环境有关。

南部地区除衡阳外,邵阳、永州、郴州等地市的道路里程排名中等,未来交通发展需结合人口流动情况做好规划。
本实践构建了功能完善、性能稳定的湖南省道路长度 WebGIS 展示系统。通过将 Java 和 Leaflet 相结合,提供了良好的技术平台。未来可进一步完善系统功能,如增加道路拥堵实时监测、与其他交通系统集成等,并探索人工智能、大数据等技术的应用,为道路管理提供智能化解决方案。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
使用加密算法(如AES、TripleDES、Rabbit或RC4)加密和解密文本明文。 在线工具,加密/解密文本在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online