[Webgis][地图加载]Openlayer的图标旋转

最新推荐文章于 2024-01-30 00:12:15 发布

小康UPUP

最新推荐文章于 2024-01-30 00:12:15 发布

阅读量640

点赞数 12

分类专栏： Openlayer学习文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_44341012/article/details/135136652

版权

Openlayer学习专栏收录该内容

6 篇文章 1 订阅

订阅专栏

描述在前

用到地图的场景下，一般都需要显示物体方向。物体体现在地图上，就是上文讲的添加的图标，那物体旋转就需要让图标旋转起来。程序很简单，但是比较常用，就单独记录一下，方便日后查询。直接代码描述。

代码在后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <style>
        html { height: 100% }
        body { height: 100%;margin: 0px;padding: 0px }

        ul,li{
            margin:0;
            padding:0;
            list-style:none;
        }
        p{font-size:12px;}
        li{
            line-height:28px;
        }
        #container{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
        }
        .unselectMap{
            float: left;
            box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px; 
            border-left: 1px solid rgb(139, 164, 220); 
            border-top: 1px solid rgb(139, 164, 220); 
            border-bottom: 1px solid rgb(139, 164, 220); 
            background: rgb(255, 255, 255); 
            padding: 2px 6px; 
            font-style: normal; 
            font-variant: normal; 
            font-kerning: auto; 
            font-optical-sizing: auto; 
            font-feature-settings: normal; 
            font-variation-settings: normal; 
            font-stretch: normal; 
            font-size: 12px; 
            line-height: 1.3em; 
            font-family: arial, sans-serif; 
            text-align: center; 
            white-space: nowrap; 
            border-radius: 3px 0px 0px 3px; 
            color: rgb(0, 0, 0);
        }
        .selectMap{
            float: left;
            box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px; 
            border-width: 1px; 
            border-style: solid; 
            border-color: rgb(139, 164, 220); 
            background: rgb(142, 168, 224); 
            padding: 2px 6px; 
            font: bold 12px / 1.3em arial, sans-serif; 
            text-align: center; 
            white-space: nowrap; 
            border-radius: 0px 3px 3px 0px; 
            color: rgb(255, 255, 255);
        }
        .mapChange{
            margin-left: 4rem;
            padding-left: 40px;
            padding-top: 10px;
            white-space: nowrap; 
            cursor: pointer; 
            position: absolute; 
            z-index: 1; 
            text-size-adjust: none;
        }
        .drawing-panel {
            z-index: 999;
            position: fixed;
            bottom: 1rem;
            right: 0.2rem;
            margin-left: 0.2rem;
            padding: 0.1rem 0.1rem;
            border-radius: .25rem;
            background-color: transparent;
            /* 设置阴影 */
            box-shadow: 0 0px 0px 0 rgba(27, 142, 236, 0.5); 
        }
        .pos {
	        width: 150px;
            height: 30px;
            float: left;
            background-color: #fff;
            color: rgba(27, 142, 236, 1);
            font-size: 13px;
            border:1px solid rgba(27, 142, 236, 1);
            border-radius: 5px;
            margin: 0 5px;
            text-align: center;
            line-height: 30px;
        }
        .pos2 {
            width: 180px;
            height: 30px;
            float: left;
            background-color: #fff;
            color: red;
            font-size: 13px;
            border:1px solid rgba(27, 142, 236, 1);
            border-radius: 5px;
            margin: 0 5px;
            text-align: center;
            line-height: 30px;
        }

        /* 比例尺的样式 */
        .my-scale-line {
            position: absolute;
            right: 75px;
            font-weight: 700;
            font-size: 12px;
            color: white;
            bottom: 60px;
            left: auto;
            border: 2px solid white;
            border-top: none;
            text-align: center;
            background-color: hsla(0, 0%, 100%, 0);
            height: 8px;
            line-height: 0;
        }

        /* 设置缩放按钮与滑块的样式 */
        .ol-zoom .ol-zoom-out {
            margin-top: 200px;
        }
        .ol-zoomslider {
            background-color: transparent;
            top: calc(0.5em + 2px + 1px + 1.14 * 1.375em);
        }

        .ol-touch .ol-zoom .ol-zoom-out {
            margin-top: 212px;
        }
        .ol-touch .ol-zoomslider {
            top: 2.75em;
        }

        .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
        .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
            top: 3px;
        }

        .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
        .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
            top: 232px;
        }
    </style>

    <title>Tool</title>

