ToB企服应用市场:ToB评测及商务社交产业平台

标题: 基于SpringBoot的全国风景区WebGIS按省展示实践 [打印本页]
作者: 小小小幸运    时间: 2024-6-27 16:21
标题: 基于SpringBoot的全国风景区WebGIS按省展示实践


目录

媒介
一、全国风景区信息介绍
1、全国范围内数据分布
2、全国风景区分布
3、PostGIS空间关联查询
二、后台查询的筹划与实现 
1、Model和Mapper层
2、业务层和控制层筹划
三、WebGIS可视化
1、省份范围可视化
2、省级风景区可视化展示 
3、成果展示 
总结 

媒介

        旅行是心灵的洗涤，让每一步都充满感悟和思索。在旅途中，我学会了更加爱惜面前的风景和韶光。每一次旅行都是一次重新认识自己的时机，让我更加明确自己想要的是什么。旅途中的风景和经历，成为了我人生中最宝贵的财产。旅行让我感受到了天下的广阔和无限可能，让我更加勇敢地追求自己的空想。在旅途中，我学会了用心去感受每一个细节，去品味生活的优美。旅行是一种生活方式，让我不断地探索和发现，不断地成长和进步。每一次旅行都是一次心灵的洗礼，让我更加清楚地认识自己和天下。旅途中的风景和经历成为了我人生中最珍贵的影象，陪伴着我走过每一个春夏秋冬。旅行是一种自由和释放，让我在行走中找到自己的方向和目标。
        不知道您是否还记得自己上一次旅行是在什么时候？是跟身边的谁一起去参加的旅行？在旅行中最令人难忘的风景是什么？除了风景另有什么让你印象深刻。身材和灵魂，总要有一个在路上。既然选择了在路上，那么我们就要去风景优美的地方看看，去美丽的景区游览，让身心得到放松，放松之后积贮能量，为以后的生活一连奋斗。

     各省风景区
          不管是作为爱旅游的你，照旧热爱文旅分析。使用WebGIS，我们来进行一场时空之旅，在舆图上实现我们的舆图旅行。本文以全国的旅游资源为例，分省份进行展示，将不同省份的风景区信息进行舆图标注。我们也可以看一下全国范围内，风景区的时空分布。
        本文便是在此背景下创作的，文章首先对数据库中的风景区数据进行简单介绍，然后介绍怎样使SpringBoot进行风景区查询功能的筹划与实现，接着介绍前端基于Leaflet进行可视化筹划，最后使用实际应用，介绍和分析不同省份的风景区旅游资源。热爱旅游的你，一定不要错过，欣赏风景，让我们一起去看看吧。
一、全国风景区信息介绍

        本节将对涉及的重要数据，即全国风景区信息进行简单介绍，其着实之前的一篇博客中，曾经对全国的风景区数据进行了详细的介绍，使用Java和PostGis的全国A级风景区数据入库实战。在这篇博客中，对全国A级风景区进行了入库的实践。
