react中试用leaflet简单起步

写在最前边，前不久的一个项目中要做一个地图的数据可视化需求。项目中用到了 Leaflet。项目到现在功能已经基本实现，现在写下来做一下记录。Demo是用 create-react-app 搭建的。源码都放在了Github上

安装

npm i leaflet --save

起步

引入Leaflet import L from 'leaflet';

准备一个容器 ,给容器设置100%宽和100%高

<style>
    #map{
        width:100%;
        height:100%;
    }
</style>
<div id='map'></div>

然后实例化一个地图

this.map = L.map('map').setView([37.92388861359015,115.22048950195312], 16);
this 是指当前React组件 this.map 是在组件的 constructor 方法中定义的。

constructor(){
    super()
    this.map=null;
} 

L.map() 方法中传入容器的id，setView(latlng,zoom)中传入两个参数，第一个参数是地图显示的中心位置，第二个参数是地图实例化之后的级别。

这样地图就创建好了，但是在浏览器中看到没有地图只是灰色的一片。

给地图加上漂亮的高德底图

地图添加底图有好几种，如果有自己的gis服务就可以加载自己的底图。还可以用Mapbox的免费底图。这里还是要感谢@木遥提供的地图URL。还有卫星图、百度地图、谷歌地图的URL都有哦。

L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
      subdomains: "1234",
      attribution: '高德地图'
    }).addTo(this.map);

再刷新页面看，变成了这样子

Map Options

参考官方文档

不想要右下角那个版权信息怎么办？

一个简单粗暴的方法就是 右键审查元素 找到版权信息的 class，自己写一个display:none; 哈哈搞定了。

当然官方是有办法隐藏版权信息的,只需要实例化地图的时候传入第二个参数即可。__第二个参数需要传入一个对象__。

    let mapOptions={
      attributionControl:false
    }
    this.map = L.map('map',mapOptions).setView([37.92388861359015,115.22048950195312], 16);