leaflet加载geojson叠加显示功能代码


Posted in Javascript onFebruary 21, 2020

这篇文章主要介绍了leaflet加载geojson叠加显示功能代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

geojson需要先制作shp,然后导入下面网站生成geojson。

https://mapshaper.org/

geojson,最好放后台,前台通过异步请求去加载json,然后显示。

getGeojsonByName({name:geojson_name}).then(data=>{
     if (this.bondarylayer) {
      if (this.map.hasLayer(this.bondarylayer))
      {
       this.map.removeLayer(this.bondarylayer);
      }
     }
     this.bondarylayer = L.geoJSON(data, {
      style: {
       color: '#E066FF',
       fillOpacity: 0,
       weight: 4,
      },
      pane: 'overlayPane'
     });
     this.map.addLayer(this.bondarylayer);
    });

叠加地图之后,

this.map.flyTo([34.22, 109.114], 9, { animate: true, duration: 0.2 });

将地图的视野范围添加到相应区域。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
如何利用js在两个html窗口间通信
Apr 27 Javascript
JavaScript中this函数使用实例解析
Feb 21 #Javascript
如何通过JS实现转码与解码
Feb 21 #Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 #Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 #Javascript
JS实现判断移动端PC端功能
Feb 21 #Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 #Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 #Javascript
You might like
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
简单介绍Python中的RSS处理
2015/04/13 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Django REST framework 分页的实现代码
2019/06/19 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
django 单表操作实例详解
2019/07/30 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
Python实现粒子群算法的示例
2021/02/14 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
婚礼主持结束词
2014/03/13 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
春节晚会开场白
2015/05/29 职场文书
大学运动会通讯稿
2015/07/18 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
Python上下文管理器Content Manager
2021/06/26 Python