OpenLayers学习一：地图加载（以类为接口）

最新推荐文章于 2023-08-08 16:09:51 发布

路人甲JIA

最新推荐文章于 2023-08-08 16:09:51 发布

阅读量1.7k

点赞数 1

分类专栏： OpenLayers JavaScript 文章标签： OpenLyaers3 Map

本文链接：https://blog.csdn.net/u013719339/article/details/77898952

版权

JavaScript 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

OpenLayers

3 篇文章 1 订阅

订阅专栏

OpenLayers官网提供的例子：地图加载

我的html文件和JS文件分开的，且每一个大功能一个JS文件。

一般我都使用JQuery的语句。

OpenLayers的ol.css和ol.js我都是下载到本地的。

一般地图需要设置三个属性：图层layers，存放的容器（div），视图。

图层分为矢量图层Vector，瓦片图层Tile，图片图层Image等等，图层包含一个Source，向地图上添加的东西都要添加到Souce里。

视图又有两个属性：地图中心center，地图缩放级别zoom。

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>OpenLayers3Exercise1</title>
    <link rel="stylesheet" href="ol.css" type="text/css">
    <script src="ol.js"></script>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div id="map" class="map"></div>

    <script type="text/javascript" src="CommonVariable.js"></script>
    <script type="text/javascript" src="SetMap.js"></script>

</body>
</html>

地图配置 SetMap.js

var mapSettiings = $.extend({
    mapSouce: new ol.source.OSM(),
    mapCenter: [0, 0],
    mapZoom: 2
}, mapOptions);

var accessibleSource = mapSettiings.mapSouce;
var accessibleLayers = [
    new ol.layer.Tile({
        source: accessibleSource
    })
];
var accessibleView = new ol.View({
    center: mapSettiings.mapCenter,
    zoom: mapSettiings.mapZoom
});
var map = new ol.Map({
    layers: accessibleLayers,
    target: mapSettiings.mapTarget,  //调用CommonVariable.js中的变量
    view: accessibleView
});

地图设置 CommonVariable.js

/** set map
 * para
 * var mapSettiings = $.extend({
        mapSouce: new ol.source.OSM(),
        mapCenter: [0, 0],
        mapZoom: 2
    }, mapOptions);
 **/
var mapOptions = {
    mapTarget: 'map'
}

下载完整代码openlayers-exercise。

路人甲JIA

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
OpenLayers学习一：地图加载（以类为接口）

OpenLayers官网提供的例子：地图加载我的html文件和JS文件分开的，且每一个大功能一个JS文件。一般我都使用JQuery的语句。 OpenLayers的ol.css和ol.js我都是下载到本地的。一般地图需要设置三个属性：图层layers，存放的容器（div），视图。图层分为矢量图层Vector，瓦片图层Tile，图片图层Image等等，图层包含一个S
复制链接

扫一扫