openlayers 地图加载

最新推荐文章于 2024-12-27 09:35:45 发布

一个姓王的程序猿

最新推荐文章于 2024-12-27 09:35:45 发布

阅读量341

点赞数 1

分类专栏： html 文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_43876005/article/details/114871934

版权

html 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用 OpenLayers 6.5.0 版本集成天地图服务。通过下载 OpenLayers 并将其部署到项目中，接着引入必要的 JS 和 CSS 文件，最后通过 JavaScript 代码配置地图的图层、中心点和缩放级别等参数，成功展示了带有天地图矢量图层的地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先去openlayers官网下载地址：点击去下载这是6.5.0版本的
下载完毕后将 map文件夹内容放到项目根目录下，如图
在这里插入图片描述
然后在你需要添加地图的界面添加div容器，引入ol.js和ol.css两个文件

 <div id="map" class="map"></div>
 <script src="../map/ol.js"></script>

然后添加script内容：

<script>
var map = new ol.Map({
			  layers: [
				  new ol.layer.Tile({
					source: new ol.source.XYZ({
						url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=0b3c362279e0b72bfebd1c6854730e34',
					}),    
					}), 
				  new ol.layer.Tile({
					  source: new ol.source.XYZ({
						  url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=0b3c362279e0b72bfebd1c6854730e34',
					  }),
					  isGroup: false,
					  name: '天地图矢量'
				  })
			  ],
             target: 'map',
             view: new ol.View({
          	 center:[121,39],//地图显示的中心点
				 projection: 'EPSG:4326',
             zoom: 8,//缩放的级别
            })
		  });
</script>

完毕，运行后如下成功显示