首先，我先说一下这次的主要目的。我们的想法是在不连互联网的局域网中搭起来一个地图服务，类似于百度地图的网页版本，功能最少要有看地图、放缩、标记、批量标记、实时经纬度坐标。这个东西还是让我费了一番力气（首先要搞明白地图加载过程和常用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>

局域网内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. throw and throws in Java

    throw and throws in Java - GeeksforGeeks https://www.geeksforgeeks.org/throw-throws-java/ throw and ...

  2. Network of Schools---poj1236（强连通分量）

    题目链接 题意:学校有一些单向网络,现在需要传一些文件 求:1,求最少需要向几个学校分发文件才能让每个学校都收到, 2,需要添加几条网络才能从任意一个学校分发都可以传遍所有学校. 解题思路(参考大神的 ...

  3. vue.js（一）

    之前看过一点vue.js但是知识点没做记录,现在也差不多不记得了,今天把以前看过的翻一遍,顺便提炼一下知识点 注意:下面的所有与vue相关的标签.指令都是写在id="app"的di ...

  4. 如何修改git分支名名称

    1. 修改本地git分支名称指令 git branch -m oldBranchName newBranchName 2. 修改远程仓库(github)上的分支名称 git本地分支名已修改,只需推送到 ...

  5. go-002-语言结构

    Go 语言的基础组成有以下几个部分: 包声明package,必须在源文件中非注释的第一行指明这个文件属于哪个包, 引入包import,在开头部位使用 import 导入包,单个包 import “fm ...

  6. Webwork 学习笔记

    1. 首先配置一个简单的webwork应用 核心jar: commons-logging.jarognl.jaroscore.jarvelocity-dep.jarwebwork-2.1.7.jarx ...

  7. 转： C# 根据当前时间获取，本周，本月，本季度等时间段 .Net中Exception

    DateTime dt = DateTime.Now; //当前时间 DateTime startWeek = dt.AddDays( - Convert.ToInt32(dt.DayOfWeek.T ...

  8. VS2010/MFC编程入门之十七（对话框：文件对话框）

    上一讲鸡啄米介绍的是消息对话框,本节讲解文件对话框.文件对话框也是很常用的一类对话框. 文件对话框的分类       文件对话框分为打开文件对话框和保存文件对话框,相信大家在Windows系统中经常见 ...

  9. docker 删除所有的 docker ps -a 记录

    docker rm `docker ps -a -q` 删除的是镜像运行的实例,要删除镜像用docker rmi + 镜像名或者那串字符(image  id)

  10. “System.Runtime.InteropServices.COMException (0x80070422): 无法启动服务”解决方法

    应用程序中发生了无法处理的异常.如果单击“退出”,应用程序将立即关闭.无法启动服务,原因可能是已被禁用或其相关联设备没有启动.(异常来自HRESULT:0X80070422).点击详细内容:有关调用实 ...