react中試用leaflet簡單起步

寫在最前邊，前不久的一個項目中要作一個地圖的數據可視化需求。項目中用到了 Leaflet。項目到如今功能已經基本實現，如今寫下來作一下記錄。 Demo是用 create-react-app 搭建的。源碼都放在了Github上

安裝

npm i leaflet --save

起步

引入Leaflet import L from 'leaflet';

準備一個容器 ,給容器設置100%寬和100%高

<style>
    #map{
        width:100%;
        height:100%;
    }
</style>
<div id='map'></div>

而後實例化一個地圖

this.map = L.map('map').setView([37.92388861359015,115.22048950195312], 16);
this 是指當前React組件 this.map 是在組件的 constructor 方法中定義的。

constructor(){
    super()
    this.map=null;
}

L.map() 方法中傳入容器的id，setView(latlng,zoom)中傳入兩個參數，第一個參數是地圖顯示的中心位置，第二個參數是地圖實例化以後的級別。

這樣地圖就建立好了，可是在瀏覽器中看到沒有地圖只是灰色的一片。

給地圖加上漂亮的高德底圖

地圖添加底圖有好幾種，若是有本身的gis服務就能夠加載本身的底圖。還能夠用Mapbox的免費底圖。這裏仍是要感謝@木遙提供的地圖URL。還有衛星圖、百度地圖、谷歌地圖的URL都有哦。

L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
      subdomains: "1234",
      attribution: '高德地圖'
    }).addTo(this.map);

再刷新頁面看，變成了這樣子

Map Options

參考官方文檔

不想要右下角那個版權信息怎麼辦？

一個簡單粗暴的方法就是 右鍵審查元素 找到版權信息的 class，本身寫一個display:none; 哈哈搞定了。

固然官方是有辦法隱藏版權信息的,只須要實例化地圖的時候傳入第二個參數便可。__第二個參數須要傳入一個對象__。

let mapOptions={
      attributionControl:false
    }
    this.map = L.map('map',mapOptions).setView([37.92388861359015,115.22048950195312], 16);