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 });
将地图的视野范围添加到相应区域。
leaflet 加载geojson叠加显示的更多相关文章
- 使用 Cesium 动态加载 GeoJSON 数据
前言 需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析 这里面牵扯到两 ...
- ie6,7下js动态加载图片不显示错误
ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...
- Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题
问题如题:Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题 解决办法:通过火狐浏览器工具发现是时间格式不对的原因,需要将时间格式修改为:yyyy-MM--DD ...
- vue项目未加载完成前显示loading...
1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...
- IE8中jQuery.load()加载页面不显示的原因
一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. url :请求服务器的地址 dat ...
- 在页面未加载完之前显示loading动画
在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...
- [BOM]实现页面loading效果,在图片资源加载完之前显示loading
使用到jquery. 判断整个页面是否加载完: // 这是根据js判断,页面加载完毕就显示 window.onload = function () { // console.log('load com ...
- 如何实现通过Leaflet加载dwg格式的CAD图
前言 在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加,openlayers功能很全面,但同时也很庞大,入门比较难,适合于大中型项目中.而在中小型项目中,一般用开源的 ...
- leaflet加载离线OSM(OpenStreetMap)
本文为博主原创,如需转载需要署名出处. leaflet作为广为应用的开源地图操作的API,是非常受欢迎,轻量级的代码让使用者更容易操作. 废话不多说,下面直接给出范例. 首先在这个网站下载leafle ...
- Jquery判断页面图片是否加载失败,加载失败则显示默认图片
例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
随机推荐
- #轮廓线dp,模型转换#洛谷 3226 [HNOI2012]集合选数
题目 问有多少个集合 \(S\) 是 \([1,n]\) 的子集, 并且 \(\forall a,b\in S,a|b\),满足 \(\frac{b}{a}\neq \{2,3\}\) 分析 可以发现 ...
- #分治,Dijkstra#洛谷 3350 [ZJOI2016]旅行者
题目 给定一张\(n*m\)的网格图,\(q\)次询问两点之间距离 \(n*m\leq 2*10^4,q\leq 10^5\) 分析 首先floyd会TLE,考虑两点间距离可以由两段拼凑起来, 那么枚 ...
- #容斥,搜索,线性筛#CF83D Numbers
洛谷 CF83D 分析 题意就是\(\sum_{i=l}^r[k|i]*[mn[\frac{i}{k}]\geq k]\) 首先线性筛每个数的最小质因数,如果\(\frac{r}{k}\)较小直接暴力 ...
- 解锁OpenHarmony技术日!年度盛会,即将揭幕!
OpenHarmony技术日 即将揭幕!4月25日(星期一)09:00-18:00与你惊喜相约! 扫码直达 共建新技术.开拓新领域 OpenHarmony 工作委员会+7 家单位共同发起 ...
- Git 分支管理:优化版本控制与应急处理的关键策略
使用 Git 分支:轻松管理不同版本和应对紧急情况的最佳实践 使用 Git 分支 在 Git 中,分支是主仓库的新/独立版本. 假设你有一个大型项目,需要对其进行设计更新. 没有使用 Git 时: 复 ...
- 深度剖析 Spring 框架在 Java 应用开发中的优势与应用
Spring 是用于企业 Java 应用程序开发的最流行的应用程序开发框架.全球数百万开发人员使用 Spring Framework 创建高性能.易于测试和可重用的代码.Spring Framewor ...
- Qt调用摄像头一,基础版
本示例,为纯Qt调用摄像头,功能比较简单,打开摄像头,设置参数,拍照 涉及到的功能有: 获取摄像头列表 获取摄像头分辨率 获取摄像头帧率 获取摄像头支持的视频模式 设置摄像头参数 拍照 此版本的缺点是 ...
- Redis和elasticsearch
redis -----------NOSQL的对比和劣和应用场景参考好文http://www.redis.cn/articles/20181020003.html --------- -------- ...
- ssm 创建bean的三种方式和spring依赖注入的三种方式
<!--创建bean的第一种方式:使用默认无参构造函数 在默认情况下: 它会根据默认无参构造函数来创建类对象.如果 bean 中没有默认无参构造函数,将会创建失败--> <bean ...
- 【Java面试指北】单例模式
单线程下的单例模式: public class Singleton { private static Singleton instance; private Singleton() {} public ...