leaflet加载geojson叠加显示功能代码

这篇文章主要介绍了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 });

将地图的视野范围添加到相应区域。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决fastjson从1.1.41升级到1.2.28后报错问题详解

    最近因为fastjson安全漏洞,升级jar包时,踩了一些坑. 新版本FastJsonHttpMessageConverter初始化,默认设置MediaType为*/* 背景: 使用Spring RestTemplate,配置如下: <bean id="restTemplate" class="org.springframework.web.client.RestTemplate"> <constructor-arg ref="ky.cl

  • vsCode中配置setings.json的技巧

    在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code.都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德芙还丝滑的强大功能所折服. 现在使用Vscode编码的人越来越多,凭借着免费,开源,轻量,跨平台的特点收货了一大批忠实粉丝 最近因项目需要开始使用Vscode,因此做了一番研究,现在把个人的一些小经验分享给大家,首先我们来看看setings.json配置 { "window.zoomLevel": 1

  • Python 使用folium绘制leaflet地图的实现方法

    leaflet为R语言提供了API很好用,这次尝试用Python使用leaflet,需要folium 安装folium pip install folium 一个小例子 import folium import re input = open('C:\\Users\\Administrator\\Desktop\\a.txt','r') text=input.read() list = re.split('\n',text) location = [] for element in list:

  • mysql5.7 新增的json字段类型用法实例分析

    mysql5.7 新增的json字段类型用法实例分析

    本文实例讲述了mysql5.7 新增的json字段类型用法.分享给大家供大家参考,具体如下: 一.我们先创建一个表,准备点数据 CREATE TABLE `json_test` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID', `json` json DEFAULT NULL COMMENT 'json数据', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8m

  • laravel框架使用FormRequest进行表单验证，验证异常返回JSON操作示例

    本文实例讲述了laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作.分享给大家供大家参考,具体如下: 通常在项目中,我们会对大量的前端提交过来的表单进行验证,如果不通过,则返回错误信息. 前端为了更好的体验,都使用ajax进行表单提交,虽然 validate() 方法能够根据前端的不同请求方式,返回不同的结果. 但是返回的json格式并不是我们想要的,这个时候,我们就需要自定义返回错误结果. 先创建一个表单请求类: php artisan make:request

  • 如何处理后台向前台传递的json数据

    这篇文章主要介绍了如何处理后台向前台传递的json数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在pom文件中添加下面三种依赖jar包 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.9.8<

  • 使用SpringBoot+OkHttp+fastjson实现Github的OAuth第三方登录

    一.在GitHub上创建一个OAuth 二.OAuth的原理 Spring官方文档 三.OkHttp的使用 OkHttp官方网站 1.Post 代码示例 //官方文档: public static final MediaType JSON // = MediaType.get("application/json; charset=utf-8"); MediaType mediaType = MediaType.get("application/json; charset=ut

  • leaflet的开发入门教程

    leaflet的开发入门教程

    Leaflet简述 Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的.开源的 JavaScript 库.代码仅有 33 KB,但它具有开发在线地图的大部分功能.Leaflet设计坚持简便.高性能和可用性好的哲学思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问.支持插件扩展,有一个友好.易于使用的API文档和一个简单的.可读的源代码.Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务,数据提供,

  • leaflet加载geojson叠加显示功能代码

    这篇文章主要介绍了leaflet加载geojson叠加显示功能代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 geojson需要先制作shp,然后导入下面网站生成geojson. https://mapshaper.org/ geojson,最好放后台,前台通过异步请求去加载json,然后显示. getGeojsonByName({name:geojson_name}).then(data=>{ if (this.bondarylayer)

  • vue集成openlayers加载geojson并实现点击弹窗教程

    本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步:写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 comp

  • php+jquery+html实现点击不刷新加载更多的实例代码

    基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页.其实就是Ajax分页效果. HTML 首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参

  • vue loadmore组件上拉加载更多功能示例代码

    最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯. 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: <template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot> </div> <d

  • 异步加载JS、CSS代码（推荐）

    我的风格你懂得,具体详情介绍如下 关键代码如下所示: function AsyncLoad(V_tag,V_src) { if (V_tag == "script") { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = V_src; var x = document.getElementsByTagName('script')[0]; x.pare

  • BootstrapTable加载按钮功能实例代码详解

    BootstrapTable加载按钮功能实例代码详解

    1      html <!--工具栏--> <div id="toolbar" class="btn-group"> <div style="float:left;margin-right: 10px"> <button class="btn btn-danger"onclick="openModal('add',0,'')">增加</button&g

  • Android Material加载进度条制作代码

    Android Material加载进度条制作代码

    最近看了几款APP的加载进度都是这种风格,感觉还不错,在网上找了一些资料,自己小练兵了一把: 主要运用的开源框架: /ViewPagerIndicator_library  主要就是tab页切换指示器 /ptr-lib 进度条 下载地址:https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh 一.使用方法 布局文件 <?xml version="1.0" encoding="utf-8"?>

  • ListView实现下拉刷新加载更多的实例代码(直接拿来用)

    ListView Api bixu 好好看看 mNewsAdapter.notifyDataSetChanged();//刷新ListView 自定义的RefreashListView package com.itguang.dell_pc.myapplication.view; import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; import and

  • jQuery Ajax 异步加载显示等待效果代码分享

    jQuery Ajax 异步加载显示等待效果代码分享

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

  • 抽出www.templatemonster.com的鼠标悬停加载大图模板的代码

    <html> <head>     <!--调用css调整显示层的属性-->     <link rel="stylesheet" href="lightBox.css" type="text/css">     <link rel="stylesheet" href="lightStyle.css" type="text/css"&

随机推荐