百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

基于MapBox源码在内网中加载离线卫星地图的方法

bigegpt 2024-10-09 08:10 8 浏览

1. 概述

前段时间,给大家介绍了WeServer在内网中离线发布全国影像及高程DEM数据并在OsgEarth中调用的方法和在开源三维地球Cesium中如何离线加载卫星影像及高程DEM数据的方法。

其中,OsgEarth是一个基于桌面端的三维地球开源平台,而Cesium则是基于Web端的三维地球开源平台。

同样地,我们也可以基于二维的开源平台并结合WeServer在内网中离线发布全国卫星影像。

关于二维的WebGIS开源平台,我们推荐OpenLayers和MapBox两种。

其中,二维开源平台OpenLayers在内网中离线加载卫星影像的方法已经作过分享了,现在我们再来分享一下MapBox在内网中加载显示WeServer发布的离线卫星影像的方法。

2. 准备工作

在开始之前,需要先准备离线数据发布软件、离线卫星影像示例数据、MapBox开发源码和本机IP地址等。

地图发布软件:需要在内网发布离线卫星影像,请确保地图发布服务中间件版本为4.0.5以上,如果低于该版本,请通过私信回复"中间件"免费获取最新版本安装包,也可以直接在官网下载。

离线示例数据:本文提供的离线示例数据包括墨卡托投影和WGS84投影的卫星影像与地名标签数据,由于这里主要是为了进行功能性演示,因此只提示前10级影像数据。


另外,由于MapBox默认仅支持墨卡托投影数据,不支持WGS84坐标系经纬度正投的影像数据,因此这里只需要从百度网盘的共享数据中下载"SatelliteForMercator"和"LabelFroMercator"文件夹中的数据即可。

私信“示例数据”获取示例数据。

MapBox开发源码:MapBox源码可以从MapBox官网下载最新版,但由于下载的方法略微有点复杂(后面会介绍方法),因此也可以通过私信回复"MapBox"获取MapBox开发源码文件。

本机IP地址:由于会用到本机IP作为访问地址,可以通过在DOS窗口中运行"IPConfig"命令或其它方式获取本机IP地址以备用,如下图所示。


3. MapBox源码下载

由于MapBox的源码下载略微有点复杂,我们有必要在这里为大家分享一下它的下载的方法,如果你已经从百度网盘下载了MapBox源码,请略过本节。

首先打开MapBox官网,然后点击"Documentation\Mapbox GL js",如下图所示。


在显示的页面点击"Install"按钮,如下图所示。


从显示的提示可以看出,这里下载代码需要执行一个CMD命令"npm install mapbox-gl --save"进行下载,如下图所示。


打开CMD命令窗口,并进入到需要下载保存的目录路径,这里我们将下载内容保存到"F:\MapBox"目录,如下图所示。


执行下载后的结果,如下图所示。


CMD命令窗口中的警告信息提示缺少"package.json"文件,我们可以通过执行"npm init -f"命令,将会在目录中自动生成该文件,如下图所示。



成功生成了"package.json"文件之后,又提示缺少了描述信息和"repository"字段,如下图所示。


我们打开"package.json"文件,发现"description"字段为空,且没有"repository"字段,如下图所示。


为了避免出现警告信息,可以为"description"添加描述内容,并添加"repository"字段。

"repository"用于指定你的代码存放的地方,这个对希望贡献的人有帮助。

如果git仓库在github上,那么npm docs命令能找到你,如下所示。

"repository" :

{ "type" : "git"

, "url" : "http://github.com/isaacs/npm.git"

}

URL应该是公开的(即便是只读的)能直接被未经过修改的版本控制程序处理的url。不应该是一个html的项目页面,因为它是给计算机看的。

这里,我们只需要将项目设置为私有即可,即在文档中添加"private"字段并设置为"true",如下图所示。


在"package.json"文件中设置完成并保存后,我们再次执行"npm install mapbox-gl --save"命令,就不会再显示警告信息了,如下图所示。


以上就是MapBox源码下载的全过程,后面我们会专门说明如何在IIS中部署MapBox源码的方法。

4. WGS84卫星影像离线发布

软件的安装与离线卫星影像的发布方法,请参阅"全球卫星影像离线发布神器《水经注地图发布服务中间件4.0》正式发布"一文。

由于MapBox是二维应用,因此这里不需要发布高程。

但需要注意的是,要将投影设置为"Web_Mercator",且确保设置的端口号没有被其它程序占用,如下图所示。


安装完成后,会显示如下图所示信息。


打开Windows任务管理器,如果WeServer服务的状态显示"正在运行",则说明中间件服务安装成功并已经正常运行,如下图所示。


WeServer成功发布后,接下来我们需要将下载的MapBox在本地进行部署。

5. MapBox源码的本地离线部署

我们通过IIS对MapBox源码进行本地化部署,如果你对IIS网站部署非常熟悉,请略过本节。

MapBox源码解压之后,如下图所示。


在Windows控制面板中打开"管理工具",如下图所示。


打开IIS网站管理器,如下图所示。


在"网站"树节点单击鼠标右键,然后选择"添加网站"菜单,如下图所示。


网站名称可以任意取,这里我们取名为"MapBox",物理路径设置为MapBox源码的"node_modules\mapbox-gl"文件目录,并将端口号设置为没有被其它程序或Web站点所占用的端口号,这里默认为"80",如下图所示。


配置完成并点击"确定"按钮之后完成MapBox源码的本地网站配置,如下图所示。


