局域网内web地图的简单实现

时间 2019-12-13

标签局域网内 web 地图简单实现栏目 HTML 繁體版

原文原文链接

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

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

那么咱们要作的就是前端这一部分，首先推荐一下leaflet这个框架，很是的清晰明了，按照quickstart走基本没问题。https://leafletjs.com/
咱们将要实现的丑陋的界面以下（渣渣审美，也懒得搞美观）
html

首页就是简单朴素的地图，能够在下面的地图里进行拖拽，缩放，上面的三个按钮顾名思义，分别是标记一个点，清除掉全部标记点，批量标记。前端

这就是咱们标记以后的状态，蓝色气泡是默认的，你也能够换成你本身的图。标记既能够按照经纬度去准确标点，也能够鼠标左键双击标点。java

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

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

<!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>