天地图专题一:加载天地图
最近公司的项目到了尾声。总结一下项目中的一些技术。其中有涉及到天地图的部分。 类似百度地图,google地图。 我们要用一些它的公共接口,实现一些我们的效果。 比如在地图上显示我们的设备的位置,范围,运行轨迹等等。
大多数的功能其实都只是参考天地图官方api。http://api.tianditu.com/api-new/webIndex.html。
基本上要实现什么功能就去看一下api。就能解决多半的问题。但是实际运用中的话可能只看接口还无法灵活地运用起来。所以这里写一个天地图系列文章,希望给广大程序员同胞们一点参考。
加载天地图首先要引入官方的js:
- <script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
给它一个放地图的div。设置好样式,id。
然后调用给它一个缩放级别,以及一个中心点,调用TMap();生成地图放到页面。缩放级别有18级。代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>加载天地图</title>
- <script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
- </head>
- <body>
- <style type="text/css">
- #mapDiv{
- height:600px;
- border: 1px solid #ccc;
- margin: 10px;
- }
- </style>
- <div id="mapDiv"></div>
- <script type="text/javascript">
- function loadMap(){//加载基本地图和导航
- try {
- map = new TMap("mapDiv"); //初始化地图对象
- map.centerAndZoom(new TLngLat(103.388611,35.563611), 4);//设置显示地图的中心点和级别-中国
- map.enableHandleMouseScroll(); //允许鼠标双击放大地图
- } catch(err) {
- alert('图加载不成功,请稍候再试!你可以先使用其他功能!');
- }
- }
- loadMap();
- </script>
- </body>
- </html>
效果图:
这样我们就加载了一张基本的地图了。
更多的内容请关注本系列后续文章。
项目下载地址:https://github.com/liusaint/tiandituMap
演示地址:http://runningls.com/demos/tianditu/index.html?to=loadmap
转载于:https://www.cnblogs.com/telwanggs/p/6484270.html
天地图专题一:加载天地图相关推荐
- GIS初学者,最新OpenLayers WMTS 天地图,OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326
2018最新OpenLayers天地图加载可行方案,天地图WMTS调用,OpenLayers 天地图 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知识,对我 ...
- 天地图一,加载天地图。
html加载天地图js4.0 需要在天地图注册并新建应用,选择浏览器端,域名白名单可以不填,默认支持所有域名 下方是官方代码. http://lbs.tianditu.gov.cn/api/js4.0 ...
- osgEarth3.0 加载天地图
2.8版本里面有个xyz图层的例子,稍作修改就可以加载天地图的影像图层.在3.0版本中,XYZ , bing 等图层已经被移植到内核中.所以我们直接用XYZ图层来加载天地图即可 XYZImageLay ...
- 基于ArcGIS API for JavaScript加载天地图
文章目录 前言 效果图 详细代码 总结 参考链接 前言 该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
- Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...
- ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ
1.ol.layer.Tile及数据源类结构 openlayers中,图层(layer)不可缺少的组成部分是数据源(source),天地图是切片的数据服务,对应的图层是ol.layer.Tile,下图 ...
- (转载)arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...
- (转)Openlayers 2.X加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...
- (转)Arcgis for js加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...
最新文章
- 百度云满速下载(转)
- 常见的IaaS安全问题与缓解方法
- resin安装与配置
- python观察日志(part28)--数据的加载与存储
- Unity3d访问数据库
- xposed hook 静态函数_浅谈 Xposed 新概念【模块作用域】
- Python文件操作2
- java socket返回_java中用Socket向ServerSocket发送信息,ServerSocket用接收到的Socket返回一条信息,但是返回时报错......
- pytorch view()函数
- Domino XML Language(DXL)简介
- windows 安装使用luarocks
- 基于LabWindowsCVI的Http请求
- 程序员或IT人应该吃的东西
- STM32—ADC详解
- 解决打包APK时候的报错:uses-sdk:minSdkVersion 22 cannot be smaller than version 23 declared in library
- 现代OpenGL教程 02——贴图
- python 处理excel文件,按某一列值生成多个excel文件
- 支付宝 自动发货 php,Ecshop实现支付宝自动发货功能
- 西门子培训1——RFID
- 小程序 账本小记 统计月收入 月支出 源码分享
热门文章
- (220)FPGA内部组成LUT介绍
- linux5怎么删除目录,Linux中目录的创建与删除命令使用说明
- ci php view,CI映射(加载)数据到view层的方法,ciview_PHP教程
- 24小时学会python_零基础python24小时极速入门学习
- python重命名文件夹下所有文件_Python3.4.3重命名当前文件夹下的文件
- RTL8201网络芯片讲解
- mysql 执行计划 视频_MySQL执行计划的讲解
- 单例模式代码_设计模式之单例:程序员必知必会,举例子+代码示例,通俗易懂...
- 电脑cpu风扇转一下就停无法开机_电脑无法正常开机风扇转一下就停的原因及解决方法...
- HTTP协议 (四) 缓存