leaflet加載geojson疊加顯示功能代碼

更新時間：2020年02月21日 12:04:33 作者：JackGIS

這篇文章主要介紹了leaflet加載geojson疊加顯示功能代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

geojson需要先制作shp，然后導入下面網(wǎng)站生成geojson。

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 });

將地圖的視野范圍添加到相應區(qū)域。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

原生JS實現(xiàn)各種運動之勻速運動
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)各種運動之勻速運動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
ie8 不支持new Date(2012-11-10)問題的解決方法
使用JS的時候也碰到了如下問題，后來經(jīng)過修改，在IE8環(huán)境里，下面的代碼是可用的，下面與大家分享下ie8 不支持new Date的解決方法，有類似問題的朋友可以參考下
2013-07-07
通過DOM腳本去設置樣式信息
在大多數(shù)場合，我們都用CSS去設置樣式，但在某些特殊情況下，例如要根據(jù)元素在節(jié)點樹里的位置來設置節(jié)點樣式信息時，目前CSS還沒辦法做到這一點。但利用DOM就可以很輕易的完成。
2010-09-09
JavaScript+html實現(xiàn)前端頁面隨機二維碼驗證
這篇文章主要為大家詳細介紹了JavaScript+html實現(xiàn)前端頁面隨機二維碼驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
Nuxt.js實現(xiàn)校驗訪問瀏覽器類型的中間件
Nuxt.js 就是一個Vue的服務端渲染框架,和React的服務端渲染框架類似。這篇文章主要介紹了Nuxt.js實現(xiàn)校驗訪問瀏覽器類型的中間件,需要的朋友可以參考下
2018-08-08
JavaScript中的閉包原理分析
一看到閉包這個詞，我就會想起線性代數(shù)中的封閉空間，也就是說，這個空間中的所有向量，無論經(jīng)過何種運算，最終結果還是會落在該空間中。那么JavaScript中會不會也是類似的概念呢？
2010-03-03
前端中間件Midway的使用教程
Midway 基于 TypeScript 開發(fā)，結合了面向對象（OOP + Class + IoC）與函數(shù)式（FP + Function + Hooks）兩種編程范式，并在此之上支持了 Web / 全棧 / 微服務 / RPC / Socket / Serverless 等多種場景，這篇文章主要介紹了前端中間件Midway的使用,需要的朋友可以參考下
2023-05-05
javascript實現(xiàn)延時顯示提示框效果
這篇文章主要為大家詳細介紹了javascript實現(xiàn)延時顯示提示框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
webpack-dev-server原理解析及跨域解決方法
這篇文章主要介紹了webpack-dev-server原理解析及跨域解決方法,需要的朋友可以參考下
2024-01-01
Echarts實現(xiàn)暫無數(shù)據(jù)的三種方法
本文將介紹如何使用Echarts實現(xiàn)暫無數(shù)據(jù)的三種方法,詳細講解這三種方法的實現(xiàn)步驟和效果展示,幫助讀者更好地理解如何在Echarts中處理暫無數(shù)據(jù)的情況
2023-08-08