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. ...
随机推荐
- Web服务器启用HTTPS的配置方法
本文于2016年3月完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. nginx的配置方法 可以参考Jerry Qu的本博客 Nginx 配 ...
- OpenHarmony开发之MQTT讲解
相信MQTT这个名称大家都不陌生,物联网的开发必然会遇到MQTT相关知识的应用.那么什么是MQTT?它有什么特点?它能解决什么问题?它是如何工作的?OpenAtom OpenHarmony(以下简 ...
- 给你安利一款鲁班大叔开发的maven依赖搜索神器
写在前面 一款好的插件往往能提高我们的开发效率.今天就给大家安利一款maven 依赖搜索插件. 插件是自己一直关注的鲁班大叔开发的,用了几天真的好用 废话不多说,我们就来看看这是一款什么插件 一.ma ...
- C++ 解引用与函数基础:内存地址、调用方法及声明
C++ 解引用 获取内存地址和值 在上一页的示例中,我们使用了指针变量来获取变量的内存地址(与引用运算符 & 一起使用).但是,你也可以使用指针来获取变量的值,这可以通过使用 * 运算符(解引 ...
- Android 开发入门(4)
0x06 中级控件 (1)图形绘制 a. 图形 Drawable Drawable 类型包括图片.色块.画板.背景 drawable 目录一般保存描述性 XML 文件,具有具体分辨率的 drawabl ...
- leetcode第 181 场周赛
5364. 按既定顺序创建目标数组 给你两个整数数组 nums 和 index.你需要按照以下规则创建目标数组: 目标数组 target 最初为空. 按从左到右的顺序依次读取 nums[i] 和 in ...
- ASP.NET CORE 框架揭秘读书笔记系列——命令行程序的创建(一)
一.dotnet --info 查看本机开发环境 dotnet --info 会显示本机安装的SDK版本.运行时环境.运行时版本 二.利用命令行创建.NET项目 我们不仅可以利用脚手架模版创建各种类 ...
- ajax,axios和fetch三者间的区别.
ajax: 1. 传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原生js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的 ...
- Java实现查看手机配置与功能
"感谢您阅读本篇博客!如果您觉得本文对您有所帮助或启发,请不吝点赞和分享给更多的朋友.您的支持是我持续创作的动力,也欢迎留言交流,让我们一起探讨技术,共同成长!谢谢!" 代码 `` ...
- 【笔记】go语言--(Slice)切片的概念
go--(Slice)切片的概念 //切片是什么,定义一个arr,定义一个s为arr中的2到6,这个s就是一个切片 arr := [...]int{0,1,2,3,4,5,6,7} s := arr[ ...