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 });

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

leaflet 加载geojson叠加显示的更多相关文章

  1. 使用 Cesium 动态加载 GeoJSON 数据

    前言 需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析 这里面牵扯到两 ...

  2. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  3. Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题

    问题如题:Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题 解决办法:通过火狐浏览器工具发现是时间格式不对的原因,需要将时间格式修改为:yyyy-MM--DD   ...

  4. vue项目未加载完成前显示loading...

    1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...

  5. IE8中jQuery.load()加载页面不显示的原因

    一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. url :请求服务器的地址 dat ...

  6. 在页面未加载完之前显示loading动画

    在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...

  7. [BOM]实现页面loading效果,在图片资源加载完之前显示loading

    使用到jquery. 判断整个页面是否加载完: // 这是根据js判断,页面加载完毕就显示 window.onload = function () { // console.log('load com ...

  8. 如何实现通过Leaflet加载dwg格式的CAD图

    前言 ​ 在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加,openlayers功能很全面,但同时也很庞大,入门比较难,适合于大中型项目中.而在中小型项目中,一般用开源的 ...

  9. leaflet加载离线OSM(OpenStreetMap)

    本文为博主原创,如需转载需要署名出处. leaflet作为广为应用的开源地图操作的API,是非常受欢迎,轻量级的代码让使用者更容易操作. 废话不多说,下面直接给出范例. 首先在这个网站下载leafle ...

  10. Jquery判断页面图片是否加载失败,加载失败则显示默认图片

    例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

随机推荐

  1. 深入理解 Spring IoC 和 DI:掌握控制反转和依赖注入的精髓

    在本文中,我们将介绍 IoC(控制反转)和 DI(依赖注入)的概念,以及如何在 Spring 框架中实现它们. 什么是控制反转? 控制反转是软件工程中的一个原则,它将对象或程序的某些部分的控制权转移给 ...

  2. 报名启动丨HMS Core. Sparkle应用创新论坛

    图形领域将迎来哪些技术新进展?时下热门的3D.AR/VR和数字人等创新技术又会给应用开发带来哪些新的启发?以上问题,将在7月15日HMS Core. Sparkle应用创新论坛揭晓,赶快点击链接报名参 ...

  3. 为什么使用gs_probackup执行全量备份时,提示无法连接到数据库?

    为什么使用 gs_probackup 执行全量备份时,提示无法连接到数据库? 背景介绍: 在使用 gs_probackup 执行全量备份时,提示无法连接到数据库. 报错内容: [ommdoc@host ...

  4. 比nestjs更优雅的ioc:跨模块访问资源

    使用ts的最佳境界:化类型于无形 在项目中使用ts可以带来类型智能提示与校验的诸多好处.同时,为了减少类型标注,达到化类型于无形的效果,CabloyJS引入了ioc和依赖查找的机制.在上一篇文章中,我 ...

  5. MySQL集群入门(PXC)

    目标: 1.掌握PXC集群MySQL方案的原理: 2.掌握PXC集群的强一致性: 3.掌握PXC集群的高可用方案:硬件要求: 1.Win10x64企业版/linux/MacOS: 2.Docker虚拟 ...

  6. CentOS SSH安装和配置

    CentOS SSH安装和配置 赞 0 CentOS  SSH  安装  配置  OpenSSH SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Worki ...

  7. Linux下的常见基本指令

    pwd //显示当前用户所在的路径 ls //显示当前路径下的文件名或者目录名称 ls-l //显示当前路径下的文件或者目录的更详细的属性信息 cd 一个目录路径 //进入一个目录,进去后,可以用pw ...

  8. three.js使用Instanced Draw+Frustum Cull+LOD来渲染大场景(开源)

    大家好,本文使用three.js实现了渲染大场景,在移动端也有较好的性能,并给出了代码,分析了关键点,感谢大家~ 关键词:three.js.Instanced Draw.大场景.LOD.Frustum ...

  9. 力扣275(jav&python)-H 指数 II(中等)

    题目: 给你一个整数数组 citations ,其中 citations[i] 表示研究者的第 i 篇论文被引用的次数,citations 已经按照 升序排列 .计算并返回该研究者的 h 指数. h ...

  10. 力扣915(java&python)-分割数组(中等)

    题目: 给定一个数组 nums ,将其划分为两个连续子数组 left 和 right, 使得: left 中的每个元素都小于或等于 right 中的每个元素.left 和 right 都是非空的.le ...