1、全国范围内数据分布

        在之前的博客中，我们已经实现了数据的入库，为了克制让读者引起唐突的感觉，这里首先将数据表结构再次进行介绍，让读者认识和把握对空间表的筹划与实现。

        对应的表结构脚本如下：
  1. CREATE TABLE "public"."biz_scenic_spot" (
  2.   "id" int8 NOT NULL,
  3.   "name" varchar(255) COLLATE "pg_catalog"."default",
  4.   "level" varchar(4) COLLATE "pg_catalog"."default",
  5.   "province" varchar(255) COLLATE "pg_catalog"."default",
  6.   "city" varchar(255) COLLATE "pg_catalog"."default",
  7.   "area" varchar(255) COLLATE "pg_catalog"."default",
  8.   "address" varchar(255) COLLATE "pg_catalog"."default",
  9.   "evaluation_time" varchar(255) COLLATE "pg_catalog"."default",
  10.   "publish_time" varchar(255) COLLATE "pg_catalog"."default",
  11.   "lng_gcj02" varchar(30) COLLATE "pg_catalog"."default",
  12.   "lat_gcj02" varchar(30) COLLATE "pg_catalog"."default",
  13.   "lng_bd09" varchar(30) COLLATE "pg_catalog"."default",
  14.   "lat_bd09" varchar(30) COLLATE "pg_catalog"."default",
  15.   "lng_wgs84" varchar(30) COLLATE "pg_catalog"."default",
  16.   "lat_wgs84" varchar(30) COLLATE "pg_catalog"."default",
  17.   "geom" "public"."geometry",
  18.   "publish_link" varchar(255) COLLATE "pg_catalog"."default",
  19.   CONSTRAINT "pk_biz_scenic_spot" PRIMARY KEY ("id")
  20. );
  22. CREATE INDEX "idx_biz_scenic_spot_geom" ON "public"."biz_scenic_spot" USING gist (
  23.   "geom" "public"."gist_geometry_ops_2d"
  24. );
  26. COMMENT ON COLUMN "public"."biz_scenic_spot"."id" IS '主键';
  28. COMMENT ON COLUMN "public"."biz_scenic_spot"."name" IS '景区名称';
  30. COMMENT ON COLUMN "public"."biz_scenic_spot"."level" IS '景区级别';
  32. COMMENT ON COLUMN "public"."biz_scenic_spot"."province" IS '所属省份';
  34. COMMENT ON COLUMN "public"."biz_scenic_spot"."city" IS '所属城市';
  36. COMMENT ON COLUMN "public"."biz_scenic_spot"."area" IS '所属区县';
  38. COMMENT ON COLUMN "public"."biz_scenic_spot"."address" IS '地址';
  40. COMMENT ON COLUMN "public"."biz_scenic_spot"."evaluation_time" IS '评定时间';
  42. COMMENT ON COLUMN "public"."biz_scenic_spot"."publish_time" IS '发布时间';
  44. COMMENT ON COLUMN "public"."biz_scenic_spot"."lng_gcj02" IS 'lng_GCJ02';
  46. COMMENT ON COLUMN "public"."biz_scenic_spot"."lat_gcj02" IS 'lat_GCJ02';
  48. COMMENT ON COLUMN "public"."biz_scenic_spot"."lng_bd09" IS 'lng_BD09';
  50. COMMENT ON COLUMN "public"."biz_scenic_spot"."lat_bd09" IS 'lat_BD09';
  52. COMMENT ON COLUMN "public"."biz_scenic_spot"."lng_wgs84" IS 'lng_WGS84';
  54. COMMENT ON COLUMN "public"."biz_scenic_spot"."lat_wgs84" IS 'lat_WGS84';
  56. COMMENT ON COLUMN "public"."biz_scenic_spot"."publish_link" IS '发布链接';
  58. COMMENT ON TABLE "public"."biz_scenic_spot" IS '全国风景区信息表';
复制代码
        数据库库一共有风景区14847条，在数据库中实行以下sql可以实现按照风景区级别进行分组统计，sql语句如下：
  1. select count(level),level from biz_scenic_spot group by level;
复制代码
        按照景区级别分类如下，其中有3条没有详细的级别（应该是数据的标题）：
序号景区级别数量
15A336
24A4486
33A7866
42A2066
5A93
2、全国风景区分布

        首先从数据库层面，我们先来看一下全国的风景区分布是一个什么样的情况，这里使用表格的方式进行汇总。在上述的风景区表中实行以下语句，可以得到按省份分组的景区分布（注意：这里的分组没有使用关联外部的省份信息表，而是直接使用风景区表内的省份字段），在我们的体系中，我们有省份的空间信息表，在本文的空间分析中，我们使用省级行政区表。
  1. select count(1) num,province from biz_scenic_spot group by province order by num desc;
复制代码
        实行后可以在数据库中看到以下数据：
