文档章节

OpenLayers3加载百度地图

RealPari
 RealPari
发布于 2017/05/02 17:42
字数 208
阅读 677
收藏 1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../static/css/openlayers/ol.css" th:href="@{/css/openlayers/ol.css}" type="text/css"/>
<script src="../../static/js/openlayers/ol.js" th:src="@{/js/openlayers/ol.js}"></script>
</head>
<body>
<div id="map" style="width: 900px; height: 800px">
</div>
<script type="text/javascript">
    var projection = ol.proj.get("EPSG:3857");
    var tilegrid  = new ol.tilegrid.TileGrid({
        origin: [0,0],
        resolutions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
      		.map(function(x) { return Math.pow(2, 18-x) })
    });

    var baiduSource = new ol.source.TileImage({
        projection: projection,
        tileGrid: tilegrid,
        tileUrlFunction: function(tileCoord, pixelRatio, proj){
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
            return "http://online1.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20170301&scaler=1&p=1";
        }
    });

    var baidumap = new ol.layer.Tile({
        source: baiduSource
    });

    var center = [104.393345,36.521576];
    var map = new ol.Map({
        target: 'map',
        layers: [baidumap],
        view: new ol.View({
            center:  ol.proj.transform(center,'EPSG:4326', 'EPSG:3857'),
            zoom: 4
        })
    });
</script>
</body>
</html>

最终效果图(加到这里有点变形了。。。):

© 著作权归作者所有

共有 人打赏支持
RealPari
粉丝 1
博文 49
码字总数 15143
作品 0
昌平
OpenLayers3加载地图后上下部位出现了空白

我用OpenLayers3时,地图可以完全加载,但是地图可以随便上下移动,怎么把地图的上下固定?

路人甲de
2016/12/29
221
0
openlayers 点击Point Icon没有反应

我使用Openlayers3 + Ionic 做一个项目,有时会碰到图中的情况: Point 1和Point 2位置重合,所以对Point 2做了一个旋转,但是我点击Point1 和 Point2 的图标没有反应,只有点击区域3时才有反...

JiaoXN
2016/11/09
166
1
去百度API的百度地图准确叠加和坐标转换的解决方案研究

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百度提供的接口来...

李晓晖
2015/02/07
0
0
关于在angular里异步加载百度地图API的问题

首先,我想在angular里实现异步加载百度地图api后调用相关回调, 百度地图官方给出的地图异步加载的例子是这样的:

大冒险
2015/11/19
1K
2
百度地图新手教程1(转载自百度)

简介 1.什么是百度地图API? 2.面向的读者 3.坐标转换 4.获取API 5.开发移动平台上的地图应用 6.异步加载 7.兼容性 8.版本说明 9.问题解答 什么是百度地图API? 百度地图API是一套由JavaScr...

长平狐
2013/01/06
3.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python3.6 取整除法

python3.6 中取整除法运算逻辑如下: d 非零,那么商 q 满足这样的关系: a = qd + r ,且0 ≤ r n1=7//3#7 = 3*2 +1n2=-6.1//3#-7 = 3*(-3)+2'{},{}'.format(n1,n2) 从运行结果可以...

colinux
28分钟前
3
0
阶段总结——用虚拟机搭建一个高可用负载均衡集群架构

[toc] linux基本知识已经介绍完,现有一个业务需要操作,通过对这个项目的操作,可以复习、总结、巩固之前的知识点; ** 用13台虚拟机搭建一个高可用负载均衡集群架构出来,并运行三个站点,...

feng-01
31分钟前
0
0
mysql 设置utf8字符集 (CentOS)

1.查看数据库及mysql应用目前使用的编码方式 (1)链接mysql 客户端 (2)执行:status 结果: 2.修改mysql 应用的字符编码(server characterset ) (1)打开配置文件:vim /etc/mysql/my...

qimh
31分钟前
0
0
windows无法格式化u盘解决方法

1。点开始-运行-输入cmd-format f: /fs: fat32 (这里f:是指U盘所在盘符) 这个格式化会很慢 请耐心等待

大灰狼wow
42分钟前
0
0
MySql 8.0连接失败

原来,MySql 8.0.11 换了新的身份验证插件(caching_sha2_password), 原来的身份验证插件为(mysql_native_password)。而客户端工具Navicat Premium12 中找不到新的身份验证插件(caching_s...

放飞E梦想O
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部