开源WebGIS开发——Map类

最新推荐文章于 2024-07-25 13:58:56 发布

YUANXLLL

最新推荐文章于 2024-07-25 13:58:56 发布

阅读量340

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/yl14774636230/article/details/120618051

版权

一、Map类介绍

Map其实就是整个Openlayers的核心，更大的说他就是整个WebGis前端和核心。我们需要使用它来管理我们的Layer、Control、Interaction、Overlay、View等这些组件。所以说我们不管做任何事，都需要让他更Map联系起来。Map就是核心

二、Map类常用参数

iconfont-阿里巴巴矢量图标库可在图标库里查询所需要的的图标作为overlay悬浮物

三、练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="ol.css">
    <style>
         html,body{
            width: 100%;    
            height: 100%;
        } 
        *{
            margin: 0;
            padding: 0;
        }
        .map{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .wjx{
            width: 32px;
            height: 32px;
            background: url("wjx.png") center center no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="map" id="map"></div>
    <div class="wjx" id="wjx"></div>


    <script src="ol.js"></script>
    <script>
        //创建一个地图图层
        var osmLayer =  new ol.layer.Tile({
            source:new ol.source.OSM()
        });

        //创建一个地图控件 全屏展示
       // var control = new ol.control.FullScreen();

        //创建一个地图视图，再创建地图视图之前需要确定中心点
        var beijing = ol.proj.transform([116.399669,39.921354],"EPSG:4326","EPSG:3857"); //经纬度投影代码为4326，转为墨卡托投影坐标系，代码为3857（坐标，源，目标）
        var view = new ol.View({
            center:beijing,
            zoom:10,
            maxZomm:18,
            minZoom:3
        });

        //创建地图控件，在默认基础上添加全屏控件
        var controls = new ol.control.defaults().extend([new ol.control.FullScreen()]);

        //创建一个交互控件
        var interactions = new ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]);

        //创建一个悬浮控件 需要设置参数 用大括号
        var overlay = new ol.Overlay({
            position:beijing,
            element:document.getElementById("wjx")
        });

        //创建地图
        var map = new ol.Map({
            target:"map",
            view:view,
            layers:[osmLayer],
            interactions:interactions,
            controls:controls,
            overlays:[overlay],
           // moveTolerance:1   类似于镜头灵敏度
        });
    </script>
</body>
</html>