openlayers3实现地图初始化

时间 2020-07-10 标签 openlayers3 openlayers 3 实现地图初始化

需引入ol的css和js文件以及ol-debug.js文件javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图初始化</title>
    <link rel="stylesheet" href="css/ol.css">
    <script type="text/javascript" src="js/ol.js"></script>
    <script type="text/javascript" src="js/ol-debug.js"></script>
    <script type="text/javascript" src="js/map.js"></script>
</head>
<style>
    #map{
        width: 100%;
        height: 100%;
    }
    body{
        margin: 0;
        padding: 0;
    }
</style>
<body onload="init()">
<div id="map"></div>
</body>
</html>

当projection(投影)为 'EPSG:4326’时,视图中心点为标准经纬度,即 center:[114.311828, 30.598434], 如若未指定投影坐标系,ol默认的是用Web Mercator，即“ EPSG：3857”,那么 center须要转换坐标系,即 center: ol.proj.fromLonLat([114.311828, 30.598434]),若是指定投影坐标系为“ EPSG：3857”,那么 center:[12725134.484608274, 3580707.231820027].css

function init() {
    var gaode = new ol.layer.Tile({   // 图层瓦片
        source: new ol.source.XYZ({   // 数据源
            url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
        })
    });
    var view = new ol.View({
        //openlayers默认的坐标系是'EPSG:3857'，标准经纬度坐标系是'EPSG:4326'
        // center: ol.proj.fromLonLat([114.311828, 30.598434]), 将坐标从经度/纬度转换为其余投影 默认值为Web Mercator，即“ EPSG：3857”
        // center:[12725134.484608274, 3580707.231820027], EPSG:3857坐标系
        center:[114.311828, 30.598434],  // EPSG:4326坐标系
        projection:'EPSG:4326',
        zoom: 10,      //缩放级别
        minZoom: 0,    //最小缩放级别
        maxZoom: 18,   //最大缩放级别

    });
    var map = new ol.Map({
        layers: [gaode],   // 图层
        view: view,        // 视图
        target: 'map',     // 容器
        logo:false         // 禁用logo
    })
}