OpenLayers 点击显示经纬度Demo

这里给大家分享我在OpenLayers 地图开发工作中总结出的一下代码和注意点,希望对大家有所帮助

效果如下:

核心代码展示:附带讲解注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
var map = new ol.Map({ // 初始化地图
           target: 'map',// 选择地图对象
           layers: [
               new ol.layer.Tile({// 初始化Tile外部图层
                   source: new ol.source.XYZ({// 初始化XYZ切片服务图层
                       url:
                           'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', // XYZ切片服务地址
                       wrapX: false
                   })
               }),
               new ol.layer.Tile({// 初始化Tile外部图层
                   source: new ol.source.XYZ({// 初始化XYZ切片服务图层
                       url:
                           'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服务地址
                       wrapX: false
                   })
               })
           ],
           view: new ol.View({
               projection: 'EPSG:4326', //设置地图坐标系
               center: [113.87, 22.691],//设置地图中心点
               zoom: 12//设置地图层级
           }),
       });
       const BGLayer = new ol.layer.Tile({// 初始化Tile外部图层
           source: new ol.source.XYZ({// 初始化XYZ切片服务图层
               url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服务地址
               wrapX: false
           })
       })
       BGLayer.setVisible(false) //设置图层显示隐藏
       map.addLayer(BGLayer)//添加图层
       //实例化矢量点要素,通过矢量图层添加到地图容器中
       //这样就实现了预先加载图文标注
       var iconFeature = new ol.Feature();
       //设置点要素样式
       iconFeature.setStyle(createLabelStyle(iconFeature));
       //矢量标注的数据源
       var vectorSource = new ol.source.Vector({
           features: [iconFeature]
       });
       //矢量标注图层
       var vectorLayer = new ol.layer.Vector({
           source: vectorSource
       });
       map.addLayer(vectorLayer);
       //矢量标注样式设置函数,设置image为图标ol.style.Icon
       function createLabelStyle(feature) {
           return new ol.style.Style({
               image: new ol.style.Icon({
                   anchor: [40, 42],
                   scale: 0.5, // 图标缩小显示
                   anchorOrigin: 'top-right', // 标注样式的起点位置
                   anchorXUnits: 'pixels', // X方向单位:分数
                   anchorYUnits: 'pixels', // Y方向单位:像素
                   offsetOrigin: 'bottom-left', // 偏移起点位置的方向
                   opacity: 1, // 透明度
                   src: 'dian.png'  //图标的URL
               }),
               text: new ol.style.Text({
                   textAlign: 'center',            //位置
                   textBaseline: 'middle',         //基准线
                   font: 'normal 14px 微软雅黑',    //文字样式
                   fill: new ol.style.Fill({       //文本填充样式(即文字颜色)
                       color: '#000'
                   }),
                   stroke: new ol.style.Stroke({
                       color: '#F00',
                       width: 2
                   })
               })
           });
       }
       var newFeature = new ol.Feature({
           geometry: new ol.geom.Point([0,0])  //几何信息
       });
       newFeature.setStyle(createLabelStyle(newFeature));      //设置要素样式
       vectorSource.addFeature(newFeature);
       map.on('click', function (evt) {
           var coordinate = evt.coordinate;        //鼠标单击点的坐标
           //新建一个要素ol.Feature
           newFeature.set('geometry',new ol.geom.Point(coordinate))
           document.getElementsByClassName("list-box")[0].innerHTML = '<p> 经度:' + coordinate[0].toFixed(3) + '     纬度:' + coordinate[1].toFixed(3) + '</p>'
       });
       map.on('moveend', function (evt) {
           if (map.getView().getZoom() >= 16) {
               BGLayer.setVisible(true)
           } else {
               BGLayer.setVisible(false)
           }
       })

 点位图片:

 完整demo代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
    <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
    <title>点击出点位</title>
    <style>
        *{padding: 0;margin: 0}
        .list-box {
            width: 300px;
            height: 100px;
            background: white;
            box-sizing: border-box;
            padding: 20px;
            line-height: 60px;
            overflow: auto;
            position: fixed;
            right: 10px;
            top: 10px;
            z-index: 999;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="map"></div>
    <div class="list-box">
    </div>
    <script>
        var map = new ol.Map({ // 初始化地图
            target: 'map',// 选择地图对象
            layers: [
                new ol.layer.Tile({// 初始化Tile外部图层
                    source: new ol.source.XYZ({// 初始化XYZ切片服务图层
                        url:
                            'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', // XYZ切片服务地址
                        wrapX: false
                    })
                }),
                new ol.layer.Tile({// 初始化Tile外部图层
                    source: new ol.source.XYZ({// 初始化XYZ切片服务图层
                        url:
                            'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服务地址
                        wrapX: false
                    })
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326', //设置地图坐标系
                center: [113.87, 22.691],//设置地图中心点
                zoom: 12//设置地图层级
            }),
        });
        const BGLayer = new ol.layer.Tile({// 初始化Tile外部图层
            source: new ol.source.XYZ({// 初始化XYZ切片服务图层
                url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服务地址
                wrapX: false
            })
        })
        BGLayer.setVisible(false) //设置图层显示隐藏
        map.addLayer(BGLayer)//添加图层
        //实例化矢量点要素,通过矢量图层添加到地图容器中
        //这样就实现了预先加载图文标注
        var iconFeature = new ol.Feature();
        //设置点要素样式
        iconFeature.setStyle(createLabelStyle(iconFeature));
        //矢量标注的数据源
        var vectorSource = new ol.source.Vector({
            features: [iconFeature]
        });
        //矢量标注图层
        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });
        map.addLayer(vectorLayer);
        //矢量标注样式设置函数,设置image为图标ol.style.Icon
        function createLabelStyle(feature) {
            return new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [40, 42],
                    scale: 0.5, // 图标缩小显示
                    anchorOrigin: 'top-right', // 标注样式的起点位置
                    anchorXUnits: 'pixels', // X方向单位:分数
                    anchorYUnits: 'pixels', // Y方向单位:像素
                    offsetOrigin: 'bottom-left', // 偏移起点位置的方向
                    opacity: 1, // 透明度
                    src: 'dian.png'  //图标的URL
                }),
                text: new ol.style.Text({
                    textAlign: 'center',            //位置
                    textBaseline: 'middle',         //基准线
                    font: 'normal 14px 微软雅黑',    //文字样式
                    fill: new ol.style.Fill({       //文本填充样式(即文字颜色)
                        color: '#000'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#F00',
                        width: 2
                    })
                })
            });
        }
        var newFeature = new ol.Feature({
            geometry: new ol.geom.Point([0,0])  //几何信息
        });
        newFeature.setStyle(createLabelStyle(newFeature));      //设置要素样式
        vectorSource.addFeature(newFeature);
        map.on('click', function (evt) {
            var coordinate = evt.coordinate;        //鼠标单击点的坐标
            //新建一个要素ol.Feature
            newFeature.set('geometry',new ol.geom.Point(coordinate))
            document.getElementsByClassName("list-box")[0].innerHTML = '<p> 经度:' + coordinate[0].toFixed(3) + '     纬度:' + coordinate[1].toFixed(3) + '</p>'
        });
        map.on('moveend', function (evt) {
            if (map.getView().getZoom() >= 16) {
                BGLayer.setVisible(true)
            } else {
                BGLayer.setVisible(false)
            }
        })
    </script>
</body>
 
</html>

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

posted @   林恒  阅读(719)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 我与微信审核的“相爱相杀”看个人小程序副业
· DeepSeek “源神”启动!「GitHub 热点速览」
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
欢迎阅读『OpenLayers 点击显示经纬度Demo』
点击右上角即可分享
微信分享提示