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. C++设计模式 - 代理模式(Proxy)

    接口隔离模式 在组件构建过程中,某些接口之间直接的依赖常常会带来很多问题.甚至根本无法实现.采用添加一层间接(稳定)接口,来隔离本来互相紧密关联的接口是一种常见的解决方案. 典型模式 Facade P ...

  2. 批量导出导入IIS下所有网站方法

    C:\Windows\System32\inetsrv\config\ applicationHost.config 存放的是网站列表配置信息,复制到目标服务器相同目录下(建议备份目标服务器原文件). ...

  3. Azkaban 2.5 Documentation

    Overview Azkaban was implemented at LinkedIn to solve the problem of Hadoop job dependencies. We had ...

  4. Redis 19 SpringBoot集成

    概述 SpringBoot 整合 Redis 是使用 SpringData 实现的. SpringData 是与 SpringBoot 齐名的顶级项目,整合了对常用数据库的模板型操作. 在 Sprin ...

  5. 模拟SQLserver死锁现象

    SQL Server死锁是指两个或多个事务相互等待对方持有的资源而无法继续执行的情况.当两个或多个事务都持有一些资源并且试图获取其他事务持有的资源时,可能会发生死锁.这种情况下,每个事务都在等待另一个 ...

  6. 通过 Traefik Hub 暴露家里的网络服务

    Traefik Hub 简介 ️Reference: 你的云原生网络平台 -- 发布和加固你的容器从未如此简单. Traefik Hub 为您在 Kubernetes 或其他容器平台上运行的服务提供一 ...

  7. vue3探索——使用ref与$parent实现父子组件间通信

    在vue3中,可以使用vue3的API defineExpose()函数结合ref或者$parent,实现父子组件数据的传递. 子组件向父组件传递数据defineExpose()和ref 子组件:通过 ...

  8. Docker之离线安装和在线安装

    一.离线安装 1.软件包下载 https://download.docker.com/linux/static/stable/x86_64/ 2.安装docker tar xvf /opt/docke ...

  9. CentOS 安装openssh-6.XX

    安装openssh-6.0p1 1.安装依赖包 有遇到 报ZLIB有问题的,要安装以下包 rpm -ivh zlib-devel-1.2.3-3.* rpm -ivh libsepol-devel-1 ...

  10. asp .net core 单页应用

    前言 单页应用其实就是 asp.net core 来作为js service,个人觉得这样更好调试,这种比较适合中小型业务. 正文 因为自己写过混合app是ionic,那么就尝试一下angular的单 ...