1、vue腳手架環境搭建成功後，執行cnpm i -s ol 安裝ol環境，執行成功後node_modules下會有ol資料夾。
2、新建ol元件並引入ol指令碼。
import "../../node_modules/ol/ol.css";
import from "../../node_modules/ol/proj";
import from "../../node_modules/ol/extent";
import view from "../../node_modules/ol/view";
import map from "../../node_modules/ol/map";
import tilelayer from "../../node_modules/ol/layer/tile";
import wmts from "../../node_modules/ol/source/wmts";
import wmtstilegrid from "../../node_modules/ol/tilegrid/wmts";
import vectorsource from "../../node_modules/ol/source/vector";
import vectorlayer from "../../node_modules/ol/layer/vector";
import feature from "../../node_modules/ol/feature";
import point from "../../node_modules/ol/geom/point";
import olstyle from "../../node_modules/ol/style/style";
import olstyleicon from "../../node_modules/ol/style/icon";
import olstyletext from "../../node_modules/ol/style/text";
import olstylefill from "../../node_modules/ol/style/fill";
import olstylestroke from "../../node_modules/ol/style/stroke";
import from "../../node_modules/ol/control";
import mouseposition from "../../node_modules/ol/control/mouseposition";
import from "../../node_modules/ol/coordinate";
3、初始化載入天地圖
var mapcontainer = this.$refs.rootmap;
//渲染地圖
projection: "epsg:4326", //使用這個座標系
center: [118.236, 28.365],
zoom: 3,
maxzoom: 19,
minzoom: 1
4、效果圖
vue openlayers學習 推薦閱讀
使用最新的vue cli3.x 1 安裝vue cli3.0.1 cnpm install g vue clivue v 檢視版本 2 新建專案vue create vue openlayers,並選擇default模版 經實踐最好用cmd裡面上下箭頭選擇自己配置，見另外一篇文章 3 執行 cd v...
開發環境 測試環境 預生產環境 生產環境區別
環境分以下幾種 1.開發和配置環境 所有的開發和配置在這個環境裡進行。一般情況下，只有這個環境可以改配置和進行開發，並且一般不在這個環境下建立資料。開發環境就是每個開發人員電腦上的開發環境，只有開發人員可以配置和開發，寫資料測試放在測試環境 2.測試環境 3.預生產環境 不是必須的 從生產環境不定期...
開發環境 測試環境 預生產環境 生產環境區別
環境分以下幾種 1.開發和配置環境 所有的開發和配置在這個環境裡進行。一般情況下，只有這個環境可以改配置和進行開發，並且一般不在這個環境下建立資料。開發環境就是每個開發人員電腦上的開發環境，只有開發人員可以配置和開發，寫資料測試放在測試環境 2.測試環境 3.預生產環境 不是必須的 從生產環境不定期...