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 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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 JSON中文乱码的解决方法详解
2013/06/06 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php中curl使用指南
2015/02/05 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
ReactRouter的实现方法
2021/01/25 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
Python实现的tcp端口检测操作示例
2018/07/24 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
安全承诺书格式
2014/05/21 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
庭外和解协议书
2016/03/23 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers