当前位置：首页 > news >正文

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

news 来源：原创 2025/6/30 14:03:54

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>