首先,我先说一下这次的主要目的。我们的想法是在不连互联网的局域网中搭起来一个地图服务,类似于百度地图的网页版本,功能最少要有看地图、放缩、标记、批量标记、实时经纬度坐标。这个东西还是让我费了一番力气(首先要搞明白地图加载过程和常用gis系统的服务调用)。这种系统的工作原理大概如下图

我在此就不去写文件系统和gis服务的部分了,这一部分的核心就是你先要下载一个可以用、自己满意的瓦片文件数据,然后使用一些webgis的框架把它做成服务,怕麻烦的话可以考虑geoserver以及一些docker的方案。

那么我们要做的就是前端这一部分,首先推荐一下leaflet这个框架,非常的清晰明了,按照quickstart走基本没问题。https://leafletjs.com/

我们将要实现的丑陋的界面如下(渣渣审美,也懒得搞美观)

首页就是简单朴素的地图,可以在下面的地图里进行拖拽,缩放,上面的三个按钮顾名思义,分别是标记一个点,清除掉所有标记点,批量标记。

这就是我们标记之后的状态,蓝色气泡是默认的,你也可以换成你自己的图。标记既可以按照经纬度去准确标点,也可以鼠标左键双击标点。



按照经纬度准确标点的功能如上图所示。

那么下面就是我们开始愉快的看代码了,完整的项目文件夹在 https://github.com/chuxiuhong/webmap

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图服务</title>
</head>
<body>
<link rel="stylesheet" href="./static/bootstrap.min.css"> //加载bootstrap的css,这些静态文件都有cdn库,我在项目内使用的是本地化的,可以到github上看完整的项目文件夹
<script src="./static/jquery.slim.min.js"></script>
<script src="./static/popper.min.js"></script>
<script src="./static/bootstrap.min.js"></script>
<link rel="stylesheet" href="static/leaflet.css"/> //加载leaflet的css
<script src="static/leaflet.js"></script> //加载leaflet的js,切记要把js放在css后面加载 <nav class="navbar navbar-inverse">
<div class="col-md-4">
<button type="button" class="btn btn-warning" id="mark_button">标记</button> //三个按钮
<button type="button" class="btn btn-warning" id="clear_button">清除标记</button>
<button type="button" class="btn btn-warning" id="batch_mark">批量标记</button>
</div>
<div class="col-md-2">
<p class="text-center">地图</p>
</div>
<div class="col-md-4">
<p class="text-right" id="point"></p>
</div>
</nav> <style>
#mapid { height: 1000px; } //设置地图的尺寸
</style>
<div id="mapid">
<script type="text/javascript">
document.oncontextmenu = function (e) {
return false; //禁用掉右键,可写可不写的部分
};
var map = L.map('mapid').setView([30, 100], 4); //设置地图初始化时查看的部分及尺度
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18}).addTo(map);
//核心语句,加载openstreetmap的瓦片服务,{z}代表level,{x},{y}分别代表行和列,maxzoom很明显是最大放大级别(先了解下瓦片数据的加载方式即可知晓),加载之后把图添加到map中
var marker_group = L.layerGroup().addTo(map); //建立一个标记组,便于我们后面批量的删除掉这些标记点
map.on('mousemove', function (e) {
var latlng_str = e.latlng.toString().split("LatLng")[1]; //移动鼠标的时候触发事件,在右上角显示出来我们的经纬度
$("#point").html(latlng_str)
});
map.on('dblclick', function (e) {
var marker = L.marker(e.latlng).addTo(marker_group); //双击的时候触发标记,标记鼠标当前的选中点 }); $("#clear_button").click(function (e) {
map.removeLayer(marker_group);//点击清除标记之后,把标记图层整个都删掉
marker_group = L.layerGroup().addTo(map);//删掉之后还要建立一个同名的新的图层,好让我们可以继续使用标记功能
}); $('#mark_button').click(function (e) {
var mark_prompt = prompt("先纬度后经度,请用空格分开", "");//按照输入的经纬度标记点
var point_latlng = L.latLng(mark_prompt.split(" ")[0], mark_prompt.split(" ")[1]);
var marker = L.marker(point_latlng).addTo(marker_group);
});
$('#batch_mark').click(function (e) {
$('#file').trigger('click');
});
function upload(input) {
//这里我们是默认我们的经纬度坐标通过excel中的两列复制到文本文件中,那么中间的间隔就是"\t",你也可以改成自己想要的读取方法
if (window.FileReader) {
var file = input.files[0];
filename = file.name.split(".")[0];
var reader = new FileReader();
reader.onload = function() {
var str_list = reader.result.split("\n");
for (var i =0;i<str_list.length;i++){
if(str_list[i].length > 1){
a = str_list[i].split("\t")[0];
b = str_list[i].split("\t")[1];
console.log(a,b);
var point_latlng = L.latLng(a, b);
console.log("get here");
var marker = L.marker(point_latlng).addTo(marker_group);
}
}
console.log(str_list);
};
reader.readAsText(file);
}
} </script>
<input type="file" id="file" onchange="upload(this)"
style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/>
</div>
</body>
</html>

最新文章

  1. sql初始化XML操作
  2. mysql索引无效且sending data耗时巨大原因分析
  3. Tomcat安装与配置图文教程
  4. openwrt看IP流量
  5. poj3104 Drying(二分最大化最小值 好题)
  6. android sdk 汉化
  7. Mac charles 抓取https请求,安装证书后还是显示unknown
  8. Delphi FrieDAC 大数据处理
  9. nodes 验证码
  10. Intellij Idea常用配置设置
  11. Python递归遍历《指定目录》下的所有《文件》
  12. linux 下awk后统计某一列数据之和简单的命令
  13. Linux 系统安全检查(shell)
  14. strcpy、memcpy和memset之间的区别
  15. vue之slot,组件标签嵌套
  16. 使用JTextArea示例
  17. adb 不设别解决方案
  18. Android -- SQLite 数据库创建,增删改查,事务处理
  19. ubi实际使用
  20. Win磁盘MBR转换为GUID

热门文章

  1. MySQL怎样存储IP地址 IP转数字 互转
  2. talib 中文文档(八): Momentum Indicator Functions 动量指标
  3. Python3、Unicode、UTF-8、编码
  4. 【css a标签 鼠标悬浮时变手型】
  5. 第1章 1.3计算机网络概述--规划IP地址介绍MAC地址
  6. 纯css3加载动画
  7. Openstack(十七)部署快存储cinder
  8. Spark SQL与Hive on Spark的比较
  9. Mybatis一对一映射
  10. 多口USB HUB信号延长器 USBX-M200(针对于A客户使用时很棒吧)