openlayers加载瓦片地图并手动标记坐标点资源-CSDN文库

共9个文件

xml：3个

js：2个

png：1个

openlayers

瓦片地图

JavaScript

需积分: 2 3 浏览量 2024-04-29 11:12:04 上传评论收藏 840KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

olmap.zip （9个子文件）

olmap

data

tiles

marker.png 507B

.idea

workspace.xml 2KB

misc.xml 179B

olmap.iml 469B

modules.xml 269B

emss.html 3KB

ol-debug.js 3.72MB

ol.css 3KB

ol.js 503KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>openlayers3</title> <link rel="stylesheet" href="ol.css" /> <script type="text/javascript" src="ol.js"></script> <style> html{ height: 100%; width: 100%; padding:0; margin:0; } body{ height: 100%; width: 100%; padding:0; margin:0; } .map { height: 100%; width: 100%; } </style> </head> <body> <div id="map" class="map"></div> <script> var BaseMapLayer = function(options) { var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: options.url, tilePixelRatio: 1, minZoom:2, maxZoom:17 }) }); return layer; }; var view = new ol.View({ center: ol.proj.fromLonLat([200, 11]), zoom: 13, minZoom: 13, maxZoom: 17 }); var sateliteopt = { url: 'data/tiles/{z}/{x}/{y}.png' }; var sate = new ol.layer.Group({ layers: [ new BaseMapLayer(sateliteopt) ] }); // 添加标注层 var markerLayer = new ol.layer.Vector({ source: new ol.source.Vector(), style: new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'data/marker.png' // 标注图标的路径 }) }) }); // 创建标注 var marker = new ol.Overlay({ element: document.getElementById('marker'), positioning: 'center-center', stopEvent: false, offset: [0, -23] }); var map = new ol.Map({ view: view, layers: [ sate, markerLayer // 添加标注层到地图 ], overlays: [marker], // 添加标注到地图 target: 'map' }); // 监听点击事件 map.on('click', function(event) { // 将点击的经纬度转换为地图的像素坐标 var feature = new ol.Feature({ geometry: new ol.geom.Point(event.coordinate) }); // 将标注添加到标注层 markerLayer.getSource().addFeature(feature); // 将标注移动到点击的位置 marker.setPosition(event.coordinate); }); /* map.on('click', function(event) { // 将点击的像素坐标转换为经纬度坐标 var coordinate = event.coordinate; var lat = ol.proj.toLonLat(coordinate)[1]; var lon = ol.proj.toLonLat(coordinate)[0]; // 在控制台打印坐标 console.log('纬度:', lat, '经度:', lon); // 创建一个点要素 var feature = new ol.Feature({ geometry: new ol.geom.Point(coordinate) }); // 清除标注层上的所有要素 markerLayer.getSource().clear(); // 将新标注添加到标注层 markerLayer.getSource().addFeature(feature); // 将标注移动到点击的位置 marker.setPosition(coordinate); });*/ </script> </body> </html>

评论收藏

内容反馈