序号都会名称景区数量
1浙江1322
2山东1205
3四川895
4广西662
5安徽605
6江苏600
7广东597
8河南580
9湖北576
10新疆574
11贵州570
12云南561
13辽宁558
14湖南550
16陕西527
17河北490
18福建463
19甘肃442
20内蒙古428
21江西421
22黑龙江409
23吉林275
24重庆272
25山西268
26北京216
27青海163
28西藏148
29宁夏147
30上海139
31天津100
32海南84
        从上表中可以很直观的看出，浙江省、山东省、四川省的旅游资源相称丰富，居全国前三甲。而海南省、天津市、上海市位于后三甲。这里仅对数据进行表格可视化，为了让数据具有空间分布，我们将使用WebGIS的方式进行展示，让舆图具有空间分布的特性。
3、PostGIS空间关联查询

        为了让景区信息更加具有空间分布的特性，我们采用和biz_province即省级行政区划信息表进行关联，查询出指定省份对应的风景信息，这里使用st_contains(geom,geom)这个函数来进行对比。sql查询示比方下所示（以湖南省430000为例）：
  1. SELECT T
  2.         .*,
  3.         st_asgeojson ( T.geom ) AS geomJson
  4. FROM
  5.         biz_province P,
  6.         biz_scenic_spot T
  7. WHERE
  8.         P.code = '430000'
  9.         AND st_contains ( P.geom, T.geom );
复制代码

二、后台查询的筹划与实现 

        本节重点解说后台服务的筹划，这里我们依然采用SpringBoot和Mybatis-Plus的组合，空间数据库采用PostGIS数据。因此后台服务的筹划采用MVC模式，下面针对每一层进行详细的筹划。
1、Model和Mapper层

        model层包括实体类和相干视图层对象。Mapper即dao层，数据访问层。通过Mapper来操作数据库，基于MP进行实体数据库操作。
  1. package com.yelang.project.extend.scenicspot.domain;
  2. import java.io.Serializable;
  3. import org.apache.ibatis.type.BlobByteObjectArrayTypeHandler;
  4. import org.apache.ibatis.type.BlobInputStreamTypeHandler;
  5. import org.apache.ibatis.type.BlobTypeHandler;
  6. import org.apache.ibatis.type.ByteArrayTypeHandler;
  7. import org.apache.ibatis.type.ByteObjectArrayTypeHandler;
  8. import org.apache.ibatis.type.ByteTypeHandler;
  9. import com.baomidou.mybatisplus.annotation.TableField;
  10. import com.baomidou.mybatisplus.annotation.TableId;
  11. import com.baomidou.mybatisplus.annotation.TableName;
  12. import com.yelang.framework.handler.PgGeometryTypeHandler;
  13. import lombok.AllArgsConstructor;
  14. import lombok.Getter;
  15. import lombok.NoArgsConstructor;
  16. import lombok.Setter;
  17. import lombok.ToString;
  19. /**
  20. *  全国风景区信息表
  21. * @author wzh
  22. *
  23. */
  24. @TableName(value = "biz_scenic_spot", autoResultMap = true)
  25. @NoArgsConstructor
  26. @AllArgsConstructor
  27. @Setter
  28. @Getter
  29. @ToString
  30. public class ScenicSpot implements Serializable{
  31.         private static final long serialVersionUID = 1830004907219610805L;
  32.         @TableId
  33.         private Long id;
  34.         private String name;//景区名称
  35.         private String level;//景区级别
  36.         private String province;//所属省份
  37.         private String city;//所属城市
  38.         private String area;//所属区县
  39.         private String address;//地址
  40.         @TableField(value="evaluation_time")
  41.         private String evaluationTime;//评定时间
  42.         @TableField(value="publish_time")
  43.         private String publishTime;//发布时间
  44.         @TableField(value="publish_link")
  45.         private String publishLink;//发布时间
  46.         @TableField(value="lng_GCJ02")
  47.         private String lngGCJ02;
  48.         @TableField(value="lat_GCJ02")
  49.         private String latGCJ02;
  50.         @TableField(value="lng_BD09")
  51.         private String lngBD09;
  52.         @TableField(value="lat_BD09")
  53.         private String latBD09;
  54.         @TableField(value="lng_WGS84")
  55.         private String lngWGS84;
  56.         @TableField(value="lat_WGS84")
  57.         private String latWGS84;
  58.         @TableField(typeHandler = PgGeometryTypeHandler.class)
  59.         private String geom;
  60.         @TableField(exist=false)
  61.         private String geomJson;
  62.         @TableField(exist=false)
  63.         private byte[] tile;
  65.         public ScenicSpot(String name, String level, String province, String city, String area, String address,
  66.                         String evaluationTime, String publishTime, String publishLink,String lngGCJ02, String latGCJ02, String lngBD09, String latBD09,
  67.                         String lngWGS84, String latWGS84, String geom) {
  68.                 super();
  69.                 this.name = name;
  70.                 this.level = level;
  71.                 this.province = province;
  72.                 this.city = city;
  73.                 this.area = area;
  74.                 this.address = address;
  75.                 this.evaluationTime = evaluationTime;
  76.                 this.publishTime = publishTime;
  77.                 this.publishLink = publishLink;
  78.                 this.lngGCJ02 = lngGCJ02;
  79.                 this.latGCJ02 = latGCJ02;
  80.                 this.lngBD09 = lngBD09;
  81.                 this.latBD09 = latBD09;
  82.                 this.lngWGS84 = lngWGS84;
  83.                 this.latWGS84 = latWGS84;
  84.                 this.geom = geom;
  85.         }
  86. }
