文档章节

OpenLayers3加载百度地图

RealPari
 RealPari
发布于 2017/05/02 17:42
字数 208
阅读 595
收藏 1
点赞 0
评论 0
<!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 ⋅ 0

openlayers 点击Point Icon没有反应

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

JiaoXN ⋅ 2016/11/09 ⋅ 1

去百度API的百度地图准确叠加和坐标转换的解决方案研究

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

李晓晖 ⋅ 2015/02/07 ⋅ 0

关于在angular里异步加载百度地图API的问题

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

大冒险 ⋅ 2015/11/19 ⋅ 2

基于百度地图 api 封装的 React 组件库--React-BMap

React-BMap 基于百度地图JavaScript Api封装的React组件库,使用这个库最好需要先了解React和百度地图JavaScript Api。 React-BMap只是利用了React组件的生命周期,来调用对应的百度地图Jav...

Kai_Ni ⋅ 2017/07/04 ⋅ 0

Android百度地图加载问题

最近在做百度地图方面的应用,发生一些奇葩的问题,在一连串的Activity 界面中,将加载百度地图的界面放在稍后的位置,会出现在初次启动的时候地图会加载出来(key 不对起码加载出网格),可是...

JackLeeMing ⋅ 2016/07/29 ⋅ 1

百度地图新手教程1(转载自百度)

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

长平狐 ⋅ 2013/01/06 ⋅ 0

四、android百度地图之导航(环境的配置)

导航 四、android百度地图之导航(环境的配置) 五、android百度地图之导航(代码的拆分和工具类的封装) 大家好,通过前面三篇百度地图SDK的教程已经有不少同学脱离了苦海。然而在公司的产品...

猫儿不吃鱼鱼 ⋅ 2017/11/20 ⋅ 0

地图的开发研究---在线地图

关于地图的开发,目前有两种,谷歌或者百度地图提供的在线API(目前我使用的),方便有效,但是需要用户可以连接到百度或者谷歌的服务器,即必须在线,对于重视安全隐私的局域网不适合。另一种...

bolatu836125 ⋅ 2013/12/09 ⋅ 1

调用百度地图-带导航的百度地图

我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片。但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他...

羊皮卷 ⋅ 2016/04/09 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部