目录

前言

一、Java后台程序设计

1、业务层设计

2、控制层设计

二、WebGIS可视化实现

1、侧边栏展示

 2、空间边界信息展示

三、标注成果展示

1、面积最大的国家

2、国土面积最小的国家

3、海拔最低的国家

4、最大的群岛国家 

四、总结

前言

        在前面的博文中，我们对全球的国家信息进行了空间数据的入库。同时为了提供完整准确的空间数据，也同步参考了国家外交部的国家信息介绍。博文列表如下：

        第一篇主要讲述如何使用Geotools来进行空间数据库的入库，这是所有后续操作的前提条件。第二篇介绍在入库的基础之上，对国家的基本信息的一个编辑管理以满足我们的标准化显示。这两篇博客都没有对如何进行国家的空间矢量范围进行展示。要求不仅提供国家的中文检索，同时支持对国家的空间范围进行可视化，将国家信息叠加到地图中。如下图所示：

        本文即讲解如何在SpringBoot中结合Leaflet如何进行国家信息的查询、空间定位、关键信息展示。结合之前讲解过的DivIcon来进行关键信息展示。博客首先讲解如何使用Java在后台进行信息查询的设计与代码实现，然后介绍如何使用Leaflet来进行空间数据Geojson数据的WebGIS的展示，其次介绍如何使用DivIcon来进行关键信息展示，最后展示国家基本信息的查询结果。如果您当前想开发类似的功能或者感兴趣，不妨来来这里看一下。

一、Java后台程序设计

        后台主要为前台界面提供信息检索、根据国家ID查询对应的GeoJson信息以及详细信息。这里以Java语言为例，使用MyBatis-Plus来进行数据库的操作查询。后台服务的稳定性和可靠性对整体的查询和操作至关重要，因此这里首先介绍如何进行进行后台的程序设计。

1、业务层设计

        业务层主要包含三个主要的方法，如下表所示：

        在接口的实现层，提供上面三个方法的主要实现，关键代码如下所示：

<code>package com.yelang.project.extend.earthquake.service.impl;

import java.util.List;

import org.apache.commons.lang3.StringUtils;

import org.springframework.stereotype.Service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;

import com.yelang.project.extend.earthquake.domain.WorldCountries;

import com.yelang.project.extend.earthquake.mapper.WorldCountriesMapper;

import com.yelang.project.extend.earthquake.service.IWorldCountriesService;

@Service

public class WorldCountriesServiceImpl extends ServiceImpl<WorldCountriesMapper, WorldCountries> implements IWorldCountriesService{

@Override

public List<WorldCountries> selectList(WorldCountries worldCountries) {

QueryWrapper<WorldCountries> queryWrapper = new QueryWrapper<WorldCountries>();

if(StringUtils.isNotBlank(worldCountries.getFullChineseName())){

queryWrapper.like("full_chinese_name", worldCountries.getFullChineseName());

}

if(StringUtils.isNotBlank(worldCountries.getFullEnglishName())) {

queryWrapper.like("full_english_name", worldCountries.getFullEnglishName());

}

if(StringUtils.isNotBlank(worldCountries.getShortChineseName())) {

queryWrapper.like("short_chinese_name", worldCountries.getShortChineseName());

}

queryWrapper.select(" pk_id,full_english_name,short_english_name,min_english_name,full_chinese_name,short_chinese_name,continent,unreg ");

queryWrapper.orderByAsc("min_english_name");

return this.baseMapper.selectList(queryWrapper);

}

@Override

public WorldCountries findGeoJsonById(Long id) {

return this.baseMapper.findGeoJsonById(id);

}

@Override

public WorldCountries findByCode(String minName) {

QueryWrapper<WorldCountries> queryWrapper = new QueryWrapper<WorldCountries>();

queryWrapper.eq("min_english_name", minName);

queryWrapper.select(" pk_id,full_english_name,short_english_name,min_english_name,full_chinese_name,short_chinese_name,continent,unreg ");

return this.getOne(queryWrapper);

}

}

        在这里，为了避免在查询详情或者列表时，也同步把geometry空间属性给查询出来。因此使用Mybatis-Plus的select查询方式进行字段的限制，详情请见上面的关键方法。大家可以查询Mybatis-Plus的官方文档，合理选择查询字段。