复制代码
        mapper层重要提供查询省级范围内的风景区列表方法，关键代码如下：
  1. package com.yelang.project.extend.scenicspot.mapper;
  2. import java.util.List;
  3. import org.apache.ibatis.annotations.Param;
  4. import org.apache.ibatis.annotations.Result;
  5. import org.apache.ibatis.annotations.Results;
  6. import org.apache.ibatis.annotations.Select;
  7. import org.apache.ibatis.type.JdbcType;
  8. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  9. import com.yelang.project.extend.scenicspot.domain.ScenicSpot;
  10. import com.yelang.project.extend.scenicspot.domain.TileBox;
  11. public interface ScenicSpotMapper extends BaseMapper<ScenicSpot>{
  12.         static final String FIND_GEOJSON_SQL="<script>"
  13.                         + "select st_asgeojson(geom) as geomJson from biz_scenic_spot "
  14.                         + "where id = #{id} "
  15.                         + "<if test='null != name'>and name like concat('%', #{name}, '%')</if>"
  16.                         + "</script>";
  17.         @Select(FIND_GEOJSON_SQL)
  18.         ScenicSpot findGeoJsonById(@Param("id")Long id,@Param("name")String name);
  19.        
  20.         static final String FIND_LISTBY_PCODE = "<script>"
  21.                         + " select t.*,st_asgeojson(t.geom) as geomJson from biz_province p,biz_scenic_spot t where p.code = #{code} and st_contains(p.geom, t.geom) "
  22.                         + "</script>";
  23.         /**
  24.          *  根据省级行政区划code查询对应的风景名胜列表
  25.          * @param code 省份编码
  26.          * @return 对应的风景名胜区列表
  27.          */
  28.         @Select(FIND_LISTBY_PCODE)
  29.         List<ScenicSpot> findListByPcode(@Param("code")String code);
  30. }
复制代码
2、业务层和控制层筹划

        业务层比力简单，实现控制层到数据库访问层的调用。这里贴出关键代码：
  1. package com.yelang.project.extend.scenicspot.service.impl;
  3. @Service
  4. public class ScenicSpotServiceImpl extends ServiceImpl<ScenicSpotMapper, ScenicSpot> implements IScenicSpotService{
  5.         @Override
  6.         public List<ScenicSpot> findListByPcode(String code) {
  7.                 return this.baseMapper.findListByPcode(code);
  8.         }
  9. }