</head>
<body>

    <div id="container"></div>
    <script>

        // 核心图层layer 为三种地图形式创建各自的 Layer，其中混合地图需要 路网地图AMapLayerRoadNet 与 卫星地图AMapLayerSatellite 叠加
        // AMapLayer 为普通地图的 Layer
        AMapLayer = new ol.layer.Tile({
            // 每个图层有对应的数据源（Source）
            source: new ol.source.XYZ({
                // 该url为高德瓦片地图地址
                url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
            })
        });
        // AMapLayerRoadNet 为路网地图的 Layer
        AMapLayerRoadNet = new ol.layer.Tile({
            // 每个图层有对应的数据源（Source）
            source: new ol.source.XYZ({
                // 该url为高德瓦片地图地址
                url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
            })
        });
        // AMapLayerSatellite 为卫星地图的 Layer
        AMapLayerSatellite = new ol.layer.Tile({
            // 每个图层有对应的数据源（Source）
            source: new ol.source.XYZ({
                // 该url为高德瓦片地图地址
                url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}'
            })
        });
        // 把整个地图看作一个容器（Map）
        var map = new ol.Map({
            target: 'container',
            // 核心为地图图层（Layer），若想实现路网与卫星地图混合，AMapLayerSatellite 需要在 AMapLayerRoadNet 之前
            layers: [AMapLayer,AMapLayerSatellite,AMapLayerRoadNet], 
            // 并由地图视图（View）进行地图表现
            view: new ol.View({
                //设定默认坐标系
                projection: 'EPSG:3857', 
                //设定中心点，因为默认坐标系为 3587，所以要将我们常用的经纬度坐标系4326 转换为 3587坐标系
                center: ol.proj.transform([120.266053,31.550228], 'EPSG:4326', 'EPSG:3857'), 
                // 默认显示级别，相当于瓦片地图的 Z 级别
                zoom: 5,
                // 最小显示级别
                minZoom:3, 
                // 最大显示级别
                maxZoom:19
            })
        });
        // 默认显示普通地图，所以将 AMapLayer 的 Visible 设定为true，其他设定为fasle
        AMapLayer.setVisible(true);
		AMapLayerRoadNet.setVisible(false);
		AMapLayerSatellite.setVisible(false);

        // 创建坐标显示框
        function createMapShowBar(){
            let htmlBottomShow = "";
            htmlBottomShow += "<li id=\"position0\" class=\"pos\">0.0,0.0</li>";
            let htmlBottomUl = document.createElement("ul");
            htmlBottomUl.className = "drawing-panel";
            htmlBottomUl.innerHTML = htmlBottomShow;
            document.body.appendChild(htmlBottomUl);
        }
        // 创建地图形式切换按钮
        function createMapChangeBar(){
            let htmllet = "";
            htmllet += "<div title=\"显示普通地图\" id=\"usualMap\" class=\"selectMap\">地图</div>";
            htmllet += "<div title=\"显示卫星地图\" id=\"satelliteMap\" class=\"unselectMap\">卫星</div>";
            htmllet += "<div title=\"显示混合地图\" id=\"hybridMap\" class=\"unselectMap\">混合</div>";
            let p = document.createElement("div");
            p.className = "mapChange";
            p.innerHTML = htmllet;
            document.body.appendChild(p);
        }
        // 设定地图形式切换按钮的响应函数
        function mapTypeChangeMap() {
            createMapShowBar();
            createMapChangeBar();
            var usualMap=document.getElementById("usualMap");
            var satelliteMap=document.getElementById("satelliteMap");
            var hybridMap=document.getElementById("hybridMap");
            usualMap.addEventListener('click',function(){
                usualMap.className="selectMap";
                satelliteMap.className="unselectMap";
                hybridMap.className="unselectMap";
                AMapLayer.setVisible(true);
                AMapLayerRoadNet.setVisible(false);
                AMapLayerSatellite.setVisible(false);
            })
            satelliteMap.addEventListener('click',function(){
                usualMap.className="unselectMap";
                satelliteMap.className="selectMap";
                hybridMap.className="unselectMap";
                AMapLayer.setVisible(false);
                AMapLayerRoadNet.setVisible(false);
                AMapLayerSatellite.setVisible(true);
            })
            hybridMap.addEventListener('click',function(){
                usualMap.className="unselectMap";Polygon
                satelliteMap.className="unselectMap";
                hybridMap.className="selectMap";

                AMapLayer.setVisible(false);
                AMapLayerRoadNet.setVisible(true);
                AMapLayerSatellite.setVisible(true);
            })
        }
        mapTypeChangeMap();

        // 添加比例尺
        map.addControl(new ol.control.ScaleLine({
            units: 'metric', // 设置单位
            className: 'my-scale-line'
        }));
        // 添加缩放滑块
        map.addControl(new ol.control.ZoomSlider());
        // 添加全局视图小控件
        map.addControl(new ol.control.OverviewMap({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        // 该url为高德瓦片地图地址
                        url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
                    })
                })
            ],
        }));
        
        // 监听鼠标移动，显示实时坐标
        var moveSignal = map.on('pointermove',(evt)=>{
            let movePoint = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
            document.getElementById('position0').innerText = movePoint[0].toFixed(7) + "," + movePoint[1].toFixed(7);
        });


        //============ 本文实现功能从此处开始 ================//
    
        // 定义一个 Point
        var pointGeom;
        var pointF;
        // 定义一个画图的图层，后面添加的 点线面 都是在此图层上添加
        var drawLayer = new ol.layer.Vector({
            // 定义图层数据源，给图层数据源添加数据
            source: new ol.source.Vector()
        });
        // 将画图的图层添加给地图
        map.addLayer(drawLayer);  

        // 定义一个函数，功能为创建 Point 图形的样式，path为图片的路径，name为图片上显示的信息
        function createPointStyle(path,name) {
            return new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 1], //中心改到图片下面
                    src:path
                }),
                text: new ol.style.Text({
                    textAlign: 'center',            //位置
                    textBaseline: 'middle',         //基准线
                    font: 'normal 14px 微软雅黑',    //文字样式
                    text: name,                     //文本内容
                    offsetY:-19,                    //Y偏移值，目的是使文字居中
                    fill: new ol.style.Fill({       //文本填充样式（即文字颜色)
                        color: '#fff'
                    }),
                })
            });
        }
        //定义一个函数，功能为增加点
        function pointAdd(point) {
            // 创建 Point 
            pointGeom = new ol.geom.Point(point);
            // 创建 Feature
            pointF = new ol.Feature(pointGeom);
            // 将 Feature 添加到图层
            drawLayer.getSource().addFeature(pointF);
        }
        pointAdd([]);
        
        // 监听鼠标点击
        var clickSignal = map.on('click',(evt)=>{
            // 设置图标位置
            pointGeom.setCoordinates(evt.coordinate);
        })
        // 
        var curse = 0;
        // 循环定时，刷新角度
        setInterval(function(){
            curse+=10;
            // 大于 360 度就复位
            if(curse>360) curse = 0;
            // 角度转为弧度
            var radians = (curse) * (Math.PI/180);
            // 通过设置样式改变角度
            pointF.setStyle(
                new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, 0.5], //中心改到图片下面
                        src:"./image/marker.png",
                        rotation: radians
                    }),
                }),
            );

        },300);

    </script>
</body>
</html>