基于SpringBoot和Leaflet的行政区划地图掩膜效果实战教程

/**
 * 遮罩
 */
L.Mask = L.Polygon.extend({
    options: {
        isRect: true,    //是否为矩形遮罩,如果为是,则使用northWest，northEast，sourthEast，sourthWest创建矩形遮罩层外边界,如果为false，则使用传入的坐标数组作为遮罩层外边界
        northWest: { lat: 180.0, lng: -180.0 },  //遮罩层西北角坐标
        northEast: { lat: 180.0, lng: 180.0 },  //遮罩层东北角坐标
        sourthEast: { lat: -180.0, lng: 180.0 }, //遮罩层东南角
        sourthWest: { lat: -180.0, lng: -180.0 }, //遮罩层西南角
        maskBoundary: null,    //遮罩层边界坐标
        showPolygons: []    //显示区域
    },
    initialize(options) {
        L.Util.setOptions(this, options);
        let latlngs = this.getMaskLatLngs();
        this._setLatLngs(latlngs);
    },
    /**
     * 画遮蔽层的相关方法
            *思路: 创建一个矩形作为遮罩层,构造函数传入的坐标作为内环
     * @see https://blog.csdn.net/mapmonster/article/details/104455516
     * 
     * @param {*} latlngs 
     */
    getMaskLatLngs() {
        let latlngs = [];
        //是矩形遮罩,则使用northWest，northEast，sourthEast，sourthWest创建矩形遮罩层外边界
        if (this.options.isRect) {
            this.options.maskBoundary = [];
            this.options.maskBoundary.push(this.options.northWest);
            this.options.maskBoundary.push(this.options.sourthWest);
            this.options.maskBoundary.push(this.options.sourthEast);
            this.options.maskBoundary.push(this.options.northEast);
            this.options.maskBoundary.push(this.options.northWest);
        }
        latlngs.push(this.options.maskBoundary);
        for (let i = 0; i < this.options.showPolygons.length; i++) {
            latlngs = latlngs.concat(this.options.showPolygons[i].getLatLngs());
        }
        return latlngs;
    }
});
/**
 * 合乎leaflet语法
 * @param {*} options 
 * @returns 
 */
L.mask = function (latlngs, options) {
    return new L.Mask(latlngs, options);
};

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.PostMapping;
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.framework.web.page.TableDataInfo;
import com.yelang.project.extend.earthquake.domain.EarthQuakeProvinceStatVO;
import com.yelang.project.extend.earthquake.domain.EarthquakeInfo;
import com.yelang.project.extend.earthquake.domain.Province;
import com.yelang.project.extend.earthquake.service.IEarthquakeInfoService;
import com.yelang.project.extend.earthquake.service.IProvinceService;
@Controller
@RequestMapping("/eq/province")
public class ProvinceController extends BaseController{
	private String prefix = "earthquake/province";
	@Autowired
	private IProvinceService provinceService;
	@Autowired
	private IEarthquakeInfoService earthQuakeInfoService;
	@RequiresPermissions("eq:province:view")
    @GetMapping()
    public String map(){
        return prefix + "/map";
    }
    @RequiresPermissions("eq:province:list")
    @PostMapping("/list")
    @ResponseBody
    public TableDataInfo list(Province province){
        startPage();
        List<Province> list = provinceService.selectList(province);
        return getDataTable(list);
    }
    @RequiresPermissions("eq:province:geom")
    @GetMapping("/geojson/{id}")
    @ResponseBody
    public AjaxResult getGeojson(@PathVariable("id") Long id){
    	Province province = provinceService.findGeoJsonById(id, null);
        return AjaxResult.success().put("data", province.getGeomJson());
    }
}

package com.yelang.project.extend.earthquake.mapper;
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.Province;
/**
 * 省级行政区划数据接口
 * @author wuzuhu
 *
 */
public interface ProvinceMapper extends BaseMapper<Province>{
	static final String FIND_GEOJSON_SQL="<script>"
			+ "select st_asgeojson(geom) as geomJson from biz_province "
			+ "where id = #{id} "
			+ "<if test='null != name'>and name like concat('%', #{name}, '%')</if>"
			+ "</script>";
	@Select(FIND_GEOJSON_SQL)
	Province findGeoJsonById(@Param("id")Long id,@Param("name")String name);
}

function initSidebar(){//初始化sidebar页面
	var sidebar = L.control.sidebar('sidebar', {position: 'right'}).addTo(mymap);
	//默认sidebar打开，并展示一个tab页
	sidebar.open();
	$("#xz_info").addClass("active");
	$("#home").addClass("active");
	//初始化行政区划表格
	initHnTownTable();
}
function initHnTownTable(){
	   var options = {
	       url: prefix + "/list",
	       createUrl: prefix + "/add",
	       updateUrl: prefix + "/edit/{id}",
	       modalName: "乡镇行政区划",
	       columns: [{
	            checkbox: true
	       },
	       {
	            field: 'id',
	            title: '',
	            visible: false
	       },
	       {
	           field: 'name',
	            title: '省份'
	       },
	       {
	          field: 'type',
	          title: '类别'
	       },
	       {
	           title: '操作',
	           align: 'center',
	           formatter: function(value, row, index) {
	              var actions = [];
	              actions.push('<a class="btn btn-success btn-xs ' + removeFlag + '" href="javascript:void(0)" rel="external nofollow"  onclick="previewTown(\'' + row.id + '\',\''+row.name+'\')"><i class="fa fa-paper-plane"></i>定位</a>');
	                 return actions.join('');
	            }
	          }]
	       };
	   $.table.init(options);
}

function previewTown(gid,name){
	var myStyle = {color:"white",weight:5,"opacity":1};
	$.ajax({  
		  type:"get",  
		  url:prefix + "/geojson/" + gid,  
		  data:{},  
		  dataType:"json",  
		  cache:false,
		  processData:false,
		  success:function(result){
		        if(result.code == web_status.SUCCESS){
		        	var geojson = JSON.parse(result.data);
		        	var areaLayer = L.geoJSON(geojson,{style:myStyle}).addTo(mymap);
		        	showLayerGroup.clearLayers();
		        	showLayerGroup.addLayer(areaLayer);
		        	mymap.setView(areaLayer.getBounds().getCenter(),8);
		        	showMask(geojson);
		        }
		   },
		  error:function(){
		      $.modal.alertWarning("获取空间信息失败");
		  }
	});
}

function showMask(geojson){
	 var showPolygons = [];
     var pArray = [];
     for (var i = 0; i < geojson.coordinates.length; i++) {
    	   var points = [];
    	   $.each(geojson.coordinates[i],function(k,v){
    	          points.push({lat:v[1],lng:v[0]});
    	   });
    	   //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
    	    pArray = pArray.concat(points);
    	    pArray.push(pArray[0]);
    	 }
    	 var polygon = L.polygon(pArray, { color: 'green' });
    	 showPolygons.push(polygon);
	     var mask = L.mask({
	         showPolygons: showPolygons,
	         color: '#C0C0C0',
	         fillOpacity: 1,
	         renderer: L.canvas({ padding: 1 })  //解决遮罩层拖拽与缩放显示不全的Bug
	     });
	     showLayerGroup.addLayer(mask);
	}