【自学笔记】openlayers加载天地图笔记二

最新推荐文章于 2022-06-18 14:30:57 发布
最新推荐文章于 2022-06-18 14:30:57 发布
阅读量507 收藏
点赞数
分类专栏： 天地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46074818/article/details/109154846
版权

openlayers是开源地图包，它支持加载天地图。

html

<body>
    <div id="tabMap">
    </div>
</body>

css

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body, html{
	width: 100%;
	height: 100%;
	font-family:"微软雅黑";
}
#tabMap{
	width:100%;
	height:100%;
	position: relative;
}

js

// 创建地图（天地图的卫星影像图）
new ol.Map({
  // 加载地图，即设置图层，。
  layers: [
	  new ol.layer.Tile({
		  source:new ol.source.XYZ({
			  title: "天地图卫星影像图",
			  url:"http://t0.tianditu.gov.cn/img_w/wmts?" +
				  "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
				  "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=秘钥"
           })

	  }),
	  new ol.layer.Tile({
          source:new ol.source.XYZ({
			  title: "天地图卫星影像文字标注",
			  url: "http://t0.tianditu.gov.cn/cia_w/wmts?" +
				  "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
				  "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
				  "&tk=秘钥"
          })
	  })
  ],
  // 设置显示地图的视图
  view: new ol.View({
	  center: [107.353926, 22.404108],    //地图显示中心点，经度107.353926度，纬度22.404108度
	  zoom: 16 ,           // 地图显示级别
	  projection: 'EPSG:4326',
  }),
  // 让id为tabMap作为地图容器
  target: 'tabMap'
});

