OpenLayers加载天地图
openlayer 是基于JavaScript的webGIS库 ,通过openlayer可以很容易的调用地图,并做相应的操作。
在head中载入openlayer的js文件:
<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://www.scgis.net/api/ol/v4.1.1/ol/ol4.1.1_scgis.js" type="text/javascript"></script>
body部分只需 添加:
<div id="map" class="map"></div>
script代码如下:
<script>
window.onload = function(){
var view = new ol.View({
projection: ol.proj.get("EPSG:4326"),
zoom:6, //初始化地图级别
rotation:0, //地图旋转弧度,默认为0,最大2π
center:[104.07, 30.7], //初始化地图中心点
minZoom: 3,
maxZoom: 18
}); //定义图层
var layers = [];
var layer1 =new ol.scgisTileLayer(
"http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudom/", //地图服务地址
{token:"24TLRFm6TOrv" //天地图四川服务访问令牌
});
var layer2 =new ol.scgisTileLayer(
"http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/NewTiandituDOM_SCANN/", //地图服务地址
{token:"24TLRFm6T" //天地图四川服务访问令牌
});
layers.push(layer1)
layers.push(layer2)
//定义地图
var map= new ol.scgcMap({
layers:layers,
view:view,
target:"map",
loadTilesWhileInteracting: true,
logo:false
}); } </script>
view 中 加入 logo:false 可以去掉 右下角 openlayer 的 图标
g
OpenLayers加载天地图的更多相关文章
- openlayers加载天地图过程中遇到跨域问题
// 采用openlayers加载天地图 var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ // crossOrigin: 'An ...
- 使用openlayers 3 在线加载天地图及GeoServer发布的地图
使用openlayers3来加载天地图卫星图和标注图层,GeoServer发布地图,一并用openlayers测试加载出来,顺便实现了7种地图控件.下面直接贴代码: <!DOCTYPE html ...
- (转)Openlayers 2.X加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...
- openlayers 加载瓦片详解 一
在这先说点题外话,本人在研究webgl 三维球过程中惊人发现,openlayers 的开发人员也在研究webgl并经证实他们也正在研发基于 webgl的三维gis开源平台,这可能是首个开源的三维平台, ...
- 【ArcGis for javascript从零开始】之一 ArcGis加载天地图
最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...
- ArcGis Javascript API (V3.6)加载天地图
Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...
- OpenLayers加载QQ地图(转)
OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...
- ArcGIS API for Javascript 加载天地图(经纬度投影)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ArcGIS API for Javascript 加载天地图(墨卡托投影)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- CF986A Fair【图论/BFS】
[题意]: 有些公司将在Byteland举办公平的会议.Byteland的n个城镇,m条两镇之间的双向道路.当然,你可以使用道路从任一个城镇到达任何城镇. 有k种商品产自Byteland,并且每个城镇 ...
- springboot微服务的简单小结
springboot微服务的简单小结 近来公司用springboot微服务,所以小结一下. 基础: 什么是SpingBoot微服务? 如何创建SpringBoot微服务? 如何管理和完善SpringB ...
- 第九章 Android-UI组件(2)
一.图像视图(ImageView) 布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
- linux命令详解:cat命令
转:http://www.cnblogs.com/lwgdream/archive/2013/11/06/3409802.html 前言 cat命令用于读取文本文件,并且能够显示行号.特殊字符等. 使 ...
- iOS教程:如何使用NSFetchedResultsController
不知不觉我们已经来到了Core Data系列教程的最后一部分了,在这里我们要讨论如何使用NSFetchedResultsController来优化我们的应用,提高应用的运行速度,减少其内存占用. 你是 ...
- andriod读写XML
AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xm ...
- 【java】在controller层使用的检查单一字段不能为null和检查属性中某些字段不能为null的工具
========================================================================================= 代码参考地址:Git ...
- mysql修改表字段属性类型
例如: 修改表expert_info中的字段birth,允许其为空 >alter table expert_info change birth birth varchar(20) null; 例 ...
- 什么是HotSpot VM & 深入理解Java虚拟机 JVM
参考 http://book.2cto.com/201306/25434.html 另外,这篇文章也是从一个系列中得出的: <深入理解Java虚拟机:JVM高级特性与最佳实践(第2版)> ...
- jar文件的Eclipse插件安装
以[zigen.plugin.db_1.2.2.v20101009.jar]为例. (1)在[\eclipse\dropins]目录下新建一个目录,例如[myplugin] (2)上面新建的n目录下建 ...