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. 关于 ThreadLocalRandom 随机数生成器

    ThreadLocalRandom 线程安全随机数获取. 示例随机整数:java.util.concurrent.ThreadLocalRandom.current().nextInt(); 线程Th ...

  2. JDK9的新特性:JVM的xlog

    目录 简介 xlog的使用 selections output decorators 总结 简介 在java程序中,我们通过日志来定位和发现项目中可能出现的问题.在现代java项目中,我们使用log4 ...

  3. 如何通过OpenHarmony的音频模块实现录音变速功能?

    简介 OpenAtom OpenHarmony(以下简称"OpenHarmony")是由开放原子开源基金会孵化及运营的开源项目,是面向全场景.全连接.全智能时代的智能物联网操作系统 ...

  4. CSP-S2021江西自评分数(10-26)

    娱乐性质,不负责任 在机房大佬的努力下,评测完了 总表 姓名 编号 总分 airport bracket palin traffic JX-00001 JX-00001 0 0 0 0 0 JX-00 ...

  5. SSM框架整合——书籍管理系统

    1.准备工作: 1.1.环境要求 IDEA MySQL 5.7.19 Tomcat 9 Maven 3.6 1.2.数据库设计 创建一个存放书籍数据的数据库表: CREATE DATABASE `ss ...

  6. 在linux上使用Qt开发动态库项目,怎么只生成一个so文件

    背景: 在linux系统上,我们使用 Qt 开发动态库项目时,会默认生成四个文件:x.so  .x.so.1 .x.so.1.0.x.so.1.0.0 四个文件,只有一个真实的so库,剩下的三个都是链 ...

  7. TextIn.com API使用心得

    我们参加了本次大学生创新创业服务外包大赛,在项目中大量使用到了合合信息所提供的api进行相关功能实现,所以在这里写一篇博客分享一下我们在项目的实际推进中关于TextIn.com API使用心得 我们的 ...

  8. Vim 安装与基础操作指南

    0x00 链接 Vim 官网 Vim GitHub Vim 中文文档 0x01 准备 (1)下载与安装 在官网地址找到 Download 标签,在其中根据操作系统选择相应的版本,以下以 Windows ...

  9. 推荐几款Vue后台管理系统的框架,以便备用

    推荐几款Vue后台管理系统的框架,以便备用 Vue.js 是一个目前比较流行的前端框架,在业界也算很有名气,今天这里为大家罗列一下基于Vue的后端管理的框架. 使用这些框架你会发现它包括了我们常用的路 ...

  10. 如何用vsftpd实现用户不同权限:只能下载,可上传,管理权限等 [仅供参考未亲测]

    如何用vsftpd实现用户不同权限:只能下载,可上传,管理权限等  2007-01-29 10:20:09 分类: LINUX 前提条件:       必须安装包:vsftpd-2.0.1-5     ...