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. ...
随机推荐
- 关于 ThreadLocalRandom 随机数生成器
ThreadLocalRandom 线程安全随机数获取. 示例随机整数:java.util.concurrent.ThreadLocalRandom.current().nextInt(); 线程Th ...
- JDK9的新特性:JVM的xlog
目录 简介 xlog的使用 selections output decorators 总结 简介 在java程序中,我们通过日志来定位和发现项目中可能出现的问题.在现代java项目中,我们使用log4 ...
- 如何通过OpenHarmony的音频模块实现录音变速功能?
简介 OpenAtom OpenHarmony(以下简称"OpenHarmony")是由开放原子开源基金会孵化及运营的开源项目,是面向全场景.全连接.全智能时代的智能物联网操作系统 ...
- CSP-S2021江西自评分数(10-26)
娱乐性质,不负责任 在机房大佬的努力下,评测完了 总表 姓名 编号 总分 airport bracket palin traffic JX-00001 JX-00001 0 0 0 0 0 JX-00 ...
- SSM框架整合——书籍管理系统
1.准备工作: 1.1.环境要求 IDEA MySQL 5.7.19 Tomcat 9 Maven 3.6 1.2.数据库设计 创建一个存放书籍数据的数据库表: CREATE DATABASE `ss ...
- 在linux上使用Qt开发动态库项目,怎么只生成一个so文件
背景: 在linux系统上,我们使用 Qt 开发动态库项目时,会默认生成四个文件:x.so .x.so.1 .x.so.1.0.x.so.1.0.0 四个文件,只有一个真实的so库,剩下的三个都是链 ...
- TextIn.com API使用心得
我们参加了本次大学生创新创业服务外包大赛,在项目中大量使用到了合合信息所提供的api进行相关功能实现,所以在这里写一篇博客分享一下我们在项目的实际推进中关于TextIn.com API使用心得 我们的 ...
- Vim 安装与基础操作指南
0x00 链接 Vim 官网 Vim GitHub Vim 中文文档 0x01 准备 (1)下载与安装 在官网地址找到 Download 标签,在其中根据操作系统选择相应的版本,以下以 Windows ...
- 推荐几款Vue后台管理系统的框架,以便备用
推荐几款Vue后台管理系统的框架,以便备用 Vue.js 是一个目前比较流行的前端框架,在业界也算很有名气,今天这里为大家罗列一下基于Vue的后端管理的框架. 使用这些框架你会发现它包括了我们常用的路 ...
- 如何用vsftpd实现用户不同权限:只能下载,可上传,管理权限等 [仅供参考未亲测]
如何用vsftpd实现用户不同权限:只能下载,可上传,管理权限等 2007-01-29 10:20:09 分类: LINUX 前提条件: 必须安装包:vsftpd-2.0.1-5 ...