openlayers入门01 -- 环境配置和初始化地图

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>