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. ...
随机推荐
- 5W1H聊开源之Why——为什么要参与开源?
中国开源的发展速度发展加快,个人和组织对于为开源作贡献有着前所未有的激情.据<2020年IT行业项目管理调查报告>,约四成受访者以自己开发开源项目.为他人提交项目代码.作为成员开发维护项目 ...
- #欧拉回路,状压dp,Floyd#洛谷 6085 [JSOI2013]吃货 JYY
题目传送门 分析 先用Floyd求出两点间的最短距离,包含必经边的欧拉回路, 先考虑欧拉回路的性质就是度数为偶数且连通,那如果有偶数个奇点可以两两配对. 设 \(g[S]\) 表示选择 \(S\) 中 ...
- #贪心#洛谷 3173 [HAOI2009]巧克力
题目 分析 既然每一刀都要切,那肯定代价越大的要越早切, 考虑按代价降序排序,如果切了一行,求切列的时候贡献的行数就多了1. 代码 #include <cstdio> #include & ...
- npm 直接安装 GitHub/GitLab 仓库代码及 npm link 本地调试
一.npm 直接安装 GitHub/GitLab 仓库代码 语法 npm install <git remote url> 示例 命令: npm i git@github.com:maze ...
- HarmonyOS线上Codelabs系列挑战赛第二期:调用三方库,制作酷炫的视觉效果
HarmonyOS线上Codelabs系列挑战赛正如火如荼进行中,开发者们可以通过体验基于HarmonyOS特性和能力的应用开发,快速构建有趣.有用的应用程序.火速加入,与众多开发者一起碰撞想法, ...
- 五款最优秀的java微服务框架
微服务被广泛用于创建多功能的应用程序,通过组合每个功能部分并将它们逐层放在一个单元中.许多人可能没有意识到微服务是一组小型服务中制作单个应用程序的方法,每个服务都独立运行(进程). java微服务框架 ...
- redis 简单整理——客户端常见异常[十七]
前言 这个还是比较常见的,也就是比较对开发有用的部分. 正文 1.无法从连接池获取到连接 JedisPool中的Jedis对象个数是有限的,默认是8个.这里假设使用的默 认配置,如果有8个Jedis对 ...
- 记一次 .NET某炉膛锅炉检测系统 崩溃分析
一:背景 1. 讲故事 上个月有个朋友在微信上找到我,说他们的软件在客户那边隔几天就要崩溃一次,一直都没有找到原因,让我帮忙看下怎么回事,确实工控类的软件环境复杂难搞,朋友手上有一个崩溃的dump,刚 ...
- 【GDKOI 2024 TG Day2】染色(set) 题解
发现我们给一个点染上色后有: 我们称这是一个大小为 1 的十字. 进一步地,我们给这 5 个点再次染上色后有: 我们称这是一个大小为 2 的十字. 同理可得,我们给这 5 个点染上相同的大小为 2 的 ...
- 力扣176(MySQL)-第二高的薪水(中等)
题目: id 是这个表的主键.表的每一行包含员工的工资信息. 编写一个 SQL 查询,获取并返回 Employee 表中第二高的薪水 .如果不存在第二高的薪水,查询应该返回 null . 查询结果如下 ...