openlayers5加载天地图

最新推荐文章于 2024-05-11 15:47:37 发布
最新推荐文章于 2024-05-11 15:47:37 发布
阅读量6.5k 收藏 5
点赞数 1
分类专栏： openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_25006091/article/details/93093297
版权

<!DOCTYPE html>
<html>
<head>
  <title>WMTS</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
</head>
<style type="text/css">  
        body, #map {  
            border: 0px;  
            margin: 0px;  
            padding: 0px;  
            width: 100%;  
            height: 100%;  
            font-size: 13px;  
        }  
        #map{  
            width:100%;
            height:100% 
            border:1px solid red;           
        } 
</style>
<body>
  <div id="map" class="map"></div>
  <script>
      var center = ol.proj.transform([112.73, 38.42], "EPSG:4326", "EPSG:3857");
      var map = new ol.Map({
        target: 'map',
        layers: [
                new ol.layer.Tile({
                  source: new ol.source.XYZ({
                    url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2ce94f67e58faa24beb7cb8a09780552',
                  }),
                  isGroup: true,
                  name: '天地图路网'
                }),
                new ol.layer.Tile({
                  source: new ol.source.XYZ({
                    url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2ce94f67e58faa24beb7cb8a09780552'
                  }),
                  isGroup: true,
                  name: '天地图文字标注'
                })
            ],

        view: new ol.View({
          center: center,
          zoom: 12
        })
      });
    </script>
  
</body>

</html>

花舞月咏潭
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenLayers构建4490坐标系地图解决方案
lz5211314121的博客
08-17 2643
openlayers默认支持的坐标系有4326（基于美国wgs84坐标系）和3857（墨卡托投影）两种。但是我们国内在使用的时候非常的不便利，国内大多数的数据和产品大多是基于4490（GCGS2000坐标系）的，所以我们需要把openlayers进行扩展和变化，让其支持4490坐标系。...
openlayers加载天地图
qq_25064691的博客
04-24 865
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
openlayers 加载天地图及自定义EPSG:4490坐标系以及axisOrientation的值为enu或neu的问题
挣钱花388的博客
03-24 2048
但是这个只是针对neu坐标系，而我们注册的4490如果不重写定义axisOrientation，会被ol默认注册为enu，从而不会触发wms1.3.0的反转xy的操作，导致图层无法加载，所以需要进行projection4490的重写，然后覆盖添加到projection中。首先openlayer自带的projection的坐标系是支持EPSG4326的，我们想要支持EPSG4490的坐标系，就必须将4490的坐标系注册进openlayer的projection中,这里我们借助Proj4.js。
openlayers入门教程
Admans的专栏
05-11 319
平铺图层。对于提供预呈现、平铺的网格图像的层源，这些网格按特定分辨率的缩放级别组织。图像图层。服务器呈现的映像，可用于任意范围和分辨率。(3)ol.layer.Vector()很常用矢量图层。矢量平铺图层。图层用于客户端呈现矢量平铺数据。
Openlayers 坐标系全面解析
qq_37489791的博客
04-17 1300
思路：1、拿到所有的featurens，2、申明一个临时变量来保存所有的features3、然后循环调用convert2000CoorTo84转换4、再把转换后的值push到临时变量中，5、返回一个转换坐标后的geometry定义转换函数：1、引入proj42、定义扩展的EPSG4、读取数据并转换坐标系try {
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
热门推荐
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
openlayers-09-添加标注（文字+图片）
chuanren1991的博客
05-16 3036
以上顺序也可以进行调整，可以先实例化标注对象，在实例化矢量图层时直接将 标注对象放在矢量图层源的features属性中，而不是调用addFeature()方法，后期进行添加。同理，在实例化map对象时，直接将矢量图层添加到map对象的layers属性中，而不是在后面调用map的addLayer()方法添加图层。在地图上添加标注，大概分为三步。
Openlayers4加载天地图
GISXX
06-22 7180
文章首发于GISGO | GIS | 地理信息科学 - GIS研究中心：http://www.gisgo.top/ 相较于ArcGIS API而言，Openlayers添加天地图和其他第三方的地图服务简单多了。通过ol.layer.Tile调用切片地图服务，因为天地图服务遵循TMS标准，所以在source属性中使用ol.source.XYZ类，服务地址可以在天地图中查看到。 ...
openlayers5加载天地图影像.zip
06-23
本文将深入探讨如何使用OpenLayers 5加载天地图影像，这是一个中国本土的、提供丰富地理信息的在线地图服务。 首先，了解基本概念。天地图是中国测绘科学研究院开发的地理信息系统，它提供了多种地图服务，包括影像...
openlayers5加载天地图.zip
06-21
在"openlayers5加载天地图.zip"这个压缩包中，我们可以期待找到一个示例项目，展示了如何利用OpenLayers 5来加载和展示天地图的数据。天地图是中国的一个官方基础地理信息服务平台，提供了丰富的地图服务，包括地形...
openlayers 加载天地图示例
02-24
在"Openlayers 加载天地图示例"中，`Openlayers-tianditu.html`很可能是主HTML文件，它会引入OpenLayers库以及我们自定义的`tiandituLayers.js`脚本来实现天地图的加载。在HTML文件中，我们可能会看到一个`<div>`...
openlayers加载在线天地图.zip
最新发布
06-19
4. 数据叠加：除了加载天地图，你还可以叠加其他数据源，如GeoJSON、KML等，实现数据的可视化展示。 通过以上步骤，你已经成功地使用OpenLayers加载了在线天地图。这只是一个基本的示例，OpenLayers提供了更多高级...
利用html5技术加载天地图
09-16
标题“利用HTML5技术加载天地图”涉及到的是在现代网页应用中如何集成并展示天地图这一地理信息系统（GIS）的服务。HTML5是超文本标记语言HTML的第五个版本，它引入了许多新特性，使得Web开发者可以创建更丰富、更具...
OpenLayers加载天地图
Moon Star
10-17 2553
Vue中使用OpenLayers加载天地图图层。网站中创建应用
openlayers：实现加载天地图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 345
openlayers：实现加载天地图（附完整源码）
Openlayers+天地图在页面上显示（初始化）（使用vue3）
m0_57816620的博客
10-18 1988
使用openlayers+天地图完成初始化页面的显示
使用openlayers加载OSM街道图，谷歌影像图以及天地图地形图
~~
10-07 7890
一，安装ol cnpm i ol -S 二，在components文件夹下面新建olmap.vue <template> <div id="map"></div> </template> <script> import 'ol/ol.css' import {Map,View} from 'ol' import Til...
vue openlayers加载天地图
06-28
要在Vue中加载天地图，需要先安装OpenLayers和天地图的相关库。可以通过npm安装： ``` npm install ol @supermap/iclient-ol6 --save ``` 然后在Vue组件中引入OpenLayers和天地图的相关库： ```javascript import...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值