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

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

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

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

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

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



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

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

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

局域网内web地图的简单实现的更多相关文章

  1. Snmp协议应用-扫描局域网内打印机

    .h2cls { background: #6fa833 none repeat scroll 0 0 !important; color: #fff; font-family: "微软雅黑 ...

  2. labview web发布局域网内访问

    按照labview的web访问具体步骤操作完之后,把电脑的网络要设置在局域网环境下,网络要处于专用网络中,就可以进行局域网内访问

  3. 配置IIS,以在局域网内访问发布的web站点

    在windows 7或win8 中 配置IIS, 以在局域网内访问自己发布的web 网站或应用程序.主要配置步骤如下: 1. 打开 win7 或 win8 控制面板,选择: 打开或关闭windws 功 ...

  4. mDNS原理的简单理解——每个进入局域网的主机,如果开启了mDNS服务的话,都会向局域网内的所有主机组播一个消息,我是谁,和我的IP地址是多少。然后其他也有该服务的主机就会响应,也会告诉你,它是谁,它的IP地址是多少

    MDNS协议介绍 mDNS multicast DNS , 使用5353端口,组播地址 224.0.0.251.在一个没有常规DNS服务器的小型网络内,可以使用mDNS来实现类似DNS的编程接口.包格 ...

  5. 局域网内python socket实现windows与linux间简单的消息传送

    有个需求,就是在windows上看见一篇介绍linux相关的文章,想在局域网内的另外一台linux电脑上尝试一下, 于是就需要把该网页链接发送给linux,不想一点一点敲链接,又苦于没有找到其它好的方 ...

  6. Android百度地图的简单实现

    2015-06-13 最近学习了百度地图API的简单开发,现记录如下:(持续更新中) 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API.Web服务AP ...

  7. Web地图呈现原理

    地图投影 对于接触互联网地图的同学来说,最开始接触的恐怕就是坐标转换的过程了.由于地球是个近似椭球的形状,有各种各样的椭球模型来模拟地球,最著名的也就是GPS系统使用的WGS84椭球了.但是这些椭球体 ...

  8. 使用apt-mirror建立局域网内的Debian/Ubuntu源镜像

    转:http://forum.ubuntu.org.cn/viewtopic.php?t=41791 第一次翻译,翻译得不好还请大家见谅,多多指出错误~!:) 原文可以见如下的贴子:http://fo ...

  9. 从零打造一个Web地图引擎

    说到地图,大家一定很熟悉,平时应该都使用过百度地图.高德地图.腾讯地图等,如果涉及到地图相关的开发需求,也有很多选择,比如前面的几个地图都会提供一套js API,此外也有一些开源地图框架可以使用,比如 ...

随机推荐

  1. Pandas介绍

    pandas是python非常好用的一个数据结构包,包含有许多数据操作的方法,能够让你快速简便的提取和保存数据,节省你在这块的数据流操作耗时,从而让你更加专注于逻辑的设计和算法的设计.很多算法的相关库 ...

  2. 容斥原理解决某个区间[1,n]闭区间与m互质数数量问题

    首先贴出代码(闭区间[1,n]范围内和m互质的数) 代码: int solve(II n,II m){ vector<II>p; ;i*i<=m;i++){ ){ p.push_ba ...

  3. ora-00600错误解决一枚

    今天网友遇到ora-600错误,这里把这个ora-600错误的解决方法详细记录一下. 最初报错信息如下: ora-600-图1 ora-600-图2 图3 这里我们可以看到报错控制文件版本不一致,要求 ...

  4. Oracle等待事件之Latch Free

    1.产生原因 表示某个锁存器上发生了竞争.首先应该确保已经提供了足够多的Latch 数,如果仍然发生这种等待事件,那么应该进一步确定是那种锁存器上发生了竞争(在v$session_wait 上的P2 ...

  5. Django权限系统auth模块详解

    转自:原文出处 auth模块是Django提供的标准权限管理系统,可以提供用户身份认证, 用户组和权限管理. auth可以和admin模块配合使用, 快速建立网站的管理系统. 在INSTALLED_A ...

  6. [SQL] 让特定的数据 排在最前

    MYSQL目前常用的两种方法,如下: 让值为"张三" 的数据排在最前. -- 方法一 end asc -- 方法二 select * from tableName where co ...

  7. Disruptor的伪共享解决方案

    1.术语 术语 英文单词 描述 内存屏障 Memory Barriers 是一组处理器指令,用于实现对内存操作的顺序限制. In the Java Memory Model a volatile fi ...

  8. python提取相对路径

    原理: 用绝对路径,截断根目录的路径,就得到了相对路径. 代码 方法1:字符串替换(用字符串函数)推荐 import os print('==========1===========') abspat ...

  9. android 控件加圆角

    1.新建一个radius_border.xml <shape xmlns:android="http://schemas.android.com/apk/res/android&quo ...

  10. Python微信机器人

    Python微信机器人 本文目录 一 简介 二 登录微信 三 微信好友男女比例 四 微信好友地域分布 五 微信聊天机器人 一 简介 wxpy基于itchat,使用了 Web 微信的通讯协议,,通过大量 ...