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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/JavaWebRookie/article/details/98847947

        因系统开发需求,要开发一个地图数据图层叠加,很简单,但是要求是在内网部署。这就说明了,不能用第三方地图服务器,如百度地图,天地图,谷歌等。那么问题就来了,要什么地图?这个时间我才知道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>

效果图:

 

 

相关链接:

geoserver 官网

leaflet 官网

天靖居士GISer 

GeoServer一:GeoServer的安装与初步使用

leaflet加载高德地图和Geoserver的WMS服务

 

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页