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. ...
随机推荐
- #线段树,排列组合#洛谷 6108 [Ynoi2009] rprsvq
题目链接 分析 维护区间和以及区间平方和都比较简单,考虑答案是什么,根据方差公式的变形. \[ans=\frac{\sum_{j=1}^na_j^2}{n}-\frac{(\sum_{j=1}^na_ ...
- Python 变量:创建、类型、命名规则和作用域详解
变量 变量是用于存储数据值的容器. 创建变量 Python没有用于声明变量的命令. 变量在您第一次为其分配值时被创建. 示例 x = 5 y = "John" print(x) p ...
- 痞子衡嵌入式:使能i.MXRT1050,1060 Hab签名或加密启动时App链接在片内SRAM的限制
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是使能i.MXRT1050, 1060 Hab签名或加密启动时App链接在片内SRAM的限制. 最近有客户反馈,在 RT1060 上测试 ...
- HarmonyOS开发案例分享:万能卡片也能用来玩游戏
一.前言 作为一名开发爱好者,从大了讲,我学习并进行HarmonyOS相关开发是为了能为鸿蒙生态建设尽一份绵薄之力,从小了讲,就是为了自己的兴趣.而万能卡片是一个让我非常感兴趣的东西. 很多时候我跟别 ...
- Web自动化实战:去哪儿网购票流程测试
克隆源码 项目Github地址:https://github.com/gy-7/Web-automation-practice/tree/main/project1_qunar_booking_tic ...
- 获取电脑真实的IP地址,忽略虚拟机等IP地址的干扰
/** * @author yins * @date 2018年8月12日下午9:53:58 */ import java.net.Inet4Address; import java.net.Inet ...
- resin报错:java.lang.IllegalStateException: block Block
java.lang.IllegalStateException: block Block 启动resin时报错 主要的提示信息就是下面这个 java.lang.IllegalStateExceptio ...
- 力扣1113(MySQL)-报告的记录(简单)
题目: 动作表:Actions 此表没有主键,所以可能会有重复的行. action 字段是 ENUM 类型的,包含:('view', 'like', 'reaction', 'comment', 'r ...
- 01_Vue技术-Hello案例分析
初始vue: 1.想让vue工作,就必须创建一个Vue实例,且要传入一个配置对象: 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的vue语法: ...
- 比Bloom Filter节省25%空间!Ribbon Filter在Lindorm中的应用
简介: 本文研究了一种新的过滤器Ribbon Filter,并将其集成到Lindorm中 作者:箫苏 朝戈 正研 1 前言 Lindorm是一个低成本高吞吐的多模数据库,目前,Lindorm是阿里内部 ...