openlayers 3加载MapServer示例子

最新推荐文章于 2023-06-20 17:28:59 发布
最新推荐文章于 2023-06-20 17:28:59 发布
阅读量930 收藏 1
点赞数
分类专栏： openLayers 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>openlayers 3加载MapServer示例子</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <style type="text/css">
    #map {
        width: 100%;
        height: 600px;
    }
    </style>
</head>
 
<body>
    <div id="map"></div>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" type="text/javascript"></script>
    <script type="text/javascript">
    var layers = [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'http://localhost:8068/VSpaceDataServices/GetVgsData/GetOgcServerData/World_region?request=GetCapabilities&Version=1.3.0&Service=WMS',
                params: {
                    'layers': 'World_region',
                    'MAP': "F:/mapserverData/World_region.map",
                    'TILED': true
                },
                serverType: 'mapserver',
            })
        })
    ];
    var map = new ol.Map({
        target: 'map',
        layers: layers,
        view: new ol.View({
            center: ol.proj.fromLonLat([104, 30]),
            zoom: 2,
            projection: 'EPSG:3857'
        })
    });
    </script>
</body>
</html>

 

绛门人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenLayers入门，OpenLayers地图初始化时如何设置默认缩放级别、设置默认地图中心点、最大缩放级别和最小缩放级别以及默认坐标系
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-28 1150
OpenLayers地图初始化时如何设置默认缩放级别、初始化时设置默认地图中心点、设置最大缩放级别和最小缩放级别，超过缩放级别用户无法再放大和缩小，和设置默认坐标系。
使用mapserver+qgis+openlayers搭建webGIS
热门推荐
xuhaiyan8825的专栏
11-02 1万+
自己今天一步一步做的，总结如下。 0.      检查 检查当前MS4W是否支持OGC WMS服务 使用DOS命令行进入MS4W的安装路径（如D:\ms4w\Apache\cgi-bin）， 执行mapserv -v C:\ms4w\Apache\cgi-bin>mapserv-v MapServerversion 5.2.1 OUTPUT=GIF OUTPUT=PNG OUTPUT=
openlayer6【一】加载ArcGISMapServer服务并进行地理投影坐标转换
WebGIS搬砖工程师
01-07 1103
openlayer6【一】加载ArcGISMapServer服务并进行地理投影坐标转换
Vue+OpenLayers学习系列（七）OpenLayers 加载GeoServer发布的矢量切片地图
Ocean111best的博客
08-02 2695
一、首先要切片 注意首先要下载 GeoServer 的矢量切片插件（参见：https://zhuanlan.zhihu.com/p/62751184） 安装完矢量切片插件后，发布吐槽时，需要勾选如下： 然后找到发布的矢量切片图层 打开预览，并且查看浏览器中的源码，查看它的调用方式（在后面OpenLayers调用它时可以用同样的方式去调用）： 二、OpenLayers 调用 <template> <div> <div id="map" ref
Vue+OpenLayers 访问geoserver加载地图
qq_53273102的博客
11-30 2149
Vue+OpenLayers 访问geoserver加载地图
Vue+OpenLayers学习系列（四）OpenLayers 加载 WMS 地图服务（GeoServer）
Ocean111best的博客
08-02 3478
一、简单介绍 OpenLayers 读取 WMS 服务与OpenLayers 读取 GeoServer 发布的地图服务 类似 二、代码 本次 Demo 主要介绍读取 GeoServer 发布的 WMS 地图服务，并且绘制矢量 <template> <div> <div id="map" ref="rootmap"> </div> <label>Shape type &nbsp;</label&g.
OpenLayers3加载常用控件使用方法详解
10-14
本篇文章将深入讲解如何在OpenLayers 3中加载和使用常用的地图控件。 ### 1. 地图控件概述 地图控件是用户与地图进行交互的界面元素，如缩放、全屏、坐标显示等。OpenLayers 3 内置了许多这样的控件，它们基于`ol....
openlayers 加载天地图示例
02-24
本示例将详细讲解如何使用OpenLayers来加载并操作天地图。 首先，我们需要理解OpenLayers的基本结构。一个OpenLayers地图应用通常由以下几个主要部分组成：地图容器、投影、图层和控制。地图容器是地图显示的地方，...
使用openlayers加载离线地图实例
10-06
3. **初始化地图**：在JavaScript中，使用OpenLayers的Map类创建地图实例。指定地图容器的ID，设置地图的中心点和初始分辨率。例如： ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({...
OpenLayers3加载谷歌地图
05-07
OpenLayers3加载谷歌地图，加载谷歌地图显示，实现效果很好，放大比例尺也能看得清楚。文章链接：https://blog.csdn.net/Gary_888/article/details/89914290
openlayers 4.2 加载百度 高德
08-19
本文将深入探讨如何使用OpenLayers 4.2加载百度地图和高德地图。 首先，让我们了解一下百度地图API。百度地图是中国领先的在线地图服务提供商，提供了一系列API供开发者使用。在OpenLayers 4.2中集成百度地图，你...
geoserver配合openlayers框架加载地图
feinifi的博客
09-20 1372
geoserver地图服务器如果搭建成功，那么会有很多图层示例。这些图层可以用作练手示例。在实际工作中，可能需要我们自己设计地图，自己发布，然后使用。 这里以上一篇最后发布的中国地图为例，采用openlayers框架加载地图。 这里需要我们下载openlayers框架，这个是一个js地图引擎框架，可以很方便的与geoserver提供的地图服务配合使用，而且geoserver中本身也是支持openlayers格式。 下载后的文件，我们要使用到的是一个是ol.css样式，再...
MapServer+OpenLayers5+Vue实现栅格图层数据查询
Oruizn的博客
11-22 1420
1、Mapserver基础与配置 【注意：以下内容默认已经安装了MapServer4.0及以上版本，Web GIS使用Openlayers5作为请求和渲染库】 1.1、MapServer基础 MapServer是一个流行的开源项目，其目的是能够通过网络服务发布用户自定义的地图[1]。 支持显示和查询多种栅格、矢量数据格式； 能够在各种操作系统上运行(Windows, Linux, Mac OS X等)； 支持流行的脚本语言和开发环境(PHP、Python、Perl、Ruby、Java、.NET)
openLayers 加载图层两种方式，动态设置地图中心点，框选获取geojson数据
wwf1225的博客
06-16 2982
mapserver+postgis(postgresql) +openlayers发布地图成功
xuhaiyan8825的专栏
11-04 7666
1. 在windows xp上成功 先来个结果图 渲染很慢，本机都很慢，必须做缓存，下一步用tilecache把切片加进去 2. tilecache.cfg的配置添加如下： [railway] type=WMS url=http://localhost:8080/cgi-bin/xmap.exe layers=bou2_4p.the_geom,chinaMapL,ra
Vue-cli结合openlayers加载ArcGIS Server
~
07-15 903
目录 一、安装Vue-cli 二、创建新项目 三、 1.安装Vue-cli 使用以下命令安装： npm install -g @vue/cli # OR yarn global add @vue/cli 对于vue serve安装全局依赖： npm install -g @vue/cli-service-global 2.创建新项目 使用以下命令创建名为HelloWorld的新项目： vue create hello-world 根据提示选取preset进行安装，也可以通过
openlayers实现坐标转换（通过proj4js）
傲骨雄风的博客
07-01 9702
21.引用proj4js文件 <script type="text/javascript" src="https://cdn.bootcss.com/proj4js/2.5.0/proj4.js"></script> 2.定义投影坐标系统 1)国家2000地理坐标系 proj4.defs("EPSG:4490","+proj=longlat +ellps=GR...
OpenLayers入门，OpenLayers加载GeoServer发布的WMS地图服务作为底图
最新发布
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-20 1302
在此之前我们已经实现了WMTS服务的加载（可以参考:《Openlayers通过计算matrixIds和resolutions方式加载WMTS地图服务，不需要解析WMTSCapabilities文档方式加载WMTS地图服务》），本章写一下如何加载GeoServer发布的WMS地图瓦片到地图上作为底图的功能。
使用leaflet或者openlayers 3 调用MapServer服务最佳实践完整说明
前端-后端学习之路
05-04 4614
最近尝试了很多次，看到网上的很多教程都是版本比较老旧，会出现很多问题。经过数天的实践，现在可以调用成功，遂将步骤记录在此。 为避免以后使用的软件不兼容，首先给出基于window 10的软件版本： - MapServer服务器 3.2.1 ms4w-3.2.1-setup.exe http://www.ms4w.com/QGIS 2.18 osgeo4w-setup-x86_64.exe
openlayers加载arcgisserver
04-06
需要通过ArcGIS Server发布的地图服务将地图数据加载到OpenLayers中。可以通过使用ArcGIS REST API来获取地图服务的URL，然后将该URL作为OpenLayers的图层数据源。加载后，可以使用OpenLayers的API对地图进行操作和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值