openlayers入門
openlayers開發環境配置
1.下載VSCode
官網地址：https://code.visualstudio.com/
點擊Download for Windows
2.安裝漢化插件和openlayers插件
搜索chinese，下載Chinese (Simplified) (簡體中文) Language Pack
更改語言并重啟
搜索Open In Default Browser和Path Intellisense并下載
3.勾選自動保存 文件->自動保存
VSCode新建項目
1.桌面新建文件夾openlayers
2.使用VSCode打開文件夾
方法一：
方法二：直接將文件夾拖入VSCode中打開
3.新建文件：01初始化地圖.html
openlayers初始化地圖（文末有完整代碼）
1.使用html5框架
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
2.導入ol依賴和javascript
<!-- 1.導入ol依賴 -->
<link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
<script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
3.設置地圖的掛載點
<!-- 2.設置圖的掛載點 -->
<div id="map"></div>
4.初始化一個高德圖層
<script>// 3.初始化一個高德圖層const gaode = new ol.layer.Tile({title: "高德地圖",source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',wrapX: false})});
</script>
5.初始化openlayer地圖
<script>// 初始化openlayer地圖const map = new ol.Map({// 將初始化的地圖設置到id為map的DOM元素上target:"map",layers:[gaode],// 設置視圖view:new ol.View({center:[114.30,30.50],// 設置地圖的放大級別zoom:14,projection:"EPSG:4326"})})
</script>
完整代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.導入ol依賴 --><link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"><script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
</head>
<body><!-- 2.設置圖的掛載點 --><div id="map"></div><script>// 3.初始化一個高德圖層const gaode = new ol.layer.Tile({title: "高德地圖",source: new ol.source.XYZ({url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',wrapX: false})});// 初始化openlayer地圖const map = new ol.Map({// 將初始化的地圖設置到id為map的DOM元素上target:"map",layers:[gaode],// 設置視圖view:new ol.View({center:[114.30,30.50],// 設置地圖的放大級別zoom:14,projection:"EPSG:4326"})})</script></body>
</html>
在瀏覽器中打開
鼠標右鍵選擇在瀏覽器中打開（或使用快捷鍵CTRL+1）
顯示結果
)
