【一】地图 Leaflet 起步
来源:互联网 发布:qt助手是什么软件 编辑:程序博客网 时间:2024/05/17 23:31
写在最前边,前不久的一个项目中要做一个地图的数据可视化需求。项目中用到了 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);
阅读全文
0 0
- 【一】地图 Leaflet 起步
- [leaflet] esri-leaflet(一):初识leaflet
- leaflet加载百度地图
- leaflet.js 开发地图
- leaflet加载百度地图
- Leaflet 地图中绘制多边形
- leaflet限制地图拖动范围
- Vue.js使用Leaflet地图
- Leaflet入门之地图显示
- Leaflet API 翻译(一)
- 一、初识Leaflet
- R语言在线地图神器:Leaflet for R包(一)
- 地图组件Leaflet地图偏移问题
- 【leaflet】 leaflet移除地图上所有marker(layers)
- 【leaflet】 leaflet移除地图上所有marker(layers)
- leaflet学习教程 (一)
- 【leaflet】地图显示、标记、图层切换
- leaflet加载百度地图(矫正篇)
- spring boot 使用javaconfig配置mybatis,pagehelper
- ULINK的手动刷新固件
- html5调用ajax关于服务的返回数据问题
- 115个Java面试题和答案——终极列表(上)
- 144. Binary Tree Preorder Traversal
- 【一】地图 Leaflet 起步
- PHP判断点是否在多边形区域内外
- Tomcat多域名配置
- Java 时间换算
- 前端css基础知识(3)
- 简练网软考知识点整理-项目风险审计及风险评估
- Linux下解压zip分卷文件
- 运维shell实例
- Android开发命名规范