Openlayers3结合百度地图API实现定位与展示

lzugis

发布于 2018-10-23 12:00:11

4.4K0

发布于 2018-10-23 12:00:11

文章被收录于专栏：跟牛老师一起学WEBGIS

概述：

本文结合Openlayers3和百度地图API实现web上地图的展示，定位与展示功能，并可通过PC或者移动端访问。

效果：

pc端效果

移动端

在线预览

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MapQuest Demo</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">    
    <style type="text/css">
        html, body, #map{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
        }
		#locate{
			width:25px;
			height: 25px;
			background: url("../imgs/locate.png");
			position: absolute;
			top: 100px;
			left: 10px;
			z-index: 99;
		}
		#locate:hover{
			cursor: pointer;
		}
    </style>
    <script src="http://openlayers.org/en/v3.15.1/build/ol.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wNdy48s7V1izbLL0ziswArXq"></script>
    <script type="text/javascript">
        var map, view, vector;
        function init(){
            var attribution = new ol.Attribution({
					html:'<a href="http://lzugis.d152.ptzygj.com/">LZUGIS</a>'
			});
			var coor = ol.proj.transform([103.847, 36.0473], 'EPSG:4326', 'EPSG:3857');
			view = new ol.View({
					center:coor,
					zoom:4
			});
			vector = new ol.layer.Vector({
				style: new ol.style.Style({
					image: new ol.style.Icon(({
						anchor: [0.5, 46],
						anchorXUnits: 'fraction',
						anchorYUnits: 'pixels',
						opacity: 1,
						src: '../imgs/pos.png'
					}))
				})
			});
			map = new ol.Map({
					target:'map',
					layers:[
							new ol.layer.Tile({
									source:new ol.source.XYZ({
											attributions:[attribution],
											url:"http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
									})
							}),        
							new ol.layer.Tile({
									source:new ol.source.XYZ({
											url: "http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}"
									})        
							}),
						vector
					],
					view:view
			});
        }
		function showLocation(){
			if(navigator.geolocation) {
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r){
					if(this.getStatus() == BMAP_STATUS_SUCCESS){
						console.log(r);
						var locate = ol.proj.transform([r.point.lng, r.point.lat], 'EPSG:4326', 'EPSG:3857');
						view.setCenter(locate);
						view.setZoom(18);
						var feature = new ol.Feature({
							geometry: new ol.geom.Point(locate)
						});
						var source = new ol.source.Vector({
							features:[feature]
						});
						vector.setSource(source);
					}
					else {
						alert("定位失败，失败原因为："+this.getStatus());
					}
				},{enableHighAccuracy: true});
			}
			else{
				alert("对不起，您的浏览器不支持定位！");
			}
		}
    </script>
</head>
<body onload="init()">
    <div id="map">
		<div id="locate" title="点击定位" onclick="showLocation()"></div>
	</div>
</body>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016年06月03日，如有侵权请联系 cloudcommunity@tencent.com 删除

api