2、控制层设计

        控制层是具体接收前端的请求的具体对象。从上面的需求中可以得知，我们需要提供一个列表查询接口、空间GeoJson数据的查询接口。提供的方法列表如下：

        代码其实不复杂，这里提供相应的代码实现：

<code>@RequiresPermissions("eq:wcountry:list")

@PostMapping("/list")

@ResponseBody

public TableDataInfo list(WorldCountries wCountry){

startPage();

List<WorldCountries> list = wCountryService.selectList(wCountry);

return getDataTable(list);

}

@RequiresPermissions("eq:wcountry:geom")

@GetMapping("/geojson/{id}")

@ResponseBody

public AjaxResult getGeojson(@PathVariable("id") Long id){

WorldCountries country = wCountryService.findGeoJsonById(id);

return AjaxResult.success().put("data", country.getGeomJson());

}

        到这里我们大致就将后台的相关服务设置完毕。接下来就可以前端页面的开发和实现。

二、WebGIS可视化实现

        在进行了后台服务的实现之后，我们需要展示空间数据，依然采用我们熟悉的Leaflet组件。在Leaflet组件中，采用siderbar侧边栏展示国家基本信息。支持国家信息的检索和具体国家的定位，在定位的同时支持将国家的基本信息以DivIcon的形式进行展示。下面将分别从这三个方面进行讲解如何进行WebGIS的实现。

1、侧边栏展示

        侧边栏作为主要的信息列表展示窗口，需要展示国家信息列表，同时列表支持按名称进行模糊查询。为了与地图深入融合，这里我们选择熟悉的sidebar组件。

        这里给出sidebar的实现方式，在这里需要后台的查询接口的支持也就是之前开发的后台控制接口。前端展示代码如下所示：

<code>function initWorldCountryTable(){

var options = {

url: prefix + "/list",

createUrl: prefix + "/add",

updateUrl: prefix + "/edit/{id}",

modalName: "全球国家列表",

columns: [{

checkbox: true

},

{

field: 'pkId',

title: '',

visible: false

},

{

field: 'shortChineseName',

title: '名称',

formatter: function(value, row, index) {

return row.shortChineseName + "(" + row.minEnglishName + ")";

}

},

{

title: '操作',

align: 'center',

formatter: function(value, row, index) {

var actions = [];

actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="previewTown(\'' + row.pkId + '\',\''+row.fullChineseName+'\',\''+row.shortEnglishName+'\')"><i class="fa fa-paper-plane"></i>定位</a>');code>

return actions.join('');

}

}]

};

$.table.init(options);

}

 2、空间边界信息展示

<code>function previewTown(gid,cnName,enName){

var myStyle = {color:"red",weight:5,"opacity":0.6};

$.ajax({

type:"get",

url:prefix + "/geojson/" + gid,

data:{},

dataType:"json",

cache:false,

processData:false,

success:function(result){

if(result.code == web_status.SUCCESS){

var areaLayer = L.geoJSON(JSON.parse(result.data),{style:myStyle}).addTo(mymap);

var myIcon = L.divIcon({

iconSize: null,

className: '',

popupAnchor:[5,5],

shadowAnchor:[5,5],

html: "<div class='marsBlackPanel' animation-spaceInDown><div class='marsBlackPanel-text'>中文名称："+cnName+"<span class='temperature'></span></div><div class='marsBlackPanel-text'>英文名称："+enName+"<span class='temperature'></span></div></div>"});code>

showLayerGroup.clearLayers();

showLayerGroup.addLayer(areaLayer);

mymap.fitBounds(areaLayer.getBounds());

//中心点位

L.marker(areaLayer.getBounds().getCenter(), { icon: myIcon}).addTo(showLayerGroup);

}

},

error:function(){

$.modal.alertWarning("获取空间信息失败");

}

});

}

     请注意，这里的中心我们取的是GeoJSON的中心点。比较好的方式是通过标记到国家首都会比较好。在一些国土面积狭长的国家，可能就会飘在国土外。在一些大西洋的岛国上，甚至完全飘到了海上，如下图中的巴哈马。因此这里仅作为示例，大家在实践过程中需要结合首都位置来进行标记。

        上面就是一个大西洋国家的巴哈马的，由很多的海岛，通过取中心点的方式得到的位置就标注到了大西洋去了。 

三、标注成果展示