Getting started with LeftLeft

What is leaflet?

Leaflet is a lightweight open source js map component, which is suitable for mobile devices. It has simple usage and superior performance. If you have ever used Gaode or Baidu's map api, I believe you can easily start a simpler leaflet

How does leaflet work?

leaflet Its working method is different from that of Gaode Baidu. Because leaflet is an open source project, it only has map components and does not provide map content. In other words, we do not need to register key s to use leaflet.

So after we create a map in the page, we need to go to other map content providers (ArcGIS) to load the map. We may need to apply for a key. Of course, I will give a free and beautiful map content in the following

usage method

Reference external code

<!-- provide leaflet Style of -->
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.2.0/leaflet.css">
<!-- provide leaflet Code of -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>   
 <!-- Give Way leaflet It can be used conveniently ArcGIS service -->
<script src="https://unpkg.com/esri-leaflet@2.1.4/dist/esri-leaflet.js"></script>

 html

<div id="map" style="height:500px;"></div>

js code

<script>
        //Method 1
        var map = L.map('map').setView([37.002553, 106.890747], 3);
        //Method 2
        var map = L.map('map', {
            center: [37.002553, 106.890747],
            zoom: 3
        })
    </script>

The above two implementations have the same effect. They both create a map with [51, 51] center and zoom level 3 on the div with id map. Now you can see the following situation

Load map content

 

L.esri.tiledMapLayer({
  url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
}).addTo(map)



Author: hopgordy
Link: https://www.jianshu.com/p/119eef572fa3
Source: Jianshu
The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source.

 

First, go to the previous introductory demo to display the map, and then expand it

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/css/leaflet.css" rel="stylesheet" />
    <script src="~/js/leaflet.js"></script>
    <script src="~/js/leaflet.ChineseTmsProviders.js"></script>
    @*<script src="~/js/lib/main.js"></script>*@
    <script src="~/js/jquery-3.3.1.min.js"></script>
    <script src="~/js/require.js"></script>
    <style>
        #map {
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map">

    </div>
    
    <script>

        var sate = L.tileLayer("https://{s}.google.cn/vt/lyrs=y&hl=zh-CN&scale=2&x={x}&y={y}&z={z}", {
            maxZoom: 22,
            attribution: "Google provide",
            subdomains: ["mt0", "mt1", "mt2", "mt3"],
            updateWhenIdle: false,
            keepBuffer: 50
        });
        //Load map
        var imgm = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", {
            maxZoom: 22,
            minZoom: 5
        }), imga = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", {
            maxZoom: 22,
            minZoom: 5
        });
        //Combine several layers into one layer to process
        var image = L.layerGroup([imgm, imga]);

        var map = L.map("map", {
            //Initialize map processing center
            center: [48.29792669156143, 125.38357257843018],
            //Maximum view
            maxZoom: 19,
            //Zoom of map
            zoom: 14,
            //Layers loaded on the map after initialization
            layers: [image],
            //Confirm whether the attribute control is loaded on the map by default
            attributionControl: false,
            //Confirm that the zoom control is loaded on the map by default
            zoomControl: false
        });

       

        L.control.zoom({
            position: "bottomright"
        }).addTo(map);

    </script>
    
    
</body>
</html>

To get back to business, Leaflet itself is a simple and easy-to-use library with small volume, which is suitable for small projects. Let's see Official website.

Now add a polygon to the map

var polygon = L.polygon([
            [38.561954, 117.675429],
            [38.561954, 117.475429],
            [38.361954, 117.375429]
        ]).addTo(map);
        var polygon1 = L.polygon([
            [38.561954, 116.675429],
            [38.561954, 117.475429],
            [38.361954, 117.375429]
        ]).addTo(map);
        map.fitBounds(polygon.getBounds());
        map.fitBounds(polygon1.getBounds());

 

 

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map) 
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();

Looking at these lines of code, L.map('map ') is to capture a < div id = "map" > < / div >, treat it as a map viewer and assign the map data to it. setView sets the longitude, latitude and scale of the map center point as the user's view area.

50. tileLayer is the vector tile base map. Use the corresponding URL to find the corresponding z, y and x. s is a fast selection of distributed servers, which is generally 1-4, and the sky map is 1-8. Finally, the tileLayer layer needs addTo(map) to be loaded on the map viewer. In the example, the tile base map uses openstreetmap. Of course, you can also use the tile data of sky map as a homework for your reference htoooth/Leaflet.ChineseTmsProviders.

50. Marker is an icon. The first thing to set is the coordinates of the icon. bindPopup is the bubble prompt of binding. Any innerHTML element can be wrapped in it. openPopup is the method to open the prompt.

summary

Leaflet is easy to use and has low learning cost, Document reference . In contrast, baidu Gaode in China doesn't even have WMS and WFS. It's really a little ashamed. It is hoped that the real GISer should choose the real map front tools, such as leaflet and openlayer.

case

Recently I saw an interesting project-- Kobe's 30699 pitches . Kobe's retirement has focused the whole Internet on him. LATime did a project to visualize all Kobe's pitches. At first, I thought it was D3 JS and other advanced data visualization tools, the result is not so. After a careful study of the source code, it is found that the project adopts leaflet JS and carto JS (charge according to the number of visits), the data is expressed in the form of map tiles. Data saved in CartoDB The database contains map tile data and data details of each ball.

This is a typical spatial data visualization project. Convert the corresponding point data into vector tiles as the base map. When the mouse slides over the map, the corresponding data details will be displayed in the form of tooltip, and Leaflet notes 1: a simple introduction The steps are similar. Furthermore, it combines the usage of small map and legend to make the display of data smooth and vivid. The representation of basket and backboard is just the use of line drawing and circle drawing tools such as L.Polyline.

Kobe's 30699 pitches

Dynamic graph



 

Tags: Javascript JQuery

Posted by niroshan on Sun, 08 May 2022 04:27:34 +0300