地图js技术调研

by · 2019-04-03

  • 地图数据格式规范：geojson http://geojson.org/
    类型包括Point, LineString, Polygon, MultiPoint, MultiLineString,
    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

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序