第一次接触openlayers，总结一下：

  1. new ol.Map({}）用来创建地图，在它需要用到layers，view，target参数。
  2. layers用来加载地图，其中ol.source.XYZ用来加载url
  3. view显示地图，如地图中心点，缩放级别
  4. target是对应放到html中那一个dom中

好记性不如烂笔头，打算把博客作为学习工具，记录理解的知识点方便后面查看，顺便记录成长点滴。我是一名技术小白，我会一直努力学习，若文章有不对的地方，欢迎大家指正，我的邮箱：xiaoheizhu3306@163.com

小黑猪hhh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
高德地图web绘制省、市、区 边界线和面积图
红叶岭谷的博客
11-21 1万+
高德地图web绘制省、市、区 边界线和面积图 高德地图官方API 图例 总结要点 申请高德地图的key 用于后边web调用 高德地图key申请 引用 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.DistrictSearc...
OpenLayers加载天地图方法——WMTS和XYZ
热门推荐
顽劣的石头——www.gisgogo.cn
05-19 2万+
1、ol.layer.Tile及数据源类结构openlayers中，图层(layer)不可缺少的组成部分是数据源(source)，天地图是切片的数据服务，对应的图层是ol.layer.Tile，下图是其数据源对应的类结构图，红色部分是重点内容。从图可以看到，加载天地图的数据源，可以是ol.source.WMTS（简称WMTS） 和 ol.source.XYZ（简称XYZ）。下面首先以实际的代码对分...
高德地图API生成地图（含有各个省份边界线）
夏桑菊泡面
01-28 1万+
&lt;script src="https://webapi.amap.com/maps?v=1.4.2&amp;key=524a418fec2e899a33ac8fa63ffb66cd666&amp;plugin=AMap.DistrictSearch"&gt;&lt;/script&gt; &lt;!-- UI组件库 1.0 --&gt; &lt;script src="//webapi.a...
高德地图绘制省市边界，根据指标各市显示不同状态
weixin_48398799的博客
05-19 4354
高德api中提供了绘制边界方法，引用简单，只需传入省市名称即可，以下以江苏省示例，为演示效果自定义
中国省市地图划分
01-24
全国省市区划分
高德地图看各省分界线_高德地图定位城市区域
weixin_39635373的博客
12-20 1783
h文件引入CoreLocation/CoreLocation.h@interfaceWeatherViewController :UIViewController<CLLocationManagerDelegate>{CLLocationManager*locationManager;}@property(strong,nonatomic)CLLocationManager*locat...
openlayers 加载天地图示例
02-24
openlayers 加载天地图示例
使用openlayers加载离线地图实例
10-06
使用openlayers加载离线地图实例，可通过mui打包成app。简单，易上手
openlayers5加载天地图影像.zip
06-23
使用openlayers5加载天地图影像，可以供参考使用，希望可以改进代码，重新使用。
openlayers5加载天地图.zip
06-21
此代码采用开源的openlayers5,显示天地图的注记图层，天地图路网图层，欢迎下载使用。
高德地图中国省级边界线GEOJSON格式
07-13
完整的高德地图中国省级边界线，包含34个省/直辖市/自治区/行政区，坐标格式是WGS84,EPSG4326
高德地图，全国省级数据Json(包括：经纬度，省份Code，省份名称等)
01-08
高德地图，全国省级数据Json(包括：经纬度，省份Code，省份名称等)
leaflet加载百度瓦片并使用百度线路规划
03-05
leaflet加载百度地图瓦片图片，坐标已根据网上提供的方法进行了较正，并调用百度web服务API获取步行线路规划进行展示，可拖拽起始坐标点进行线路更新
OpenLayers3加载谷歌地图
05-07
OpenLayers3加载谷歌地图，加载谷歌地图显示，实现效果很好，放大比例尺也能看得清楚。文章链接：https://blog.csdn.net/Gary_888/article/details/89914290
openlayers添加按钮_OpenLayers 之 控件（control）详解
weixin_39963287的博客
01-28 2485
每一个地图应用都应该有一些工具方便用户控制地图的行为，比如缩放，全屏，坐标控件等等，在 OpenLayers 中怎么添加这些工具呢？下面我给大家介绍一下 OpenLayers 中包含的控件种类，并介绍其使用方法。对控件的定制化，和对 OpenLayers 增加控件和优化控件等超出了本文范围。一、control 类OpenLayers 中的控件是由 control 类定义的，这是一个虚基类，不负责实...
openlayers添加按钮_Openlayers API整理
weixin_39594080的博客
12-19 783
一、创建地图1、地图Map创建地图底图：需要用new ol.Map({})地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI组件的控件control组成的。(1)、创建基本地图let map = new ol.Map({target: 'map',//对象指向layers: [//图层new ol.layer.Tile({//这里定义的...
SDN：简述对各类SDN控制器的认识
王小二(海阔天空)
03-07 1万+
SDN：简述对各类SDN控制器的认识 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前，SDN控制器已经比较成熟，种类也相当繁多，而且活跃的一些控制器项目还在不断发展之中，如 Open Daylight项目不到一年就发布一个新的版本。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SDN控制器分为开源控制器和商业控制器。 有些商业控制器是在某...
高德地图自定义省界样式
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
06-18 4129
⚡️ 由于高德api省界描边样式与ui差别很大，所以尝试自定义省界线样式 ⚡️ vue2、vue3实现方式一致，本篇记录vue3实现方式mapConfig.js 组件代码 案例中UI图片，与图分开效果更好 分开实现方式：这样拖动地图不会超出背景图范围github源代码：点击跳转到 gitHub 有用点个star吧~...
VUE2.0实现 高德地图 选择地点后 进行 行政区边界划分
weixin_45905700的博客
06-15 4146
最终效果达到选择全部就描绘当前级联选择框下面的所有行政区，第二级开始描绘上一层加当前所有行政区预备知识：vue2.0、组件间传值、高德地图API（提前去高德地图提供的服务处申请好key）
vue openlayers加载天地图
最新发布
06-28
### 回答1： 要在Vue中加载天地图，需要先安装OpenLayers和天地图的相关库。可以通过npm安装： ``` npm install ol @supermap/iclient-ol6 --save ``` 然后在Vue组件中引入OpenLayers和天地图的相关库： ```javascript import ol from 'ol'; import { Tianditu } from '@supermap/iclient-ol6'; ``` 接着，在Vue组件的mounted生命周期中，创建地图并添加天地图图层： ```javascript mounted() { // 创建地图容器 const mapContainer = document.getElementById('map'); // 创建地图对象 const map = new ol.Map({ target: mapContainer, view: new ol.View({ center: [, ], zoom: 2 }) }); // 创建天地图图层 const tiandituLayer = new Tianditu({ layerType: 'vec', key: 'your-tianditu-key' }); // 添加天地图图层到地图中 map.addLayer(tiandituLayer); } ``` 其中，`your-tianditu-key`需要替换成你自己的天地图开发者密钥。如果没有密钥，可以在天地图开发者平台申请。 ### 回答2： Vue 是一种流行的前端框架，能够帮助开发者构建高效的用户界面。而 OpenLayers 则是一种流行的前端地图库，它提供了许多强大的地图功能，包括地图渲染、矢量数据展示、标注等等。 天地图是一种常用的在线地图服务，提供了丰富的地图数据资源，包括卫星影像、地形数据、街景图等等。 为了加载天地图，并在 Vue 中使用 OpenLayers 进行地图展示，我们需要采取以下步骤： 1. 获取天地图的 API 密钥 天地图需要注册开发者账号，并获得一个 API 密钥，才能进行在线地图服务的调用。获取密钥后，我们可以在 OpenLayers 中调用天地图的 WMTS 服务，加载所需的瓦片数据。 2. 安装必要的依赖库 在 Vue 项目中使用 OpenLayers，需要先安装相关的依赖库。具体来说，我们需要安装三个库：ol、proj4 和 proj4leaflet。其中，ol 是 OpenLayers 的核心库，proj4 和 proj4leaflet 则是用于地图坐标转换的工具库。 可以使用 npm install 命令来安装这些库。 3. 在 Vue 模板中添加地图容器 在 Vue 的模板中，我们可以添加一个 div 元素，用于承载 OpenLayers 的地图容器。这个容器需要设置样式来确定它所占据的位置和大小。 4. 在 Vue 中引入 OpenLayers 和天地图的配置 为了在 Vue 中加载 OpenLayers 和天地图服务，我们需要新建一个 .js 文件，用于配置这些服务的相关信息。在这个文件中，我们需要引入 OpenLayers 和 proj4 库，以及天地图的 API 密钥。 5. 在 Vue 中引入地图组件 最后，在 Vue 的组件中，我们需要引入地图组件，并在其 mounted 生命周期中，调用我们定义好的配置文件，来加载天地图服务和 OpenLayers 的地图显示。 通过以上步骤，我们就可以在 Vue 中，轻松地加载和显示天地图，并使用 OpenLayers 进行地图展示和交互。 ### 回答3： Vue是一种流行的JavaScript框架，它提供了一种开发Web应用程序的方法，使您可以使用组件，指令和状态来轻松构建丰富的用户界面。而OpenLayers是一个功能强大的JavaScript库，它可以帮助您在Web应用程序中实现各种地图和空间分析功能。 天地图是一种广泛使用的中国地图服务，它提供了各种地图数据，如道路，建筑物和地形，以及各种功能，如地理编码和路径规划。对于Vue开发人员来说，整合天地图和OpenLayers可以为他们的Web应用程序提供丰富的地图功能。 要加载天地图，需要使用OpenLayers的TileLayer组件。在Vue应用程序中，您可以使用Vue-OpenLayers，这是一个Vue组件库，为OpenLayers提供了Vue绑定。下面是一些步骤，可以帮助您在Vue中加载天地图： 步骤一：安装Vue-OpenLayers组件库 您可以使用npm安装Vue-OpenLayers： npm install vue-openlayers 步骤二：导入Vue-OpenLayers组件 您需要在Vue组件中导入Vue-OpenLayers组件： import { Map, TileLayer } from 'vue-openlayers'; 步骤三：创建地图容器 您需要在模板中添加一个地图容器： <template> <div> <Map ref="map"> <TileLayer type="XYZ" url="http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}" attributions="&copy;2018 TDT&nbsp;|&nbsp;http://www.tianditu.gov.cn/" /> </Map> </div> </template> 步骤四：配置天地图数据 您需要在TileLayer组件中配置天地图数据。此处的URL应该是天地图服务提供商提供的。 步骤五：运行应用程序 您可以运行Vue应用程序，并在浏览器中查看地图。现在，您应该能够看到一个包含天地图数据的地图！您可以尝试通过添加更多图层来定制地图，或者使用OpenLayers的各种功能来实现空间分析。 在使用Vue-OpenLayers加载天地图时，需要注意保护好自己的开发者密钥，在与天地图服务提供商之间的交互中，应该遵守相关协议和政策。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值