OpenLayers3（一）初始化地图

最新推荐文章于 2023-05-22 10:18:19 发布
最新推荐文章于 2023-05-22 10:18:19 发布
阅读量2.8k 收藏 3
点赞数
分类专栏： 地图API 文章标签： openlayer  google map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jx950915/article/details/82657689
版权

惯例：OpenLayer API

引入文件
<style>
	/* 调整OL控件位置和样式 */
	*{
		margin:0;
		padding:0;
	}
	.ol-zoom{
		top:80px;
	}
	.ol-zoom-extent{
		top:140px;
	}
	.ol-full-screen{
		top:80px;
	}
	.ol-scale-line{
		left:200px;
	}
	.mouse-position-wrapper{
		width:300px; 
		height:29px; 
		color:#FFFFFF; 
		position:absolute; 
		right:20px; 
		bottom:1px; 
		z-index:999;
	}
	/* 调整地标弹出提示框的宽度 */
	.popover{
		width: 260px;
	}
	.icon {
	    width: 32px;
	    height: 48px;
	    background: url('./data/icon.png');
	    cursor: pointer;
	}
</style>
<body onload="init()">
<div id="map"><div id="popup"></div></div>
<div id="mouse-position" class="mouse-position-wrapper">
    <div class="custom-mouse-position"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/ol.js"></script>
<script src="tilesInfo.js"></script>
<script src="js/app.js"></script>
</body>
配置

tilesInfo.js

var outputPath='../tiles/';//瓦片图
var urlType='0';
var minZoom=0;//最小
var maxZoom=17;//最大
var centX=113.953162;//初始中心点
var centY=22.532701;//初始中心点
var format='.png';//图片后缀
var epsgCode='3857';
var tileSize=256;
初始化

app.js

var map, view;

function init(){
	var epsg = 'EPSG:' + epsgCode;
	var projection = ol.proj.get(epsg);
	var url = outputPath;
	if(urlType=="0"){
		url += "{z}/{x}/{y}" + format;
	}else if(urlType=="1"){
		url += "{z}/{y}/{x}" + format;}
	else if(urlType=="2"){
		url += "{z}/{x}/{x}_{y}" + format;
	}else if(urlType=="3"){
		url += "{z}/{x}/{-y}" + format;
}
// 初始化显示视图
view = new ol.View({
	center: ol.proj.transform([centX, centY], 'EPSG:4326', epsg),
	projection: projection,
	zoom: maxZoom,
	minZoom: minZoom
});
map = new ol.Map({
    target: 'map',
	controls: ol.control.defaults().extend([
		new ol.control.FullScreen(),
		new ol.control.OverviewMap(),
		new ol.control.ScaleLine(),
			coordinateFormat: ol.coordinate.createStringXY(6),
			projection: ol.proj.get('EPSG:4326'),
			className: 'custom-mouse-position',
			target: document.getElementById('mouse-position')
		}),
	]),
	layers: [
        new ol.layer.Tile({
			source: new ol.source.XYZ({
				minZoom: minZoom,
				maxZoom: maxZoom,
				projection: projection,
				tileSize: tileSize,
				url: url
			})
		})],
	loadTilesWhileAnimating: true,
	target: document.getElementById('map'),
	view: view
	});
}
成功

这里写图片描述

