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 相关文章推荐
JS操作HTML自定义属性的方法
Feb 10 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
javascript表单事件处理方法详解
May 15 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
javascript实现雪花飘落效果
Aug 19 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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
理解php Hash函数,增强密码安全
2011/02/25 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
简历的自荐信
2013/12/19 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
妇产科护理心得体会
2016/01/22 职场文书
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android