Openlayers之初始化地图

最新推荐文章于 2024-06-21 10:36:22 发布
最新推荐文章于 2024-06-21 10:36:22 发布
阅读量4k 收藏 3
点赞数
分类专栏： OpenLayers3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SmileCoffin/article/details/54632189
版权

1、使用VS新建一个Web空白网站，然后将Openlayers3的开发库和样式文件复制到网站的根目录下；


2、新建一个HTML文档，并引入ol.js和ol.css；

3、在body标签中新建一个div作为地图加载的容器，然后设置其id为“map”；

4、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>加载并显示OSM地图</title>
    <link href="../css/ol.css" rel="stylesheet" />
    <script src="../lib/ol/ol.js"></script>
最低0.47元/天 解锁文章
桃李不言_下自成蹊
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layer open弹出空白页面解决方法
IT_NQR的博客
10-28 1800
情况说明：当同事用笔记本访问服务器时在列表打开一个窗口时，经常出现空白页面，但是用台式机访问时则是正常显示页面。笔记本出现空白页面时，每次需要用鼠标点击一下弹出的窗口才会正常显示页面。猜测是笔记本屏幕或分辨率太低，layer open的高度无法自适应。 解决方法：1：当页面加载完成后，用js写一个自动触发方法，模拟鼠标点击窗口的某个标签。 2：获取layer open的iframe的css高度，然后把高度加1。最后再把新高度赋值给iframe 推荐使用“代码2” ...
Openlayers---创建地图
weshmily前端
07-15 1149
写在前面 公司基于以前项目做升级,以前我是用openlayer3写的,现在openlayers都升级到5了,不由得感叹学不动了.话虽说但是还的学,不学谁养我呀?评论举个手,我就跟你走.,哈哈哈闲话不多说,基于我们公司升级的项目的地图部分给大家做一下讲解. 安装 我们公司前是vue进行编写的,前端插件包也是用npm管理的所以 npm install ol 直接上代码 <template&...
React项目-OpenLayers地图初始化
最新发布
StupidlyGrass的博客
06-21 415
在src/创建一个名为router.js的文件（文件名称和位置可以自己规划）（1）create-react-app创建项目；（3）OpenLayers版本：6.15.1；（2）函数组件（CesiumMapFunction.js）（2）React版本：18.3.1；（5）Node版本：14.21.3。（3）类组件（CesiumMapClass.js）（2）index.js文件配置。（1）Header.js配置。（3）App.js文件配置。
openlayer地图大小变化后地图白屏不显示
weixin_44940364的博客
02-22 1843
openlayer白屏
Openlayers生成底图和控件(1)
qq_42272508的博客
01-15 289
Openlayers生成地理底图 web地图有两种投影坐标系： EPSG:4326 (WGS84)，EPSG:3857 (伪墨卡托投影) var map=new ol.Map({ // 设置地图图层 layers: [ // 创建一个使用Open Street Map地图源的瓦片图层 new ...
Openlayers+天地图在页面上显示（初始化）（使用vue3）
m0_57816620的博客
10-18 2040
使用openlayers+天地图完成初始化页面的显示
Openlayers之地图的基本操作
SmileCoffin的博客
02-04 5717
1、新建一个html页面，引入ol.js和ol.css文件，然后在body中创建一个Div标签和4个Button按钮，用来实现地图的放大、缩小、平移等功能； 2、代码实现 #menu { float : left; position : absolute;
使用openlayers加载离线地图实例
10-06
3. **初始化地图**：在JavaScript中，使用OpenLayers的Map类创建地图实例。指定地图容器的ID，设置地图的中心点和初始分辨率。例如： ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({...
openlayers加载瓦片地图并手动标记坐标点
04-29
2. 初始化地图对象：接着，使用OpenLayers创建地图实例，指定地图容器、投影类型（通常使用 EPSG:3857，也称为 Web Mercator）和初始视图。 ```javascript var map = new ol.Map({ target: 'map', view: new ol....
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-06
- JavaScript: 这是核心部分，包含了OpenLayers的配置和初始化代码。这部分代码将定义源、层和地图，并可能包含交互事件的处理函数。 4. **运行DEMO**： 解压下载的"openLayers简易离线地图Demo"文件，打开其中的...
openlayers5加载天地图影像.zip
06-23
2. **创建地图实例**：在JavaScript文件（如app.js）中，初始化OpenLayers地图实例，设置地图容器、视图和投影。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [116.404, ...
vue-openlayers中初始地图加载
猪猪侠的博客
02-25 540
Vue引入openlayers的命令 npm install ol template> <div id="map" style="width: 100%;height: 100%"> </div> </template> <script> import TileLayer from "ol/layer/Tile"; import View from "ol/View"; import {XYZ} from "ol/source"; impo
openlayers缩放地图切换图层
qq_41560089的博客
09-11 1527
openlayers缩放地图切换地图展示
Openlayer地图出不来或地图出来了，但是初始没有居中显示
netlinking的专栏
01-14 2199
<br />主要原因是JSP页面头这句话，去除这句话，地图显示正常：<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /> <br />地图平移固定在DIV的范围设置语句：<br />var bounds = new OpenLayers.Bounds(<br />                114.3959455, 34.18611045,<br /> 
OpenLayers实战，OpenLayers预加载瓦片，解决移动地图或缩放地图时出现空白瓦片的问题
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-17 1968
OpenLayers默认加载地图并不会预加载不同层级的瓦片，所以我们在进行地图缩放操作或者移动地图位置时会出现瓦片还没加载出来显示空白瓦片的问题，其实很简单，只需要设置图层的preload参数即可实现瓦片的预加载，解决没加载出来显示空白瓦片的问题。
openlayer 瓦片缩放空白的问题
qq_39330397的博客
06-15 405
openlayer旧版本加载瓦片服务时，缩放时会有空白的效果。7.1以后通过属性preload: Infinity可以解决此问题。
OpenLayers + SuperMap iClient for OpenLayers 加载超图地图服务 4326 3857 rest
josiecici的博客
01-26 5957
服务地址：https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China 服务分类：地图服务 服务坐标系：3857 layers内有子图层： 服务地址：https://iserver.supermap.io/iserver/services/map-world/rest/maps/World 服务坐标系：4326 同样的layers内也有子图层，截图省略。。。 加载代码，这里我的代码是从超图官网获取的： v
用vue和openlayers初始化一个地图
02-16
好的，下面是用Vue和OpenLayers初始化一个地图的基本步骤： 1. 在Vue项目中安装OpenLayers： ``` npm install ol ``` 2. 在Vue组件中引入OpenLayers： ```javascript import 'ol/ol.css'; import Map from...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值