天空影
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
14-openlayers销毁创建好的地图容器
fxshy的博客
05-15 164
14-openlayers销毁创建好的地图容器
OpenLayers3实现地图显示功能
10-14
OpenLayers 3 是一个强大的JavaScript库，用于在Web上创建交互式地图应用。它支持多种地图数据源，包括瓦片地图、WMS服务、WMTS服务等，以及丰富的地图操作和用户交互功能。本教程将详细介绍如何使用OpenLayers 3 ...
openlayers 调用百度地图
08-19
openlayers 调用百度地图
openlayers - 01 初始化地图
最新发布
大兵的猫
05-22 325
vue3+vite+openlayers实现简单地图案例
Openlayers（一） 地图初始化
weixin_49929681的博客
05-20 1001
Openlayers地图初始化代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css"> <scr
openlayer3——地图初始化
weixin_42255789的博客
01-07 278
openlayer3——地图初始化 初始化地图 1、引入文件 项目频繁使用就在index.html文件里引入 2、新增一个带id的标签作为地图容器 3、初始化 that.map = new ol.Map({ target: “attackSiteMap”, layers: [that.untiled], interactions: ol.interaction.defaults(), view: new ol.View({ center: that.mapCenter, projection: new
vue openlayers 初始化地图加载 详解
luoawai的博客
06-03 1065
1. openlayers 简介：openlayers是一个开源免费的js库，用于在网页中实现地图的动态显示和交互。一起看看官方对openlayers的介绍。 OpenLayers使在任何网页中放置动态地图变得容易。它可以显示地图块，矢量从任何源加载的数据和标记。 开发OpenLayers是为了进一步使用各种地理信息。 它是完全免费的开源JavaScript。 2. 话不多说，先看效果 3. 在vue环境下，创建一个Map地图 3.1 npm 安装 openlayers cnpm i
使用OpenLayers3 添加地图鼠标右键菜单
11-22
首先我们得了解 openlayers 的初始化页面的过程。 openlayers 初始化页面过程  openlayers 也是一个前端库，那么它肯定离不开 html 的运用，比如，我们首先需要在页面放置一个显示地图的 html 元素，一个 div
OpenLayers3实现对地图的基本操作
10-14
1. **地图初始化** 在OpenLayers3中，地图的核心是`ol.Map`对象，它是所有地图操作的基础。通过实例化`ol.Map`，我们可以设置地图的容器、图层、视图等属性。例如，以下代码创建了一个新的地图实例，并将地图的显示...
使用openlayers加载离线地图实例
10-06
3. **初始化地图**：在JavaScript中，使用OpenLayers的Map类创建地图实例。指定地图容器的ID，设置地图的中心点和初始分辨率。例如： ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({...
Openlayers绘制地图标注
10-14
// 初始化地图 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: beijing, zoom: 6, minZoom: 2 }) }); // ...
openlayers发布离线地图DEMO
12-11
简易的openlayers发布离线瓦片数据的DEMO，压缩包中包含了一部分地区的街道地图瓦片数据。
openlayers3添加各种地图资源
06-21
webgis开发，文件里包含用openlayers3加载百度地图、天地图、高德地图、google地图等源代码，很全很实用。
二三维离线地图演示系统 V1.0（for OpenLayers3）
11-15
基于openlayers 3开发代码，配合太乐地图下载离线地图使用
OpenLayers地图
weixin_39150852的博客
11-20 1438
搭建本地环境,配置瓦片数据,下载文件并找到相应路径 链接: https://pan.baidu.com/s/1c6nfZodGBzUxyG2PhmFzPA 提取码: p3qi 开启本地服务器 导入本地包 链接: https://pan.baidu.com/s/1qhe4kxwpmez5-7dBVA1S1g 提取码: w6hp 将文件解压放到asset文件夹 在index.htm...
在Vue中使用OpenLayers 0x0 项目初始化
cell的博客
04-24 1866
使用环境 npm install -g @vue/cli 项目初始化 vue init webpack ol-vue 安装依赖 npm i ol -save 初体验 <template> <div id="map"class="map"></div> </template> <script> impor...
openLayers基础地图操作
前端小记
02-14 7079
和高德地图，百度地图，腾讯地图，Arcgis一样，OpenLayers是一个用于开发WebGIS客户端的JavaScript包。
openlayer4加载百度地图
杨传龙的专栏
04-13 2313
var resolutions = []; for(var i=0; i&lt;= 18; i++) { resolutions[i] = Math.pow(2, 18 - i); } var tileGrid = new ol.tilegrid.TileGrid({ origin:[0, 0], resolutions: resolutions }); var bai...
基于openlayers、cesium实现二、三维地图切换
热门推荐
mr_jhc的博客
10-10 1万+
本文介绍如何在普通2d的gis项目里实现地图的二、三维切换。二维地图引擎市面上比较多，比较有代表性的像openlayers、leaflet等。三维地图目前比较流行的开源方案有cesium，它本身是基于webGL实现的地图引擎。 我之前写过一篇总结，是基于vuecli2.0实现的。按步骤一步步实现，问题不大。如果你是用vuecli3搭建的项目，这里有篇文章介绍用vuecli3实现引用cesium。如果要实现二三维地图切换，难点是地图引擎的转换，有个插件已经帮忙实现了这个工作：ol-cesium。 场景需求 好
用vue和openlayers初始化一个地图
02-16
好的，下面是用Vue和OpenLayers初始化一个地图的基本步骤： 1. 在Vue项目中安装OpenLayers： ``` npm install ol ``` 2. 在Vue组件中引入OpenLayers： ```javascript import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; ``` 3. 在Vue组件的`mounted`方法中创建地图： ```javascript mounted() { // 创建地图容器 const mapContainer = this.$refs.map; // 创建地图视图 const view = new View({ center: [0, 0], zoom: 2 }); // 创建地图图层 const layer = new TileLayer({ source: new OSM() }); // 创建地图实例 const map = new Map({ target: mapContainer, layers: [layer], view: view }); } ``` 4. 在Vue组件中添加一个`div`元素作为地图容器： ```html <template> <div ref="map"></div> </template> ``` 5. 运行Vue项目并查看地图效果。 以上就是用Vue和OpenLayers初始化一个地图的基本步骤。当然，根据实际需求可能还需要添加一些其他的功能，比如控件、交互等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值