iD - OpenStreetMap的友好的JavaScript编辑器

iD是一个简洁的JavaScript OpenStreetMap编辑器,支持Chrome、Firefox、Safari、Opera、Edge和IE11等现代桌面浏览器。虽然目前不适用于移动设备,但计划增加此功能。数据渲染通过d3.js实现。安装iD需要Node.js 4或更高版本,并且在npm安装时避免全局安装以防止找不到'module glob'的错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基础知识

iD is a JavaScript OpenStreetMap editor.
It’s intentionally simple. It lets you do the most basic tasks while not breaking other people’s data.
It supports all popular modern desktop browsers: Chrome, Firefox, Safari, Opera, Edge, and IE11.
iD is not yet designed for mobile browsers, but this is something we hope to add!
Data is rendered with d3.js.

前提条件

Node.js version 4 or newer

安装

git clone https://github.com/openstreetmap/iD.git

cd iD

npm install cnpm --registry=https://registry.npm.taobao.org

make

npm run-script web  #打开web服务 端口号为8080 http://localhost:8080/

注意事项
1、如果提示
错误提示

**

就采用 npm install phantomjs cnpm –registry=https://registry.npm.taobao.org 安装相应模块

**

2、npm安装一定不要用-g(全局安装)如果采用(-g)参数的话会报错 Cannot find module ‘glob’

### 使用 Qt 进行地图开发 在 Qt 中开发地图应用程序,通常会选择集成现有的地图服务提供商 API 来简化开发过程。对于希望快速上手的地图应用开发者来说,OpenStreetMap 是一个不错的选择[^1]。 #### 安装必要组件 为了开始地图开发工作,在本地环境中需先安装好最新版本的 Qt 及其附加模块,特别是用于网络请求处理和支持 WebKit 组件渲染网页内容的部分。 #### 创建项目结构并配置文件 创建一个新的 Qt Widgets Application 工程,并修改 `.pro` 文件来引入所需的库支持: ```qmake QT += core gui webkitwidgets network ``` #### 编写界面布局代码 编辑 `mainwindow.ui` 文件定义主窗口UI设计,放置一个 QWebView 控件作为显示地图区域容器。 #### 加载在线地图数据源 通过 JavaScript 接口调用 OpenStreetMap 提供的服务加载地理信息到页面内。下面给出了一段简单的 HTML 片段以及对应的初始化函数设置中心坐标点和缩放级别。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Simple Map</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV4f1FfaPk+g0aPdnpUQlOrTJAjnmyyFoJYF3kwDcNAdr+w==" crossorigin=""></script> </head> <body style="margin:0; padding:0;"> <div id="mapid" style="width: 100%; height: 100vh;"></div> <script type="text/javascript"> var mymap = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, }).addTo(mymap); </script> </body> </html> ``` 这段HTML片段被保存为资源文件的一部分,并由 C++端负责将其注入至 WebView 显示出来。 #### 设置 WebView 并加载自定义 URL 最后一步是在 C++ 程序里完成 WebView 的基本属性设定并将上述准备好的 HTML 文档地址传递给它进行呈现。 ```cpp #include "MainWindow.h" // 构造函数内部... ui->setupUi(this); QString mapHtmlPath = ":/maps/map.html"; // 假设已将上面的HTML存入资源系统中 ui->webView->load(QUrl(mapHtmlPath)); ``` 以上就是基于 Qt 和 OpenStreetMap 实现的一个基础版桌面地图查看器案例介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值