地圖js技術調研

原創 icefireelf 2018-08-23 04:00

  • 地圖數據格式規範：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"
      }
    }
一、開源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
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Windows Live Writer插件開發經驗

icefireelf 2020-02-21 04:42:36

關於地理座標

icefireelf 2018-08-23 04:00:45

使用flup實現WSCGI

icefireelf 2018-08-23 04:00:45

關於動態引入js時的順序問題

icefireelf 2018-08-23 04:00:44