openlayers学习一:创建瓦片地图


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图title>
    <script src="dist/ol.js">script>
    <link rel="stylesheet" href="dist/ol.css">
head>
<body>
<div id="map" style="width: 100%;height: 400px;">div>
<script>
    // 创建地图 类ol.Map,ol.View
    new ol.Map({

        // 设置地图图层
        layers: [/*layers: []数组 用于定义地图中可用的图层列表,多个图层可以叠加,最上面的会覆盖下面的。
        主要有 热度图层(heatmaplayer)、图片图层(imagelayer)、切片图层(tilelayer) 和 矢量图层(vectorlayer)*/
            // 创建一个使用Open Street Map地图源的瓦片图层
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        // 设置显示地图的视图,视图允许指定地图的中心,分辨率和旋转。
        view: new ol.View({
            center: [0, 0],    // 定义地图显示中心于经度0度,纬度0度处
            zoom: 2            // 并且定义地图缩放层级为2
        }),
        // 让id为map的div作为地图的容器,target指定地图在页面中具体哪个位置进行显示
        target: 'map'
    });
script>
body>
html>

你可能感兴趣的:(openlayers)