map tile compare

地图平铺比较

用于将切片图层与背景卫星图层进行比较的单页 Web 应用程序。

演示

地图瓦片比较演示.mp4

实例

• 苏格兰爱丁堡
• 苏格兰爱丁堡（黄昏）
• 苏格兰布罗克斯本
• 荷兰克特尔米尔
• 马克·瓦登，荷兰
• 德国科布伦茨
• 德国/荷兰边境

安装应用程序

克隆此存储库后，运行：

$ cd map-tile-compare
$ npm install
$ npm run build
$ npm run serve

这应该启动一个本地主机服务器，通常是http://localhost:5000 。

为了加载页面，您需要将配置文件的 URL 附加到该 URL。

 http://localhost:5000/#https://example.com/path/to/config.json

创建地图配置

地图数据是存储在 URL 哈希中的压缩 JSON 字符串。

在网站上托管以下 JSON 文件并根据您的选择更新每个属性：

{
  "name" : " London " ,
  "beforeStyle" : " mapbox://styles/mapboxUsername/styleId " ,
  "beforeStyleAccessToken" : " xx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxx-xxxxxxxx " ,
  "beforeStyleBeforeLayerId" : " tunnel-street-minor-low " ,
  "sourceTiles" : " https://example.com/tiles/{z}/{x}/{y}.png " ,
  "sourceTileScheme" : " tms " ,
  "sourceTileSize" : 256 ,
  "sourceMinZoom" : 9 ,
  "sourceMaxZoom" : 15 ,
  "sourceBounds" : [ -0.234 , 51.454 , -0.025 , 51.562 ],
  "referencePhotoImageUrl" : " https://example.com/previewImage.jpg "
}

下表解释了每个属性的含义：

财产	描述
name	地图的名称。这显示在启动屏幕上。
beforeStyle	“之前”地图的地图框样式 url，通常为“卫星”样式。
beforeStyleAccessToken	“之前”地图样式的地图框访问令牌。
beforeStyleBeforeLayerId	“之前”地图样式中要插入“之后”地图图层的图层 ID。它通常是紧邻栅格图层之上的图层。
sourceTiles	地图图块的 URL。
sourceTileScheme	地图图块的架构。 "xyz"或"tms" 。
sourceTileSize	地图图块的图像大小（以像素为单位）。
sourceMinZoom	地图图块的最小缩放级别。
sourceMaxZoom	地图图块的最大缩放级别。
sourceBounds	地图图块的边界框。顺序为：左经度、下纬度、右经度、上纬度。
referencePhotoImageUrl	加载地图之前显示的预览图像的 URL。

创建 JSON 后，您有两个选择：

• 将 JSON 存储在外部主机上。
• 将 JSON 文件存储在public/目录中并运行npm run build 。然后可以通过http://localhost:5000/yourConfig.json访问该文件。

获取 JSON 的 URL 并将其附加到应用程序的主机 URL。

 http://locahost:5000/#http://localhost/5000/config.json

发展

$ npm run dev

棉绒

$ npm run lint

测试

要运行端到端测试，请在一个控制台中运行：

$ npm run build:test
$ npm run serve

build:test将使用源映射构建应用程序，这将允许稍后进行代码覆盖。

然后在不同的控制台中运行：

$ export CYPRESS_MAP_TILE_COMPARE_HOST= ' http://localhost:5000/ '
$ npm run test:e2e

代码覆盖率会自动生成，可以在coverage/中查看。

要查看浏览器中实际运行的 cypress 测试，请运行：

$ npx cypress open