地图js技术调研

  • 地图数据格式规范:geojson http://geojson.org/
    类型包括PointLineStringPolygonMultiPointMultiLineString,
    and
    MultiPolygon等

    geojson
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
      "type""Feature",
      "geometry":
    {
        "type""Point",
        "coordinates":
    [125.6, 10.1]
      },
      "properties":
    {
        "name""Dinagat
    Islands"
      }
    }
一、开源Map api( 开源Map平台调研,主要集中在自定义程度、3d地图能力 (梦佳))
参考链接
  1. OpenLayers :http://openlayers.org/en/v3.2.0/examples/?q=3    — mapping api
  2. cesium:http://cesiumjs.org/Cesium/Apps/Sandcastle/gallery/Imagery%20Layers%20Manipulation.html  
二、可视化
  1. 轨迹墙可视化
  2. 交通 vast08
  • 地图api集合
  name link api

coordinate

system

intro demo 3d vpn open source
1 Mapbox /api/mapbox https://www.mapbox.com/mapbox-gl-js/api/#geojsonsource WGS84

mapbox gl js

动画,画线标记,进度条,3d什么都能实现

mapbox有个库turf.js 用来地理空间分析,可以计算距离面积等

d3+mapbox:http://dev.geosprocket.com/d3/finder/

https://www.mapbox.com/mapbox.js/example/v1.0.0/

https://www.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/

https://bl.ocks.org/devTristan/4070d0d33a1d749c62c64cafa9fc7dab

https://www.mapbox.com/blog/shading-lighting-3d-features/

https://gist.github.com/devTristan/4070d0d33a1d749c62c64cafa9fc7dab

  yes
2

Cesium AGI

http://cesiumjs.org/index.html http://cesiumjs.org/tutorials/Geometry-and-Appearances/

wgs84 和 笛卡尔空间坐标系

http://www.lxway.net/481891961.html

Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制2d3d图形,高亮区域,并提供良好的触摸支持,且支持绝大多数的浏览器和mobile。

中文网站介绍:

http://www.open-open.com/lib/view/open1427341416418.html

https://cesiumjs.org/demos.html     yes
3

Esri ArcGIS

https://developers.arcgis.com/javascript/ https://developers.arcgis.com/javascript/latest/api-reference/index.html WGS 1984 Web 墨卡托

实现3d地球简单,3d支持很好,可视化方面表现良好,有挺多例子的。不太开源, 开发和教育方面可以免费使用,和谷歌必应地图api可以放在专业付费api的系列里。

例子里显示和mapbox gl js的3d支持功能差不多,动画,画线标记,进度条,3d简单模型什么都能实现。而且还有3D地形图。也支持webgl和three.js

https://developers.arcgis.com/en/#visualization-demo

 

 

https://developers.arcgis.com/labs/design/create-a-web-scene/

https://developers.arcgis.com/javascript/latest/sample-code/scene-environment/index.html

https://developers.arcgis.com/javascript/latest/sample-code/visualization-trees-realistic/index.html

https://developers.arcgis.com/javascript/latest/sample-code/visualization-multivariate-3d/index.html

https://developers.arcgis.com/javascript/latest/sample-code/symbols-points-3d/index.html

https://developers.arcgis.com/javascript/latest/sample-code/visualization-buildings-3d/index.html

need nonono
4 OpenStreeMap  /api/openstreetmap   WGS84

OpenStreetMap是一款开源地图服务, 它的运营模式类似与维基百科,由志愿者们免费提供地图信息。当然在中国的我们不能提供给他们没有偏移的地理数据。他的兴起就是对谷歌这类地图垄断者的挑战。

The OSM Buildings project 使用leafletjs和osm buildings三维建筑模型

http://wiki.openstreetmap.org/wiki/List_of_OSM_based_Services https://osmbuildings.org/?lat=52.52087&lon=13.41148&zoom=15.2&rotation=0&tilt=30 openstreetmap
buildings
  yes
  Leaflet http://leafletjs.com/ http://leafletjs.com/reference-1.0.3.html  Supports the Chinese BD09 and GCJ02

38kb 开源轻量级移动端友好的JS地图库。在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。

Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务,数据提供,数据格式,地理编码,路线和路线搜索,地图控件和交互等类型的插件共有140多个。

很多地图api都对其友好,有开放接口。

使用:图形线段标记,svg,canvas等都支持良好。但是没有看到直接支持3D的,no webgl,有文章说结合three.js来进行3D地图开发

      yes
Leaflet+Cesium = WebGL Earth 2 http://blog.klokantech.com/2014/07/webgl-earth-2-leaflet-compatible.html http://examples.webglearth.com/#satellite

两者对比leaflets vs openlayers

http://ivansanchez.github.io/leaflet-vs-openlayers-slides/#/

         
 

OpenLayers

https://openlayers.org/

https://openlayers.org/en/latest/apidoc/

OpenLayers 是个开源的js库,能够轻松将一个动态生成的地图放在任何网页里。绘制地图使用osm的开源数据,some webgl support。它能够展示加载自任何源的地图块,矢量数据和标记。

社区强大,很多人使用,例子很多,问题很多都能搜到答案。

