<!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 data = [
{ '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: 'circle',
zIndex:210
});
// 添加數據
layerCircle.setData(data, {
// 指定地理座標所在列名
lnglat: 'center',
// 指定數據類型，支持 json、csv、tsv 格式
type: 'json'
});
// 設置樣式
layerCircle.setOptions({
style: {
radius: 10,
color: 'red',
borderWidth: 0.5,
// borderColor: '#ffffff',
opacity: 0.8,
altitude: 1000
}
});
// 執行繪製
layerCircle.render();
});
</script>
</body>
</html>
效果如下：
