leaflet加載geojson疊加顯示功能代碼
更新時(shí)間：2020年02月21日 12:04:33 作者：JackGIS
這篇文章主要介紹了leaflet加載geojson疊加顯示功能代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這篇文章主要介紹了leaflet加載geojson疊加顯示功能代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
geojson需要先制作shp，然后導(dǎo)入下面網(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 });
將地圖的視野范圍添加到相應(yīng)區(qū)域。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
ie8 不支持new Date(2012-11-10)問題的解決方法
使用JS的時(shí)候也碰到了如下問題，后來經(jīng)過修改，在IE8環(huán)境里，下面的代碼是可用的，下面與大家分享下ie8 不支持new Date的解決方法，有類似問題的朋友可以參考下2013-07-07
在大多數(shù)場合，我們都用CSS去設(shè)置樣式，但在某些特殊情況下，例如要根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置節(jié)點(diǎn)樣式信息時(shí)，目前CSS還沒辦法做到這一點(diǎn)。但利用DOM就可以很輕易的完成。2010-09-09
JavaScript+html實(shí)現(xiàn)前端頁面隨機(jī)二維碼驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript+html實(shí)現(xiàn)前端頁面隨機(jī)二維碼驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Nuxt.js實(shí)現(xiàn)校驗(yàn)訪問瀏覽器類型的中間件
Nuxt.js 就是一個(gè)Vue的服務(wù)端渲染框架,和React的服務(wù)端渲染框架類似。這篇文章主要介紹了Nuxt.js實(shí)現(xiàn)校驗(yàn)訪問瀏覽器類型的中間件,需要的朋友可以參考下2018-08-08
一看到閉包這個(gè)詞，我就會(huì)想起線性代數(shù)中的封閉空間，也就是說，這個(gè)空間中的所有向量，無論經(jīng)過何種運(yùn)算，最終結(jié)果還是會(huì)落在該空間中。那么JavaScript中會(huì)不會(huì)也是類似的概念呢？2010-03-03
Midway 基于 TypeScript 開發(fā)，結(jié)合了面向?qū)ο螅∣OP + Class + IoC）與函數(shù)式（FP + Function + Hooks）兩種編程范式，并在此之上支持了 Web / 全棧 / 微服務(wù) / RPC / Socket / Serverless 等多種場景，這篇文章主要介紹了前端中間件Midway的使用,需要的朋友可以參考下2023-05-05
javascript實(shí)現(xiàn)延時(shí)顯示提示框效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)延時(shí)顯示提示框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了webpack-dev-server原理解析及跨域解決方法,需要的朋友可以參考下2024-01-01
Echarts實(shí)現(xiàn)暫無數(shù)據(jù)的三種方法
本文將介紹如何使用Echarts實(shí)現(xiàn)暫無數(shù)據(jù)的三種方法,詳細(xì)講解這三種方法的實(shí)現(xiàn)步驟和效果展示,幫助讀者更好地理解如何在Echarts中處理暫無數(shù)據(jù)的情況2023-08-08