OpenLayers初体验0x0：加载地图到页面

cellinlab

于 2019-01-21 15:40:26 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

分类专栏： WebGIS 前端基础文章标签： openlayers OSM 地图 webgis 开源GIS

本文链接：https://blog.youkuaiyun.com/funkstill/article/details/86575505

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

WebGIS

10 篇文章

订阅专栏

本文介绍如何使用OpenLayers库创建并展示地图。通过HTML和JavaScript代码，设置地图的大小、位置和缩放级别，展示了地图的基本操作。OpenLayers是一个强大的开源JavaScript库，用于显示地理信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
        <style>
            .map{
                height: 400px;
                width:100%;
            }
        </style>
        <script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
        <title>Hello OpenLayers</title>
    </head>
    <body>
        <h2>My Map</h2>
        <div id = "map" class="map"></div>
        <script type="text/javascript">
            var map = new ol.Map({
                target:'map',
                layers:[
                    new ol.layer.Tile({
                        source:new ol.source.OSM()
                    })
                ],
                view:new ol.View({
                    center:ol.proj.fromLonLat([121.654959,42.046233]),
                    zoom:13
                })
            });
        </script>
    </body>
</html>