脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → leaflet 加载 geojson

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

 更新时间：2020年02月21日 12:04:33   作者：JackGIS  
这篇文章主要介绍了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 });

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

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

您可能感兴趣的文章:

相关文章

  • 原生JS实现各种运动之匀速运动

    原生JS实现各种运动之匀速运动

    这篇文章主要为大家详细介绍了原生JS实现各种运动之匀速运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • ie8 不支持new Date(2012-11-10)问题的解决方法

    ie8 不支持new Date(2012-11-10)问题的解决方法

    使用JS的时候也碰到了如下问题，后来经过修改，在IE8环境里，下面的代码是可用的，下面与大家分享下ie8 不支持new Date的解决方法，有类似问题的朋友可以参考下
    2013-07-07
  • 通过DOM脚本去设置样式信息

    通过DOM脚本去设置样式信息

    在大多数场合，我们都用CSS去设置样式，但在某些特殊情况下，例如要根据元素在节点树里的位置来设置节点样式信息时，目前CSS还没办法做到这一点。但利用DOM就可以很轻易的完成。
    2010-09-09
  • JavaScript+html实现前端页面随机二维码验证

    JavaScript+html实现前端页面随机二维码验证

    这篇文章主要为大家详细介绍了JavaScript+html实现前端页面随机二维码验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Nuxt.js实现校验访问浏览器类型的中间件

    Nuxt.js实现校验访问浏览器类型的中间件

    Nuxt.js 就是一个Vue的服务端渲染框架,和React的服务端渲染框架类似。这篇文章主要介绍了Nuxt.js实现校验访问浏览器类型的中间件,需要的朋友可以参考下
    2018-08-08
  • JavaScript中的闭包原理分析

    JavaScript中的闭包原理分析

    一看到闭包这个词，我就会想起线性代数中的封闭空间，也就是说，这个空间中的所有向量，无论经过何种运算，最终结果还是会落在该空间中。那么JavaScript中会不会也是类似的概念呢？
    2010-03-03
  • 前端中间件Midway的使用教程

    前端中间件Midway的使用教程

    Midway 基于 TypeScript 开发，结合了面向对象（OOP + Class + IoC）与函数式（FP + Function + Hooks）两种编程范式，并在此之上支持了 Web / 全栈 / 微服务 / RPC / Socket / Serverless 等多种场景，这篇文章主要介绍了前端中间件Midway的使用,需要的朋友可以参考下
    2023-05-05
  • javascript实现延时显示提示框效果

    javascript实现延时显示提示框效果

    这篇文章主要为大家详细介绍了javascript实现延时显示提示框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • webpack-dev-server原理解析及跨域解决方法

    webpack-dev-server原理解析及跨域解决方法

    这篇文章主要介绍了webpack-dev-server原理解析及跨域解决方法,需要的朋友可以参考下
    2024-01-01
  • Echarts实现暂无数据的三种方法

    Echarts实现暂无数据的三种方法

    本文将介绍如何使用Echarts实现暂无数据的三种方法,详细讲解这三种方法的实现步骤和效果展示,帮助读者更好地理解如何在Echarts中处理暂无数据的情况
    2023-08-08

最新评论