基础图层加载

BBXSJ

已于 2024-01-02 21:36:22 修改

阅读量345

点赞数 9

文章标签： javascript

于 2024-01-02 21:14:38 首次发布

本文链接：https://blog.csdn.net/BBXSJ/article/details/135350308

版权

本文介绍了如何在HTML中使用OpenLayers库构建一个基础的地图应用，包括引入CSS和JS库、创建Map容器、设置默认图层和视图。

摘要由CSDN通过智能技术生成

<html>
   <head>
       <meta charset="utf-8">
       <title>test</title>
       <link rel="stylesheet" type="text/css" href="./css/ol.css">
       <script type="text/javascript" src="./js/ol.js"></script>
       <style type="text/css">
           body {
               margin: 0px;
           }

           html,
           body,
           #map {
               height: 100%;
           }
       </style>
   </head>
   <body>
       <div id="map"></div>
       <script type="text/javascript">
           /**
           * 基本步骤：
           * 1、构建基础HTML框架
           * 2、引入openlayers的CSS和JS库
           * 3、创建Map容器，为map容器赋予id，指定样式
           * 4、实例化Map
           */
           var mapObject = new ol.Map({
               //地图的显示位置，指向页面的某个id的DIV，
               target: "map",
               //默认加载图层，填入数组，可默认加载多个图层
               //OpenLayers三级结构：Map->Layer->source
               layers: [
                   new ol.layer.Tile({
                       source: new ol.source.OSM(),
                   })
               ],
               //默认视角
               view: new ol.View({
                   // center: [-10997148, 4569099],
                   center: [0, 0],
                   zoom: 4,
               })
           });
       </script>
   </body>
</html>