现在,MapBox源码在本地就离线部署好了,但还需要新建一个卫星影像的离线加载显示页面才可以进行访问。

6. 卫星影像的离线加载显示

在MapBox源码目录"F:\MapBox\node_modules\mapbox-gl"中新建一个"SampleForMercator.html"Web页面页文件,如下图所示。


在"SampleForMercator.html"网站页面文件中添加卫星影像与地名标签加载代码,如下图所示。


通过关注私信回复"MapBox"可获取MapBox源码文件,解压后在目录中,已经为你提供了"SampleForMercator.html"源码文件,但需要特别注意的是需要将IP地址改为本机IP地址,前文我们已经提到过了获取本机IP的方法。

打开网址"http://192.168.0.5/SampleForMercator.html",可以显示加载本地影像如下图所示。


至此,MapBox在内网中加载显示WeServer发布的离线地图的目的就达到了。

这样一来,当前这台电脑在内网中就是一台标准地图服务器,内网中任何一台电脑都可以通过打开网址离线查看地图,但需要注意的是需要将网址中的IP改为本机IP地址。

7. 总结

最后再次申明,由于本文中提供的数据为示例数据,旨在说明地图发布服务中间件的内网离线发布功能,因此卫星影像数据和地名标签都仅仅提供全球前10级数据。

你可以通过私信回复"免费数据",领取一个省的高清卫星影像数据,然后更新到对应的数据目录即可!

相关推荐

最全的MySQL总结,助你向阿里“开炮”(面试题+笔记+思维图)

前言作为一名编程人员,对MySQL一定不会陌生,尤其是互联网行业,对MySQL的使用是比较多的。对于求职者来说,MySQL又是面试中一定会问到的重点,很多人拥有大厂梦,却因为MySQL败下阵来。实际上...

Redis数据库从入门到精通(redis数据库设计)

目录一、常见的非关系型数据库NOSQL分类二、了解Redis三、Redis的单节点安装教程四、Redis的常用命令1、Help帮助命令2、SET命令3、过期命令4、查找键命令5、操作键命令6、GET命...

netcore 急速接入第三方登录,不看后悔

新年新气象,趁着新年的喜庆,肝了十来天,终于发了第一版,希望大家喜欢。如果有不喜欢看文字的童鞋,可以直接看下面的地址体验一下:https://oauthlogin.net/前言此次带来得这个小项目是...

精选 30 个 C++ 面试题(含解析)(c++面试题和答案汇总)

大家好,我是柠檬哥,专注编程知识分享。欢迎关注@程序员柠檬橙,编程路上不迷路,私信发送以下关键字获取编程资源:发送1024打包下载10个G编程资源学习资料发送001获取阿里大神LeetCode...

Oracle 12c系列(一)|多租户容器数据库

作者杨禹航出品沃趣技术Oracle12.1发布至今已有多年,但国内Oracle12C的用户并不多,随着12.2在去年的发布,选择安装Oracle12c的客户量明显增加,在接下来的几年中,Or...

flutter系列之:UI layout简介(flutter-ui-nice)

简介对于一个前端框架来说,除了各个组件之外,最重要的就是将这些组件进行连接的布局了。布局的英文名叫做layout,就是用来描述如何将组件进行摆放的一个约束。在flutter中,基本上所有的对象都是wi...

Flutter 分页功能表格控件(flutter 列表)

老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来。PaginatedDataTablePaginatedDataTable是一个带分页功能的DataTable,...

Flutter | 使用BottomNavigationBar快速构建底部导航

平时我们在使用app时经常会看到底部导航栏,而在flutter中它的实现也较为简单.需要用到的组件:BottomNavigationBar导航栏的主体BottomNavigationBarI...

Android中的数据库和本地存储在Flutter中是怎样实现的

如何使用SharedPreferences?在Android中,你可以使用SharedPreferencesAPI来存储少量的键值对。在Flutter中,使用Shared_Pref...

Flet,一个Flutter应用的实用Python库!

▼Flet:用Python轻松构建跨平台应用!在纷繁复杂的Python框架中,Flet宛如一缕清风,为开发者带来极致的跨平台应用开发体验。它用最简单的Python代码,帮你实现移动端、桌面端...

flutter系列之:做一个图像滤镜(flutter photo)

简介很多时候,我们需要一些特效功能,比如给图片做个滤镜什么的,如果是h5页面,那么我们可以很容易的通过css滤镜来实现这个功能。那么如果在flutter中,如果要实现这样的滤镜功能应该怎么处理呢?一起...

flutter软件开发笔记20-flutter web开发

flutterweb开发优势比较多,采用统一的语言,就能开发不同类型的软件,在web开发中,特别是后台式软件中,相比传统的html5开发,更高效,有点像c++编程的方式,把web设计出来了。一...

Flutter实战-请求封装(五)之设置抓包Proxy

用了两年的flutter,有了一些心得,不虚头巴脑,只求实战有用,以供学习或使用flutter的小伙伴参考,学习尚浅,如有不正确的地方还望各路大神指正,以免误人子弟,在此拜谢~(原创不易,转发请标注来...

为什么不在 Flutter 中使用全局变量来管理状态

我相信没有人用全局变量来管理Flutter应用程序的状态。毫无疑问,我们的Flutter应用程序需要状态管理包或Flutter的基本小部件(例如InheritedWidget或St...

Flutter 攻略(Dart基本数据类型,变量 整理 2)

代码运行从main方法开始voidmain(){print("hellodart");}变量与常量var声明变量未初始化变量为nullvarc;//未初始化print(c)...