(二)初见leaflet

在https://mapshaper.org上将shp数据转换成geojson后,下一个任务是利用leaflet在网页上显示这个地图。

话不多说,直接上代码吧。

首先是最简单的版本:

    

       

 Leaflet Test                

            

                

               

       

   

       

       

       

       

       

   

这个版本实现后,我就可以在网页上显示那个geojson文件了(虽然转换为了js文件)。

过程中有两个坑:

一是刚开始忘了打

中的style项,导致最后什么都没出来。

二是弄好后打开网页发现一片蓝,一度怀疑出了神奇BUG,后来发现只是放大比例太大:(

然后就开始做些优化,加些交互了——

1. 修改zoom,我再也不想一打开网页就是一片蓝了

2. 修改map的宽与高,使其充满整个浏览器屏幕

3. 修改my_map的center,(0,0)多好看(强迫症

4. 点击显示经纬度

5. 给每个polygon填充不同的颜色

6. 设置一个显示我所在位置的marker

7. 设置显示鼠标悬浮国家名称的功能

最终代码如下:

(二)初见leaflet_第1张图片
(二)初见leaflet_第2张图片
(二)初见leaflet_第3张图片

(引用编辑起来太麻烦了……直接上图)

你可能感兴趣的:((二)初见leaflet)