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 的图标

转载于:https://www.cnblogs.com/crazytao/p/9904438.html

OpenLayers加载天地图相关推荐

OpenLayers 加载天地图模糊的问题 OpenLayers 地图缩放模糊
openlayers 加载天地图模糊的问题,OpenLayers 地图缩放几次之后模糊 2021年12月20日纠正模糊原因: 地图加载瓦片实质上还是图片,一般来说是256&256,将一个静态 ...
GIS初学者，最新OpenLayers WMTS 天地图，OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326
2018最新OpenLayers天地图加载可行方案,天地图WMTS调用,OpenLayers 天地图 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知识,对我 ...
openlayers学习——1、openlayers加载天地图
openlayers加载天地图前言:基于Vue,学习openlayers,根据官网demo,记录常用功能写法.本人不是专业GIS开发,只是记录,方便后续查找. 参考资料: openlayers官网: ...
OpenLayers 加载天地图
要使用 OpenLayers 3 加载天地图,首先要弄清楚天地图发布的原理,以及遵循的发布规范,上一篇中我们提到了使用 OpenLayers 3 加载百度地图,我们提到一般网络地图为了加快访问速度,都 ...
openlayers加载天地图及天地图地形图影像图
openlayer加载天地图.天地图地形图.天地图影像图,相关代码有注释. 加载效果: 天地图底图天地图地形图天地图影像图相关代码: import {XYZ,TileImage} from 'o ...
openlayers 加载天地图及自定义EPSG:4490坐标系以及axisOrientation的值为enu或neu的问题
借鉴了一网络上的以及自己整合的两种方式第一种: 首先openlayer自带的projection的坐标系是支持EPSG4326的,我们想要支持EPSG4490的坐标系,就必须将4490的坐标系注 ...
基于vue利用openlayers加载天地图的影像图，地形图
废话不说直接上代码影像图 <template><div><div>影像图</div><div class="map" id= ...
openlayers加载百度地图作为底图坐标偏移的解决办法
openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的: var proje ...
Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...

OpenLayers加载天地图

OpenLayers加载天地图相关推荐

最新文章

热门文章