openlayers集成到vue開發


openlayer初步加載地圖

vue項目搭好后,直接用node js安裝ol,

           

安裝好后可以看看安裝的版本;我用的是5..2的版本

           

然后看官網相對應版本的文檔,都是英文文檔;

官方文檔:    http://openlayers.org/en/latest/apidoc/

  然后引入所需要的js;

      

 先加載出地圖: 

     

 

          

   

 效果圖:

  

 

   使用離線地圖時,重點注意的是:坐標系的問題,在寫代碼的時候坐標必須要和下載的離線地圖的坐標系要保持一致;如果不一致,中心坐標會和地圖偏移很遠

   我用的是EPSG:3857的,所以center中心坐標 不是大家了解的經緯度的寫法;

  

這一點代碼就可加載出地圖;

因為業務需求;我所做的是要在地圖上加點,畫線,保存在數據庫,然后可以通過點擊點或者線在地圖彈出popu框來展示相關信息, 對於畫好的點、線點擊還可以修改保存;

后面對地圖的一些操作我會分享出來;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM