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. js实现多列排序-存在问题

    js实现多列排序 根据业务逻辑调整 sortData 的数据. 排序的规则是按照第一列排序,第一列相同按照第二列排序,依次类推 // 要排序的数据 const array = [{ name: '甲' ...

  2. #状压dp#洛谷 3959 [NOIP2017 提高组] 宝藏

    题目 选定一个起点 \(S\),找到一棵生成树,最小化 \[\sum_{i=1}^n dep_i\times dis_i \] \(n\leq 12\) 分析 设 \(dp[d][S]\) 表示当前树 ...

  3. AtCoder Beginner Contest 181

    ABC181 A - Heavy Rotation 题目传送门 代码(签到题) #include <cstdio> #define rr register using namespace ...

  4. Go 编程语言详解:用途、特性、与 Python 和 C++ 的比较

    什么是Go? Go是一个跨平台.开源的编程语言 Go可用于创建高性能应用程序 Go是一种快速.静态类型.编译型语言,感觉上像动态类型.解释型语言 Go由Robert Griesemer.Rob Pik ...

  5. HarmonyOS音频开发指导:使用AVPlayer开发音频播放功能

      如何选择音频播放开发方式 在HarmonyOS系统中,多种API都提供了音频播放开发的支持,不同的API适用于不同音频数据格式.音频资源来源.音频使用场景,甚至是不同开发语言.因此,选择合适的音频 ...

  6. HH的项链—树状数组

    题目描述 HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义. HH不断地收集新的贝壳,因此他的项链变得越来越长.有一天 ...

  7. Mac OS 中JDK 环境(jdk 1.8.0_831)安装配置、环境变量配置及卸载操作

    前言: 摊牌了,本来就有点喜新厌旧的我,特意把系统和开发环境都拉到比较高,想试验一下兼容性和某些新特性,探索了一下新大陆,也见识了各种光怪陆离的妖魔鬼怪. 因为要着手云平台项目的重构改版和新系统的架构 ...

  8. 前端vue+elementUI如何实现记住密码功能

    我们这回使用纯前端保存密码 既然是记住密码,前端也就是使用cookie保存,访问时用cookie读取 先来了解下cookie的基本使用吧 Cookie 所有的cookie信息都在document.co ...

  9. CentOS 6.5编译安装httpd-2.4.7

    CentOS 6.5编译安装httpd-2.4.7 CentOS 编译安装 Apache 2.4 准备: [root@NFSServer ~]# yum groupinstall "Deve ...

  10. vscode 编写node的c++ 扩展

    前言 在此介绍一下node的c++扩展在vscode 上的编译环境,在此不多说,比较完善,看了肯定明白. 正文 c++ 环境搭建 下载mingw,然后配置好环境.下载地址为,官网,可以自己百度一下. ...