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

程序员文章站 2022-03-04 23:41:41

...

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，总结一下：

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

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

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

html

css

js

OpenLayers学习笔记——加载地图

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