Java + Leaflet：湖南省道路长度 WebGIS 系统实现

2、Mapper 空间检索查询

使用 MyBatis Plus 封装 SQL，主要处理路网长度的聚合计算。这里将复杂的 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," +
        " SUM(CASE WHEN r.fclass in ('steps', 'footway') THEN ST_Length(r.geom::geography) ELSE 0 END) AS steps_length," +
        " SUM(ST_Length(r.geom::geography)) AS total_length " +
        " FROM biz_road_network r JOIN biz_city t1 ON ST_Contains(t1.geom, r.geom) WHERE t1.province_code = #{province_code} " +
        " GROUP BY t1.city_code ORDER BY total_length DESC ";

    @Select(LIST_BYPROVINCE_SQL)
    public List<UrbanRoadMileageInfo> getListByProvinceCode(@Param("province_code")String provinceCode);

    final static String GET_ROADMILEAGELIST_BY_PROVINCECODE = "<script>" +
        " 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 = #{provinceCode} AND t1.city_code = t3.city_code " +
        " AND T1.city_name = t2.NAME AND st_contains ( t3.geom, t2.geom ) " +
        "</script>";

    @Select(GET_ROADMILEAGELIST_BY_PROVINCECODE)
    List<UrbanRoadMileageInfoVO> getRoadMileageList(@Param("provinceCode") String provinceCode);
}

3、控制 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 ewsnProvinceList(@PathVariable("pcode") String pcode){
        List<UrbanRoadMileageInfoVO> dataList = urbanRoadMileageInfoService.getRoadMileageList(pcode);
        return AjaxResult.success().put("data", dataList);
    }
}

三、WebGIS 界面实现

前端重点在于图例配置、数据渲染及交互逻辑。

1、里程图例及初始化

根据道路长度区间设置颜色分级，便于直观区分：

// 里程颜色配置
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, 128),colorDesc:"紫色"},
    {name:"1.6 万以上",color:"#FF0000",rgb:new Color(153, 51, 102),colorDesc:"红色"}
];

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"; }
}

2、各地市信息展示

数据库存储单位为米，前端展示时需转换为万公里并保留小数。核心渲染逻辑如下：

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){
                    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),{
                            style: {color:color,fillColor:color,weight:3,"opacity":0.65, fillOpacity: 0.65 }
                        }).addTo(mymap);
                        // 添加标记点
                        var myIcon = L.divIcon({
                            iconSize: null,
                            className: '',
                            popupAnchor:[5,5],
                            shadowAnchor:[5,5],
                            html: buildShowInfo(i,color,areaData)
                        });
                        showLayerGroup.addLayer(areaLayer);
                        L.marker([areaData.lat, areaData.lon], { icon: myIcon}).addTo(collisionLayer);
                    }
                    collisionLayer.addTo(showLayerGroup);
                }
            }
        },
        error:function(){
            $.modal.alertWarning("获取空间信息失败");
        }
    });
}

点击标注可触发 showDetails 函数，进一步展示该地级市的详细道路分级统计信息。

四、成果展示

系统运行后，可查看全省道路里程分布情况。按里程降序排列，长沙市、衡阳市、岳阳市位列前三，空间上主要集中在东部和东南部地区。

湘西北区域因地质环境限制，道路里程相对较少；南部地区除衡阳外，邵阳、永州等地仍有较大发展空间。这为后续的交通规划提供了直观的数据参考。

五、总结

本方案通过 Java 后端与 Leaflet 前端的结合，成功构建了功能完善的湖南省道路长度 WebGIS 系统。利用 PostGIS 处理空间数据，MyBatis Plus 简化查询，前端实现动态渲染与交互。未来可进一步集成实时交通监测或大数据预测功能，提升系统的智能化水平。