开源WebGIS开发——如何创建一张地图

一、创建一张地图分为五个步骤1、下载openlayers开发包2、创建一个HTML网页并引入openlayers（包括css样式和js文件）3、创建图层对象，引入地图资源 ol.Layer4、创建一张地图，用来添加图像对象 ol.Map5、创建一个视图，用来定义地图的显示范围 ol.View...

YUANXLLL

1591人浏览 · 2021-10-03 12:31:16

YUANXLLL · 2021-10-03 12:31:16 发布

一、创建一张地图分为五个步骤

1、下载openlayers开发包

2、创建一个HTML网页并引入openlayers（包括css样式和js文件）

3、创建图层对象，引入地图资源 ol.Layer

（引入OSM地图资源）

4、创建一张地图，用来添加图像对象 ol.Map

5、创建一个视图，用来定义地图的显示范围 ol.View

二、代码及结果展示（以展示OSM为例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一张地图</title>
    <link rel="stylesheet" href="./ol.css">

    <style>     
        html,body{
            width: 100%;    
            height: 100%;
        } 
        .map{
            width: 80%;
            height: 80%;
            border: black;
            border-style:double;
            margin: auto;           
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="map" id="map"></div>

    <script src="./ol.js"></script>
    
    <script>
        var osmLayer = new ol.layer.Tile({
          //openstreetmap 瓦片图层  vector 矢量 OSM为墨卡托坐标（投影坐标）
          source:new ol.source.OSM()
        });
       
          //116.399669 39.921354（北京中心经纬度）
        var beijing = ol.proj.transform([116.399669,39.921354],"EPSG:4326","EPSG:3857"); //将经纬度坐标转为投影坐标
        console.log(beijing);

        var view = new ol.View({
            center:beijing,
            zoom:8  //初始缩放
        })
        var map = new ol.Map({
            target:"map",
            layers:[osmLayer],
            view:view
        });
    </script>
</body>
</html>