地图js技术调研

• 地图数据格式规范：geojson http://geojson.org/
  类型包括Point, LineString, Polygon, MultiPoint, MultiLineString, andMultiPolygon等

  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"

    }

  }

• 地图自定义方面，百度地图要优于高德，http://developer.baidu.com/map/custom/ 通过在线编辑器可以对地图背景、道路等要素进行自定义
• 百度mapv，数据可视化 http://nikai.us/weblog/map-visualization/
  （待完善）

• 3d地图可视化，目前国内的地图开放平台还没有3d视图，智能在2d上做3d视觉转换
  需要对2d－>3d显示做相关调研 （基于地图的可视化组件cesium http://cesiumjs.org/）
  
  

  name

  link

  api

  intro

  demo

  3d

  vpn

  open source

  OpenLayers

  /api/openlayers js libhttp://openlayers.org/en/v3.2.0/examples/  yesOpenStreeMap /api/openstreetmap geographic datahttp://wiki.openstreetmap.org/wiki/List_of_OSM_based_Services  yesMapQuest/category/all/apis?keyword=mapquest 免费的data主要来自openstreemaphttp://demos.mapquest.com/  两个版本，一个企业付费一个开源免费Mapbox/api/mapbox mapbox gl jshttps://www.mapbox.com/mapbox.js/example/v1.0.0/  yes

  CartoDB

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

  Esri ArcGIS

  /category/all/apis?keyword=arcgishttps://developers.arcgis.com/javascript/实现地球简单https://developers.arcgis.com/en/#visualization-demohttps://developers.arcgis.com/labs/design/create-a-web-scene/neednononoLeaflethttp://leafletjs.com/ js lib    

  Cesium AGI

  http://cesiumjs.org/index.htmlhttp://cesiumjs.org/tutorials/Geometry-and-Appearances/3d蛮强大，可以引入开源地图资源，libhttps://cesiumjs.org/demos.html   Geobrower 3Dhttp://geobrowser3d.com/      

  Microsoft Bing Maps

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

  
  
  

一、开源Map api（ 开源Map平台调研，主要集中在自定义程度、3d地图能力 （梦佳））

参考链接

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

 

基本介绍

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集合

 namelinkapi

coordinate

system

introdemo3dvpnopen source1Mapbox/api/mapboxhttps://www.mapbox.com/mapbox-gl-js/api/#geojsonsourceWGS84

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

 yes2

Cesium AGI

http://cesiumjs.org/index.htmlhttp://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.cnblogs.com/laixiangran/p/4984522.html

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

https://cesiumjs.org/demos.html  yes3

Esri ArcGIS

https://developers.arcgis.com/javascript/https://developers.arcgis.com/javascript/latest/api-reference/index.htmlWGS 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

neednonono4OpenStreeMap /api/openstreetmap WGS84

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

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

http://wiki.openstreetmap.org/wiki/List_of_OSM_based_Serviceshttps://osmbuildings.org/?lat=52.52087&lon=13.41148&zoom=15.2&rotation=0&tilt=30 openstreetmap buildings yes Leaflethttp://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地图开发

   yesLeaflet+Cesium = WebGL Earth 2http://blog.klokantech.com/2014/07/webgl-earth-2-leaflet-compatible.htmlhttp://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+Cesiumhttps://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 yes6MapQuest/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/  两个版本，一个企业付费一个开源免费7Mapzen（Tangram）https://mapzen.com/documentation/tangram/Tangram-Overview/https://mapzen.com/documentation/EPSG:3857Tangram 是个开源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

1Mapbox/api/mapboxhttps://www.mapbox.com/mapbox-gl-js/api/#geojsonsourceWGS84

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

 yes2

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的  yes3OpenStreeMap /api/openstreetmap WGS84geographic datahttp://wiki.openstreetmap.org/wiki/List_of_OSM_based_Services  yes4Mapzen（Tangram） https://mapzen.com/documentation/      5

Esri ArcGIS

/category/all/apis?keyword=arcgishttps://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

neednonono6

CartoDB

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

Cesium AGI

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

Microsoft Bing Maps

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