物聯網的時代，信息的共享經過互聯網可以迅速的傳導到每個終端，傳統的設計也走網絡化的趨勢，各類設計成果以一個連接的方式就能查看。今天要分享的是用高德開放平臺作三維地圖建築幾何模型的呈現！css
01html
—前端
分析代碼web
高德的接口前端代碼就在右側，封裝好的js,能夠直接複製到前端的代碼工具Hbuilder裏，也能夠在線上直接測試運行，方便實用。api
分段代碼說明一：微信
<html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> <title>Object3D 的添加/移除</title> <meta name="description" content="對 Object3D 對象進行添加和移除的基本操做。"> <style> html, body, #container { width: 100%; height: 100%; }</style></head><body><div id="container"></div><div class="input-card" style="width: auto;"> <div class="input-item"> <button id="add-obj3d-btn" class="btn">添加 Object3D</button> </div> <div class="input-item"> <button id="rm-obj3d-btn" class="btn">移除 Object3D</button> </div></div><!-- 加載地圖JSAPI腳本 --><script src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值&plugin=Map3D"></script>
header部分引入css樣式，配置好容器爲佔滿整個屏幕；body部分給出地圖的id,並添加了兩個按鈕；引入了js，用你申請的密鑰。網絡
分段代碼說明二：app
<script> // 建立 3D 底圖 var map = new AMap.Map('container', { viewMode: '3D', // 開啓 3D 模式 pitch: 55, rotation: 35, center: [116.39756, 39.904215], features: ['bg', 'road'], zoom: 16 });
// 添加 Object3DLayer 圖層，用於添加 3DObject 對象 var object3Dlayer = new AMap.Object3DLayer(); map.add(object3Dlayer);
// 以不規則棱柱體 Prism 爲例，添加至 3DObjectLayer 圖層中 var paths = [ [116.395951,39.907129], [116.399127,39.907178], [116.399534,39.900413], [116.396316,39.900331] ];
var bounds = paths.map(function(path) { return new AMap.LngLat(path[0], path[1]); });
// 建立 Object3D 對象 var prism = new AMap.Object3D.Prism({ path: bounds, height: 500, color: 'rgba(100, 150, 230, 0.7)' // 支持 #RRGGBB、rgb()、rgba() 格式數據 });
// 開啓透明度支持 prism.transparent = true;
// 添加至 3D 圖層 object3Dlayer.add(prism);
//綁定按鈕事件 document.querySelector("#add-obj3d-btn").onclick = function() { // 添加至 3D 圖層 object3Dlayer.add(prism); };
document.querySelector("#rm-obj3d-btn").onclick = function() { // 從 3D 圖層中移除 object3Dlayer.remove(prism); };</script></body></html>
自寫js部分：建立3d地圖;添加object3dlayer圖層;導入數據，並設置3d物體的一些特性；添加物體到圖層，並設置按鈕時間。工具
02學習
—
數據準備
示例用的是一個物體，現實是須要將建築物落到相應的三維地圖上。這裏展現的不是精準的數據，多是外出調研收集的GPS或kml數據。以kml數據爲例：
如上圖就是長沙市的建築物投影輪廓的kml數據，座標系是火星座標（不瞭解座標系的能夠去看個人往期推文），那用記事本打開看一下kml的數據格式：
<kml xmlns="http://www.opengis.net/kml/2.2"><Document><Placemark><name>後湖-二期項目</name><ExtendedData><Data name="stroke"><value>#555555</value></Data><Data name="stroke-width"><value>2</value></Data><Data name="stroke-opacity"><value>1</value></Data><Data name="fill"><value>#555555</value></Data><Data name="fill-opacity"><value>0.5</value></Data><Data name="color"><value>red</value></Data><Data name="name"><value>後湖-二期項目</value></Data><Data name="area"><value>207731</value></Data></ExtendedData><Polygon><outerBoundaryIs><LinearRing><coordinates>112.9465,28.15917 112.94573,28.15886 112.94505,28.15842 112.94446,28.15795 112.94408,28.15788 112.94327,28.15786 112.94212,28.15786 112.9418,28.15771 112.9417,28.15742 112.94157,28.15706 112.94054,28.15629 112.9403,28.15603 112.94024,28.15579 112.94034,28.1555 112.94045,28.15527 112.94046,28.15498 112.9402,28.15437 112.94,28.1541 112.94185,28.15344 112.942,28.15351 112.94222,28.15371 112.9425,28.15384 112.94283,28.15385 112.94326,28.15382 112.94361,28.15371 112.94703,28.15919 112.9465,28.15917</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Document></kml>
分析獲得每一個底輪廓都在coordinates,寫一個正則匹配，將輪廓都提取出來，存成前端合適的列表格式(以下圖就是兩個輪廓的效果）；
var paths = [[[112.9440477376463, 28.15794324261566], [112.9440413814828, 28.15778399112721], [112.9442747540956, 28.15780395394884],[112.9442366151601, 28.15797454856508], [112.9440477376463, 28.15794324261566]],[[112.9422172172457, 28.15634816509663], [112.9421493549901, 28.15622228709929], [112.9422851009946, 28.15617068149582], [112.9423184918233, 28.15624547645026], [112.9423543505468, 28.1562260760408], [112.942380195298, 28.15627384615557], [112.9422172172457, 28.15634816509663]]]
至此，數據準備就完成了
03
—
底圖調整
規劃設計項目中，底圖很重要，要突出本身的主題要素，將底圖的與要表現的主題設置的對比強一些，去掉多餘的雜質。
底圖要應用與分享高德有詳細的教程：
下圖就是添加建築物與設置好底圖後的最終效果：
04
—
其餘介紹
這只是高德接口的部分，3d部分還有一個更厲害的接口，若是有現成的模型在手，在網頁端進行交互可視化那就能節省很多時間。
GLTF模型
立體mesh中還有給mesh添加紋理的功能，這雖然跟三維軟件的賦材質不能比，但不習慣白模的能夠嘗試。
搭建地理信息系統的二維與三維都有基礎的應用接口提供，接下來要思考更多的是怎樣將多元數據整合成系統？實現數據的增值服務？
後臺回覆關鍵詞：教育，可查看個人我的在線課程，歡迎你們來溝通、交流、共同窗習！
往期回顧
本文分享自微信公衆號 - 玩大數據的規劃師（paitashuju）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。