复制代码
        
  1. package com.yelang.project.extend.scenicspot.controller;
  2. import java.util.List;
  3. import org.apache.shiro.authz.annotation.RequiresPermissions;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.GetMapping;
  7. import org.springframework.web.bind.annotation.PathVariable;
  8. import org.springframework.web.bind.annotation.PostMapping;
  9. import org.springframework.web.bind.annotation.RequestMapping;
  10. import org.springframework.web.bind.annotation.ResponseBody;
  11. @Controller
  12. @RequestMapping("/sspot/province")
  13. public class ScenicSpotProvinceController extends BaseController{
  14. private String prefix = "scenicspot/province";
  15.         @Autowired
  16.         private IProvinceService provinceService;
  17.         @Autowired
  18.         private IScenicSpotService sspotService;
  19.         @RequiresPermissions("sspot:province:view")
  20.     @GetMapping()
  21.     public String map(){
  22.         return prefix + "/map";
  23.     }
  24.     @RequiresPermissions("sspot:province:list")
  25.     @PostMapping("/list")
  26.     @ResponseBody
  27.     public TableDataInfo list(Province province){
  28.         startPage();
  29.         List<Province> list = provinceService.selectList(province);
  30.         return getDataTable(list);
  31.     }
  32.     @RequiresPermissions("sspot:province:geom")
  33.     @GetMapping("/geojson/{id}")
  34.     @ResponseBody
  35.     public AjaxResult getGeojson(@PathVariable("id") Long id){
  36.             Province province = provinceService.findGeoJsonById(id, null);
  37.         return AjaxResult.success().put("data", province.getGeomJson());
  38.     }
  39.     @RequiresPermissions("sspot:province:sspotlist")
  40.     @GetMapping("/datalist/{code}")
  41.     @ResponseBody
  42.     public AjaxResult sspotList(@PathVariable("code") String code){
  43.             List<ScenicSpot> list = sspotService.findListByPcode(code);
  44.             AjaxResult ar = AjaxResult.success();
  45.         ar.put("data", list);
  46.         return ar;
  47.     }
  48. }
复制代码
        控制层提供四个重要的方法，第一个是跳转到页面的方法，第二个是获取省份列表，第三个是获取省份geojson数据，最后一个是获取省份下辖风景区列表。以上就是后台各层的代码筹划与实现。通过这几个方法为前台提供服务。
三、WebGIS可视化

        本节将重点解说怎样WebGIS当中采用leaflet框架实现对风景区信息的展示，这里采用认识的Leaflet架构。使用基于Canvas的文本标志方法。关于舆图的界说，列表的展示非本文重点，这里不再赘述。
1、省份范围可视化

        在界面中，首先会展示省份列表，通过点击省份列表的操作按钮，获取当前省份的code，然后根据code获取对应的省级行政区划范围GeoJSON，然后使用Leaflet将GeoJSON展示出来。关键代码如下：
  1. function showProvince(id){
  2.      var myStyle = {color:"white",weight:5,"opacity":1,fillOpacity: 0};
  3.           $.ajax({  
  4.                    type:"get",  
  5.                    url:prefix + "/geojson/" + id,  
  6.                    data:{},  
  7.                    async: false,
  8.                    dataType:"json",  
  9.                    cache:false,
  10.                    processData:false,
  11.                    success:function(result){
  12.                        if(undefined != provinceAreaLayer ){
  13.                             provinceAreaLayer.removeFrom(mymap);//先移除
  14.                        }
  15.                        if(result.code == web_status.SUCCESS){
  16.                                 var geojson = JSON.parse(result.data);
  17.                                 provinceAreaLayer = L.geoJSON(geojson,{style:myStyle}).addTo(mymap);
  18.                                         //同时设置中心位置和级别，一般省份设置为7
  19.                                     mymap.setView(provinceAreaLayer.getBounds().getCenter(),7);
  20.                                 }
  21.                       },
  22.                       error:function(){
  23.                                 $.modal.alertWarning("获取空间信息失败");
  24.                         }
  25.                  });
  26.    }
复制代码

