写在最前边,前不久的一个项目中要做一个地图的数据可视化需求。项目中用到了 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);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。