安装配置 | A-Zero

# 安装配置

ol5及以后，采用ES6，可以配合打包工具使用也可以直接引用，以前ol3、ol4是直接引用的方式

# 打包工具使用

//安装
npm install ol

//使用
<template>
    <div id="content">
        <div id="map" class="map"></div>
    </div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { defaults as defaultControls } from "ol/control";
import Tile from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import OSM from "ol/source/OSM";
 
export default {
    name: "tree",
    data() {
        return {
            map: null
        };
    },
    methods: {
        /**
         * 初始化一个 openlayers 地图
         */
        initMap() {
            let target = "map"; //跟页面元素的 id 绑定来进行渲染
            let tileLayer = [
                new Tile({
                    source: new OSM()
                })
            ];
            let view = new View({
                center: fromLonLat([104.912777, 34.730746]), //地图中心坐标
                zoom: 4.5 //缩放级别
            });
            this.map = new Map({
                target: target, //绑定dom元素进行渲染
                layers: tileLayer, //配置地图数据源
                view: view //配置地图显示的options配置（坐标系，中心点，缩放级别等）
            });
        }
    },
    mounted() {
        this.initMap();
    }
};
</script>

# 直接引用

<!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>基础地图展示</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/build/ol.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        #mapBox{
            width: 100vw;
            height: 100vh;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="mapBox"></div>
    <script>
        const map=new ol.Map({
            target:"mapBox",
            layers:[
                new ol.layer.Tile({source:new ol.source.OSM()})
            ],
            view:new ol.View({
                projection:"EPSG:4326",
                // center: ol.proj.fromLonLat([120.13989, 30.27662]),
                center:[120.13989, 30.27662],
                zoom: 11,
                minZoom:10,
                maxZoom:13
            })
        })
    </script>    
</body>
</html>