http://openlayers.org/en/v3.2.0/examples/ 没有找到3d的     yes
  OpenLayers3+Cesium https://cesiumjs.org/2014/11/18/OpenLayers3-adds-Cesium/              
5

CartoDB

https://carto.com/

https://carto.com/docs/carto-engine/carto-js/getting-started

https://carto.com/docs/carto-engine/carto-js/getting-started#creating-visualizations-at-runtime

 

CartoDB是一款开源网络应用程序和交互式地图制作工具,以提供“一键式制图”功能闻名,也就是分析任何你上传的数据、自动制作地图以显示相关信息, 对于缺乏编程基础又想尝试可视化的小伙伴而言是一个福音。教程 https://github.com/joeyklee/cartodb-van311-example

carto.js 可以将网站生成的可视化结果(通常会是一个vis.json的文件)导入自己网页. 可以使用它提供的地图也可以使用自己的地图作为地图层。

也可以进行代码编写,这样就不需要使用网站编辑了。例子比较少http://bl.ocks.org/ramiroaznar/234f8a4f9a68106fcf8919de2885536c

http://bl.ocks.org/rochoa/c24a22c82b3a9c373a9a

https://carto.com/gallery/ http://pluto.carto.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/embed_map   yes
6 MapQuest /category/all/apis?keyword=mapquest

devblog

https://devblog.mapquest.com/

MapQuest.js, MapQuest-GL.js都是beta版本

https://developer.mapquest.com/documentation/mapquest-js/v0.2/examples/basic-map/

 

免费的data主要来自openstreemap,

MapQuest是个网络地图程序http://www.baike.com/wiki/mapquest&prd=button_doc_entry

交通状况路线方面厉害,但是感觉3d的支持不是很好

http://demos.mapquest.com/     两个版本,一个企业付费一个开源免费
7 Mapzen(Tangram) https://mapzen.com/documentation/tangram/Tangram-Overview/ https://mapzen.com/documentation/ EPSG:3857 Tangram 是个开源3d渲染引擎,主要是为了绘制地图。使用opengl 图形api。Tangram-js是个在浏览器端使用的js库。使用webgl快速构建绘制向量和栅格地图数据。有面向leaflet的接口,视为leaflet的插件。

https://mapzen.com/documentation/tangram/Demos/ demo不是很多,demo里的3D建筑模型也只是局部地区的,可能是数据源的关系吧。

https://github.com/tangrams/terrain-demos

     

参考链接:https://www.programmableweb.com/news/top-10-mapping-apis-google-maps-microsoft-bing-maps-and-mapquest/analysis/2015/02/23

                  https://mappinggis.com/2015/03/las-mejores-apis-javascript-para-webmapping/

name
link
api

coordinate

system

intro
demo
3d
vpn
open source
1 Mapbox /api/mapbox https://www.mapbox.com/mapbox-gl-js/api/#geojsonsource WGS84

mapbox gl js

动画,画线标记,进度条,3d什么都能实现

https://www.mapbox.com/mapbox.js/example/v1.0.0/

https://www.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/

https://bl.ocks.org/devTristan/4070d0d33a1d749c62c64cafa9fc7dab

https://www.mapbox.com/blog/shading-lighting-3d-features/

https://gist.github.com/devTristan/4070d0d33a1d749c62c64cafa9fc7dab

  yes
2

OpenLayers

https://openlayers.org/

https://openlayers.org/en/latest/apidoc/

  js lib,绘制地图使用osm的开源数据,some webgl support, http://openlayers.org/en/v3.2.0/examples/ 没有找到3d的     yes
3 OpenStreeMap  /api/openstreetmap   WGS84 geographic data http://wiki.openstreetmap.org/wiki/List_of_OSM_based_Services     yes
4 Mapzen(Tangram)   https://mapzen.com/documentation/            
5

Esri ArcGIS

/category/all/apis?keyword=arcgis https://developers.arcgis.com/javascript/   实现3d地球简单,3d支持很好,不太开源

https://developers.arcgis.com/en/#visualization-demo

 

https://developers.arcgis.com/labs/design/create-a-web-scene/

https://developers.arcgis.com/javascript/latest/sample-code/scene-environment/index.html

need nonono
6

CartoDB

https://carto.com/ https://carto.com/docs/carto-engine/carto-js/getting-started   可视化很强大,但是不适合我们开发,可以上传数据到他们的网站直接展示, 教程https://github.com/joeyklee/cartodb-van311-example https://carto.com/gallery/     yes
7 MapQuest /category/all/apis?keyword=mapquest     免费的data主要来自openstreemap http://demos.mapquest.com/     两个版本,一个企业付费一个开源免费
8 Leaflet http://leafletjs.com/    Supports the Chinese BD09 and GCJ02 38kb js lib, mobile-friendly. no webgl       yes
9

Cesium AGI

http://cesiumjs.org/index.html http://cesiumjs.org/tutorials/Geometry-and-Appearances/   3d蛮强大,可以引入开源地图资源,lib https://cesiumjs.org/demos.html      
10 Geobrower 3D http://geobrowser3d.com/              
11

Microsoft Bing Maps

http://www.microsoft.com/maps/Default.aspx     source+lib

转载自:https://blog.csdn.net/icefireelf/article/details/73650315

You may also like...