局域網內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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。