GeoServer是OGC Web服务器规范的J2EE实现,利用GeoServer可以方便地发布地图数据,允许用户对特征数据进行更新、删除、插入操作,通过GeoServer可以比较容易地在用户之间迅速共享空间地理信息。GeoServer是开源软件。
GeoServer主要包含如下一些特点:
进入官网进行下载http://geoserver.org/download/
点击后自动下载压缩包
下载好解压安装文件,找到根目录下的start.ini文件进行配置服务的端口信息,默认端口是8080
修改端口为自己需要的端口,我这里设置的8880端口
运行bin目录下的startup.bat(Windows)或者startup.sh(Linux)启动服务,启动成功后可以看到成功标识。另外,服务依赖Java环境,Java环境请自行安装。
启动好服务后打开http://127.0.0.1:8880/geoserver/web/(注意端口号写成自己前面配置的端口号),输入默认用户名密码(admin/geoserver)进入系统。
工作区的概念就和tomcat发布的项目目录一样,默认工作区就是ROOT目录。
GeoServer支持的数据源很多,有矢量数据源(Vector Data Sources),栅格数据源(Raster Data Sources)等等。这里我们选择GeoTIFF,转化的带有地理坐标的TIFF格式(下个章节会介绍怎么制作TIFF格式的数据源)的图片加载进来即可。
工作区选择刚刚创建的工作区,添加数据源名称,最后连接参数里面选择本地磁盘的tif文件就添加就可以,注意这个目录显示的是发布GeoServer服务的那台机子磁盘目录。
保存后直接点击发布,直接发布就可以。
点击发布后会让先设置图层信息,按照自己的需求设置好图层,点击保存就可以了。
最后我们点击预览,看看发布后的效果图。
这个是我用cad设计图做的一个图层,看着效果不是很好,大家可以按自己需求进行设计,整个GeoServer地图的发布工作完成。
ArcGis是我们制作地图最常用的软件,网上的安装教程也比较多,大家可以自行下载安装。
打开ArcMap把图片拖入到图层中。
打开ArcToolbox工具包选择Data Management Tools->Projections and Transformations->Define Projection。
选择刚才添加的图片,底下的坐标系选择WGS 1984,点击确定进行投影。
对图片进行坐标系投影后,需要进行经纬度的配准,在工具栏位置右键,选择Georeferencing工具。
选择设置配准点,右键选择第二个input DMS of Lon and Lat那个选项,设置点的经纬度信息,设置3-4个点就可以配准。
如果设置经纬度的选项是灰色的不可输入,图层没有设置坐标系,右键图层选择属性,选择坐标系的选项卡,然后选择WGS 1984坐标系就可以了。
右键图片选择Data->Export Data,把路径改成文件夹,然后格式化和文件名选tiff的,点击保存就导出了。
Leaflet 是一个为移动设备设计的交互式地图的开源的 javascript库, 并只有38k,包含了大多数开发者需要的地图特点。
官网地址: https://leafletjs.com/
直接npm安装,官网下载
npm install leaflet
调用之前发布的地图服务,然后再地图上添加line和marker。
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
export default {
data(){
return {
map:{}
}
},
mounted(){
this.initMap();
},
methods: {
initMap() {
//这里设置marker的图标,不设置可能不显示,可以写到main.js里面全局设置
let DefaultIcon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon;
var wmsLayer= L.tileLayer.wms(
"http://127.0.0.1:8880/geoserver/zxhy/wms", { // 链接要改对应的
layers: 'zxhy:test',//需要加载的图层,就是我们刚刚新建的。map 和 图层名
format: 'image/png',//返回的数据格式
transparent: true
}
);
this.map = L.map("map", {
center: [22.222466,118.058111],
zoom: 15,
layers: [wmsLayer],
zoomControl: false
});
L.control.zoom({
zoomInTitle: '放大',
zoomOutTitle: '缩小'
}).addTo(this.map);
L.polyline([[28.222466,113.058111], [28.222566,113.058611],[28.222486,113.058711]],{color:'green'}).addTo(this.map).bindPopup("2020-06-30巡检路径");
L.marker([28.222466,113.058111]).addTo(this.map).bindPopup("1号巡检点");
L.marker([28.222566,113.058611]).addTo(this.map).bindPopup("2号巡检点");
L.marker([28.222486,113.058711]).addTo(this.map).bindPopup("3号巡检点");
}
}
配合高德或者谷歌地图可以下载Leaflet.ChineseTmsProviders插件,里面收集了各种第三方的地图库链接,可以方便调用,下载好直接引用就可以了。
GitHub地址:https://github.com/htoooth/Leaflet.ChineseTmsProviders
附上最后完整的代码
import L from "leaflet";
import "leaflet/dist/leaflet.ChineseTmsProviders.js";
import "leaflet/dist/leaflet.css";
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
export default {
data(){
return {
map:{}
}
},
mounted(){
this.initMap();
},
methods: {
initMap() {
//这里设置marker的图标,不设置可能不显示,可以写到main.js里面全局设置
let DefaultIcon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon;
var wmsLayer= L.tileLayer.wms(
"http://192.168.1.254:8880/geoserver/zxhy/wms", { // 链接要改对应的
layers: 'zxhy:cshy',//需要加载的图层,就是我们刚刚新建的。map 和 图层名
format: 'image/png',//返回的数据格式
transparent: true
}
);
/**
* 谷歌
*/
var GoogleNormal = L.tileLayer.chinaProvider('Google.Normal.Map', {
maxZoom: 18,
minZoom: 5
}),
Googleimgem = L.tileLayer.chinaProvider('Google.Satellite.Map', {
maxZoom: 18,
minZoom: 5
}),
Googleimga = L.tileLayer.chinaProvider('Google.Satellite.Annotion', {
maxZoom: 18,
minZoom: 5
});
var Googleimage = L.layerGroup([Googleimgem, Googleimga,wmsLayer]);
var GoogleMap = L.layerGroup([GoogleNormal,wmsLayer]);
/**
* 高德地图
*/
var GaodeNormal = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
maxZoom: 18,
minZoom: 5
});
var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
maxZoom: 18,
minZoom: 5
});
var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
maxZoom: 18,
minZoom: 5
});
var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga,wmsLayer]);
var GaodeMap = L.layerGroup([GaodeNormal,wmsLayer]);
var baseLayers = {
"高德地图": GaodeMap,
"高德影像": Gaodimage,
"谷歌地图": GoogleMap,
"谷歌影像": Googleimage,
}
this.map = L.map("map", {
center: [28.222466,113.058111],
zoom: 15,
layers: [GaodeMap],
zoomControl: false
});
L.control.layers(baseLayers, null).addTo(this.map);
L.control.zoom({
zoomInTitle: '放大',
zoomOutTitle: '缩小'
}).addTo(this.map);
L.polyline([[28.222466,113.058111], [28.222566,113.058611],[28.222486,113.058711]],{color:'green'}).addTo(this.map).bindPopup("2020-06-30巡检路径");
L.marker([28.222466,113.058111]).addTo(this.map).bindPopup("1号巡检点");
L.marker([28.222566,113.058611]).addTo(this.map).bindPopup("2号巡检点");
L.marker([28.222486,113.058711]).addTo(this.map).bindPopup("3号巡检点");
}
}