摘要:接着上次的遺留的問題,研究出瞭如何在3D的地圖區域上顯示棱柱圖
實現:直接上代碼了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>高德地圖可視化</title>
<style>
.centerItem {
width: 1056px;
height: 740px;
/*background-color: rgb(4, 157, 252);*/
border: 1px solid #ccc;
margin: 100px auto 0 auto;
}
</style>
</head>
<body>
<!-- 展示 -->
<div id="container" class="centerItem"></div>
<script src="https://webapi.amap.com/loca?v=1.2.0&key=你的應用key值"></script>
<!-- 引入相關文件 -->
<script src="js/jquery-3.2.1.min.js"></script>
<script>
var map = Loca.create('container', {
mapStyle: 'amap://styles/7daf7c6981b0bc497d78c23077f5492f', // 設置地圖的顯示樣式,目前支持兩種地圖樣式:第一種:自定義地圖樣式,如"amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"可前往地圖自定義平臺定製自己的個性地圖樣式;第二種:官方樣式模版,如"amap://styles/grey"。其他模版樣式及自定義地圖的使用說明見開發指南
viewMode: '3D', // 默認爲‘2D’,可選’3D’,選擇‘3D’會顯示 3D 地圖效果。
pitch: 50, // 俯仰角度,默認0,[0,83],2D地圖下無效
features: ['bg', 'road','building'], // 設置地圖上顯示的元素種類支持'bg'(地圖背景)、'point'(POI點)、'road'(道路)、'building'(建築物)
zoom: 8// 地圖顯示的縮放級別,若center與level未賦值,地圖初始化默認顯示用戶所在城市範圍,3D地圖下,zoom值,可以設置爲浮點數。(在V1.3.0版本level參數調整爲zoom,3D地圖修改自V1.4.0開始生效)
});
map.on('mapload', function() {
map.getMap().plugin(['AMap.ControlBar'], function() {
var controlBar = new AMap.ControlBar();
map.getMap().addControl(controlBar);
});
});
var colors = ["#08519c"];
$.get('你需要渲染地圖的數據接口',function(data) {
console.log(data);
var data = data.data;
// 創建地圖容器
var layer = Loca.visualLayer({
container: map,
type: 'polygon',
shape: 'polygon',
fitView: true
});
// 添加數據
layer.setData(data, {
lnglat: 'coordinates'
});
var idx = 0;
// 設置樣式
layer.setOptions({
style: {
height: function() {
return Math.random() * 20000;
},
opacity: 0.9,
color: function() {
return colors[idx++ % colors.length];
}
}
});
// 執行繪製
layer.render();
// 繪製第二個圖層
var districts = [
{ 'name': '高新區管委會', 'center': [117.135304,31.831846] },
{ 'name': '創新公寓', 'center': [117.13526,31.834364] },
{ 'name': '皖水公寓', 'center': [117.136595,31.844341] }
// ...
];
var layerCircle = Loca.visualLayer({
container: map,
type: 'point',
shape: 'prism',
vertex: 4,
// fitView: true,
zIndex:210
});
// 添加數據
layerCircle.setData(districts, {
// 指定地理座標所在列名
lnglat: 'center',
// 指定數據類型,支持 json、csv、tsv 格式
type: 'json'
});
var topColors = [
'#EA2000',
'#ED6250'
];
layerCircle.setOptions({
// 單位米
unit: 'meter',
style: {
radius: 100, // 構成棱柱體 prism 的頂面和底面的正多邊形半徑。
// topRadius: 100, // 構成棱柱 prism 頂面的正多邊形半徑。優先級大於 radius
// bottomRadius: 160,// 構成棱柱 prism 底面的正多邊形半徑。優先級大於 radius 將上面的 radius: 100註釋掉,放開下面的topRadius和bottomRadius就是一個梯棱柱
height: 620,
color: topColors[0],
opacity: 0.8,
// 頂面顏色
topSideColor: topColors[1],
// 旋轉角度,單位弧度
rotate: Math.PI / 180 * 45
}
});
// 執行繪製
layerCircle.render();
});
</script>
</body>
</html>
效果如下: