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. ...
随机推荐
- 鸿蒙HarmonyOS实战-ArkUI组件(Button)
一.Button Button(按钮)是一种常见的用户界面控件,通常用于触发操作或提交数据.Button 拥有文本标签和一个可点击的区域,用户点击该区域即可触发相应的操作或事件. Button 的主要 ...
- #笛卡尔树,dp#洛谷 7244 章节划分
题目 分析 考虑段数受到答案限制,而答案为最大值的约数,那么枚举答案, 设\(dp[i]\)表示前\(i\)个位置分完最多可以分多少段只要\(dp[n]\geq k\)即合法. 那么\(dp[i]=\ ...
- skywalking入口
skywalking通过maven配置指定org.apache.skywalking.apm.agent.SkyWalkingAgent为premain-class,该类中包含了一个premain方法 ...
- openGauss/MogDB数据库安装部署之xlog目录设置
openGauss/MogDB 数据库安装部署之 xlog 目录设置 本文出处:https://www.modb.pro/db/176915 关于 xlog xlog 文件是一个记录事务日志的文件,它 ...
- 算法小白刷了一周 LeetCode 后的思考
Hi,我是 itchao 我自己工作有 2 两年多的前端开发经验,但是数据结构与算法一直不好,基本就是一个算法小白的水平. 听说大公司面试都要手写算法题,最近为了以后能去更好的公司,然后其实心里比较着 ...
- python3 引入requests报错ImportError的处理方案
执行python3 import requests时抛出错误:ImportError: No module named requests 使用python3写爬虫时,有些小伙伴会遇到这种坑,使用发现导 ...
- nginx重新整理——————热部署和日志切割[三]
前言 简单演示热部署和日志切割. 正文 什么是热部署了,我们前文也说过了一个编译后的nginx 二进制. 热部署就是无需停止现有的nginx,替换正在运行的nginx. 步骤: 复制nginx 二进制 ...
- 重新点亮shell————什么是shell[一]
前言 这里简介一下什么是shell. 写linux和shell 系列是为了后面的docker 系列的整理,本来想直接整理k8s的,但是呢,想想docker 系列整理完了的话,那么整理k8s系列就没有那 ...
- 部署iis7和vs2010低版本项目遇到的一些问题
前提 本人一直用iis10然后用的是vs2015,项目框架也用的是高版本的,所以后来接触了一个项目,部署iis7遇到的一些问题,按顺序总结出来,希望有所帮助. 正文 按顺序来: 1.HTTP错误 40 ...
- 重新整理数据结构与算法(c#系列)—— 树的前中后序遍历查找[十七]
前言 树的前中后序遍历 是根据前中后序的顺序来查找,找到了则弹出. 正文 节点模型: public class HeroNode { private int no; private string na ...