2、省级风景区可视化展示 

        通过code关联省级行政区划表和风景区信息表，进行两个图层的空间叠加分析，实现省级区域的风景区划覆盖。前台的焦点代码如下所示：
  1. function showScenicSpot(code){
  2.                 $.ajax({  
  3.                         type:"get",  
  4.                         url:prefix + "/datalist/" + code,  
  5.                         dataType:"json",  
  6.                         cache:false,
  7.                         processData:false,
  8.                         success:function(result){
  9.                                 if(result.code == web_status.SUCCESS){
  10.                                         var strokeStyleSet = "#23168d";
  11.                                         var lat,lng,cityInfo;
  12.                                         for(var i=0;i<result.data.length;i++){
  13.                                                 var dataInfo = result.data[i];
  14.                                                 var geomObj = JSON.parse(dataInfo.geomJson);
  15.                                                 if(i == 0){
  16.                                                         lat = geomObj.coordinates[1];
  17.                                                         lng = geomObj.coordinates[0];
  18.                                                         continue;
  19.                                                 }
  20.                                                 var radiusSize = 5;
  21.                                                 switch(dataInfo.level) {
  22.                                                     case '5A':  
  23.                                                             strokeStyleSet = "#c50808";
  24.                                                             radiusSize += 7;
  25.                                                         break;
  26.                                                     case '4A':  
  27.                                                             strokeStyleSet = "#c37322";
  28.                                                             radiusSize += 5;
  29.                                                         break;
  30.                                                     case '3A':
  31.                                                             strokeStyleSet = "#6f8d16";
  32.                                                             radiusSize += 3;
  33.                                                         break;
  34.                                                 case '2A':
  35.                                                         strokeStyleSet = "#168d40";
  36.                                                         radiusSize += 1;
  37.                                                         break;
  38.                                                     default:
  39.                                                             strokeStyleSet = "#23168d";
  40.                                                 }
  41.                                                     var content = "<strong>名称:</strong>"+dataInfo.name + "<br/><strong>级别:</strong>"+ dataInfo.level;
  42.                                                         content += "<br/><strong>所属行政区划:</strong>"+ dataInfo.province + "/" + dataInfo.city + "/" + dataInfo.area;
  43.                                                         content += "<br/><strong>评定时间:</strong>"+ dataInfo.evaluationTime ;
  44.                                                     var latlng = new L.latLng(geomObj.coordinates[1], geomObj.coordinates[0]);
  45.                                                 let marker = L.circleMarker(latlng, {
  46.                                                 radius: radiusSize,
  47.                                                 color: strokeStyleSet,
  48.                                                 labelStyle: {
  49.                                                   offsetX: 0, //横坐标偏移(像素)
  50.                                                   offsetY: 30, //纵坐标偏移(像素)
  51.                                                   text: dataInfo.name,
  52.                                                   rotation: 0,
  53.                                                   zIndex: radiusSize,
  54.                                                           minZoom : 5,
  55.                                                           strokeStyle: strokeStyleSet
  56.                                                 }
  57.                                               }).addTo(showLayerGroup);
  58.                                                     marker.bindPopup(content);
  59.                                         }
  60.                                         mymap.addLayer(showLayerGroup);
  61.                                 }
  62.                         },
  63.                         error:function(){
  64.                                 $.modal.alertWarning("获取信息失败");
  65.                         }
  66.                     });
  67.         }
复制代码

3、成果展示 

        通过以上的代码，大抵实现了风景区的WebGIS展示，这里将选择几个省份将其旅游资源进行会合展示。也让各人了解项目实际的成果。快来看看你所在省份的风景区信息吧。如果没有的省份，感兴趣的可以私聊，可以私发可视化结果哦。

山西省风景区分布图


辽宁省风景区分布图


江苏省风景区分布图


安徽省风景区分布图


 四川省风景区分布图


新疆维吾尔自治区风景区分布表现图

总结 

        以上就是本文的重要内容，本文便是在此背景下创作的，文章首先对数据库中的风景区数据进行简单介绍，然后介绍怎样使SpringBoot进行风景区查询功能的筹划与实现，接着介绍前端基于Leaflet进行可视化筹划，最后使用实际应用，介绍和分析不同省份的风景区旅游资源。行文仓促，定有不敷之处，还请朋侪们不吝批评指正。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4