GIS篇—搭建本地地图服务器(geoserver )和 leaflet 绘制多边形，点击事件等

因系统开发需求，要开发一个地图数据图层叠加，很简单，但是要求是在内网部署。这就说明了，不能用第三方地图服务器，如百度地图，天地图，谷歌等。那么问题就来了，要什么地图？这个时间我才知道GIS这个名词，我记得有段时间最可笑，自己去投了找GIS地图的岗位，刚开始以为对接百度地图开发就是GIS了，哈哈~原原谅我的无知。

结果，咨询了网友和百度GIS是一门学科，还有专门的考试。不说了..........零基础就做什么记录什么吧。

需求：用地图开发数据图层叠加，比如森林分布（我感觉应该是GIS入门了吧，咱们也不懂、也不敢问、不知道为啥）

思考：

1、搭建个地图服务器（geoserver 开源、arcgis）、就知道这两个。

2、自己地图服务器上开发的技术库（leaflet、openlayers）。

搭建完案例下一步：

1、发布arcgis的切片缓存、坐标转换、leaflet 技术开发等。

2、缺什么学什么，比较大学不是学这个的（GIS方向挺好的，可以学习，哈哈）

一、geoserver 开源服务器搭建

GeoServer是OGC Web服务器规范的J2EE实现，利用GeoServer可以方便地发布地图数据，允许用户对特征数据进行更新、删除、插入操作，通过GeoServer可以比较容易地在用户之间迅速共享空间地理信息。GeoServer是开源软件。

在官网下载（https://docs.geoserver.org/stable/en/user/index.html），然后丢在Tomcat服务器里面就好了。

在GeoServer的Web管理页面中输入用户名与密码进行登录。如果是默认安装，那么用户名为"admin"，密码为"geoserver"。

建立工作区，管理我们以后的数据，URL要填。

新建数据源（这里要下载，shp文件:https://github.com/andyczy/czy-study-gis shp目录下）

新建图层

点击保存、在Layer 找到刚新建的图层

点击黄色按钮、就可以看到地图了

二、 leaflet 库开发（代码可以在GitHub下载 https://github.com/andyczy/czy-study-gis）

编辑 index.html 文件

<!-- 引入 文件 -->
<link rel="stylesheet" href="./leaflet.css" />
<script src="./leaflet.js"> </script>
<!-- 增加地图高度 -->
<style>
#mapDiv { height: 900px; }
</style>
<!-- 创建一个 地图的div id 必须有 但是自定义 -->
<div id="mapDiv"></div>
<script>

        //这个是对接我们刚刚搭建的地图服务器
        var leafletMap = new L.Map("mapDiv", {
            zoom: 8,
            center: [18.260521, 109.517698],
            boxZoom: true, 
        });
        var marker = new L.marker([18.260521, 109.517698]);
        //marker.addTo(map);
        var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/map/wms?", { // 链接要改对应的
            layers: 'map:CHINA_2014GDP',//需要加载的图层,就是我们刚刚新建的。map 和 图层名称
            format: 'image/png',//返回的数据格式
            transparent: true,
            //crs: L.CRS.EPSG4326
        });
        console.log(leafletMap.getCenter());
        leafletMap.addLayer(wmsLayer);


        // 这是对接第三方
        // mapbox 官网注册并创建下面的access token都是免费的，不过有5w次的浏览限制
        // var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2FuZXdhbmciLCJhIjoiY2pwM2UxNHNkMGF1MzNwc2FtMnNhdXJsMCJ9.KZpCBtizDeltZO6JhGc6_w';
        // //初始化 地图
        // var leafletMap = L.map('mapDiv').setView([18.260521, 109.517698],  10);
        // //将图层加载到地图上，并设置最大的聚焦还有map样式
        // L.tileLayer(url, {
        //         maxZoom: 12,
        //         id: 'mapbox.streets'
        // }).addTo(leafletMap);

        //增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
        L.marker([18.260521, 109.517698]).addTo(leafletMap)
                .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
        
        //增加一个圈，设置圆心、半径、样式
        L.circle([18.260521, 109.517698], 500, {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5
        }).addTo(leafletMap).bindPopup("I am a circle.");
        
        //增加多边形
        L.polygon([
                [18.400849, 109.004772],
                [18.260521, 109.517698],
                [18.400534, 109.786696]
        ]).addTo(leafletMap).bindPopup("I am a polygon.");
        
        // 为点击地图的事件 增加popup
        var popup = L.popup();
        function onMapClick(e) {
                popup
                        .setLatLng(e.latlng)
                        .setContent("You clicked the map at " + e.latlng.toString())
                        .openOn(leafletMap);
        }
        leafletMap.on('click', onMapClick);
</script>

效果图：