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