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> |
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
分类:
demo分享介绍
, openlayers的正确食用方法
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 我与微信审核的“相爱相杀”看个人小程序副业
· DeepSeek “源神”启动!「GitHub 热点速览」
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库