openlayer本地部署、在线部署

疆~

已于 2023-05-31 10:28:54 修改

阅读量505

点赞数

分类专栏： openlayers 文章标签： ol

于 2022-07-18 16:54:52 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/125855140

版权

openlayers 专栏收录该内容

48 篇文章 53 订阅

订阅专栏

在线部署

本地部署

在线部署

最新版：OpenLayers - Get the Codehttps://openlayers.org/download/ 由于官方的不稳定，速度有时很慢，现自己下载部署

将dist/ol.js和ol.css上传到oss中

访问：

    <script src="http://file.ljgis.com/ol@v7.3.0/dist/ol.js"></script>
    <link rel="stylesheet" href="http://file.ljgis.com/ol@v7.3.0/ol.css">

测试：

实现代码：

<!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>ol</title>
    <script src="http://file.ljgis.com/ol@v7.3.0/dist/ol.js"></script>
    <link rel="stylesheet" href="http://file.ljgis.com/ol@v7.3.0/ol.css">
</head>

<body>
    <div id="map" style="width:100%;height:98vh;"></div>
    <script>
        window.onload = function () {
            new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                view: new ol.View({
                    projection: "EPSG:4326",
                    center: [108.522097, 37.272848],
                    zoom: 4.7,
                })
            });
        }
    </script>
</body>

</html>