OpenLayers 3 +天地图展示

最新推荐文章于 2024-09-12 19:48:44 发布

一叶惊风雨

最新推荐文章于 2024-09-12 19:48:44 发布

阅读量4.5k

点赞数

分类专栏： OpenLayers3开发文章标签： OpenLayers 3 ol3 WebGis

本文链接：https://blog.csdn.net/xy523632862/article/details/52711755

版权

该博客介绍了如何在WebGIS项目中结合OpenLayers 3来展示天地图。首先，从官网下载OpenLayers 3的ol.css和ol.js文件，并在HTML中引入这些资源，从而实现地图的展示。

摘要由CSDN通过智能技术生成

OpenLayers 3 官网下载

包含

引用ol.css和ol.js。

html部门

<div id="map"  style="width: 100%;height:700px;"></div>

Script部分

$(function(){

		var attribution = new ol.Attribution({
			html:'<a href="http://www.chinaonmap.com/map/index.html">天地图</a>'
		});
		
		//设置中心
		var coor = ol.proj.transform([108.644322516, 27.517988165], 'EPSG:4326', 'EPSG:3857');
		var view = new ol.View({
			center:coor,
			zoom:13
		});
		var map = new ol.Map({
			target:'map',
			layers:[
				new ol.layer.Tile({
					source:new ol.source.XYZ({
						attributions:[attribution],
						title: "天地图路网",
						url:"http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&