BIGEMPA Js API示例中心
<!DOCTYPE html>
<html lang="en">
<style>
body {
background-image: url('./xk.jpg');
background-repeat: no-repeat;
}
.tip {
height: 100px;
width: 200px;
position: absolute;
z-index: 00;
top: 10px;
left: 20px;
color: wheat;
}
</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
以下CSS地址請在安裝軟件了替換成本地的地址
CSS地址請使用:
http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
軟件下載地址 http://www.xawiki.com/reader/download/detail201802017.html
-->
<link href='http://www.xawiki.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
<!--
JS地址請使用：
http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
-->
<script src='http://www.xawiki.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
<script src="http://www.xawiki.com/Public/common/js/jquery.min.js"></script>
<script src="http://www.xawiki.com/Public/js/d3.min.js"></script>
</head>
<body>
<div class="d3"></div>
<div class="tip">成都市XXXXXXX數據展示 如需其他城市 請前往Bigemap下載器下載地圖</div>
</body>
<script>
//軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
BM.Config.HTTP_URL = 'http://www.xawiki.com:9000';
// 在ID為map的元素中實例化一個地圖，并設置地圖的ID號為 bigemap.zhongkexingtu，ID號程序自動生成，無需手動配置，并設置地圖的投影為百度地圖 ，中心點，默認的級別和顯示級別控件
// var map = BM.map('map', 'bigemap.zhongkexingtu', { center: [33, 80], zoom: 4, zoomControl: true, attributionControl: false });
// 基礎數據初始化
var width = 800
var height = 750
d3.json('/Public/d3json/sichuanxiaji.geojson').then((data) => {
console.log(data);
var mapColor = d3.scaleOrdinal(d3.schemeCategory10)
var mapLineColor = '#0d67c7';
// 繪制
var svg = d3.select('.d3').append('svg')
.attr('width', width).attr('height', height);
// 定義地圖的投影
var projection = d3.geoMercator()
.center([103.991184, 31])
.scale(20000);
// 定義地理路徑生成器
var path = d3.geoPath()
.projection(projection);
var darkmap = svg.append('g').attr('class', 'darkmap');
var mapGroups = svg.append('g')
.attr('class', 'mapGroups');
//制作數據
var mapdata = []
BM.geoJson(data, {
onEachFeature: function (feature, layer) {
var latlngs = layer.getBounds().getCenter()
mapdata.push([
{
'name': feature.properties.name,
'log': latlngs.lng,
'lat': latlngs.lat,
'num': Math.random() * 10,
'unit': '%'
},
])
}
})
console.log(mapdata);
//繪制陰影
darkmap.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('class', 'map-path')
.style('fill', '#2f2727')
.attr('stroke', 'white')
.attr('d', path)
.attr('transform', 'translate(20,10)');
// 地圖路徑繪制
console.log(data.features);
mapGroups.selectAll('path')
.data(data.features)
.enter()
.append('path')
.attr('class', 'map-path')
.style('fill', (d, i) => {
return mapColor(i)
})
.attr('stroke', 'white')
.attr('d', path);
// // text地理名稱
mapGroups.selectAll('text')
.data(mapdata)
.enter()
.append('text')
.text((d) => d[0].name)
.attr('font-size', '10')
.attr('transform', (d) => {
var coor = projection([d[0].log, d[0].lat]);
return 'translate(' + coor[0] + ',' + coor[1] + ')';
});;
//繪制矩形
var rectWidth = 13;
var rectHeight = 60; // 應根據計算得出，先默認柱體高度為60
var rectColor = '#14a8f394';
var rectLineColor = '#12ddda';
var rect3dGroups = svg.append('g')
.attr('class', 'rect3dGroups');
var rect3d = rect3dGroups.selectAll('rect3d')
.data(mapdata)
.enter()
.append('g')
.attr('class', 'rect3d')
.style('transform', (d, i) => {
if (i === 15) { // 都江堰市
return `translate(${0}px, ${-4 + 25}px)`;
}
if (i === 18) { // 崇州市
return `translate(${0}px, ${-4 + -10}px)`;
}
if (i === 8) { // 溫江市
return `translate(${0}px, ${-4 + 30}px)`;
}
return 'translate(-20 px, -4px)';
});
// 定義柱體高度比例尺
var maxData = d3.max(mapdata.map((item) => item[0].num)); // 最大增長率對應高度為60
var rectHScale = d3.scaleLinear() // 設置線性比例尺
.domain([0, maxData])
.range([0, 60]);
// 繪制頂面
rect3d.append('path')
.transition()
.duration(2000)
.delay((d, i) => {
return i * 200
})
.attr('d', (d) => {
let rectHeight = 0;
for (let i = 0; i < mapdata.length; i += 1) {
if (d[0].name.indexOf(mapdata[i][0].name.slice(0, -1)) !== -1) {
rectHeight = rectHScale(mapdata[i][0].num);
}
}
var coor = projection([d[0].log, d[0].lat]);
return `M${coor[0]} ${coor[1] - rectHeight}l${rectWidth} ${-rectWidth}l${-rectWidth} ${-rectWidth}l${-rectWidth} ${rectWidth}z`
})
.attr('fill', rectColor)
.attr('stroke', rectLineColor)
.attr('stroke-width', 1)
.attr('shape-rendering', 'crispedges')
// 繪制側面
rect3d.append('path')
.transition()
.duration(1000)
.delay((d, i) => {
return i * 200
})
.attr('d', (d) => {
let rectHeight = 0;
for (let i = 0; i < mapdata.length; i += 1) {
if (d[0].name.indexOf(mapdata[i][0].name.slice(0, -1)) !== -1) {
rectHeight = rectHScale(mapdata[i][0].num);
}
}
var coor = projection([d[0].log, d[0].lat]);
return `M${coor[0]} ${coor[1]} l0 ${-rectHeight} l${rectWidth} ${-rectWidth} l0 ${rectHeight} l${-rectWidth} ${rectWidth} l${-rectWidth} ${-rectWidth} l0 ${-rectHeight} l${rectWidth} ${rectWidth} z`
})
.attr('fill', rectColor)
.attr('stroke', rectLineColor)
.attr('stroke-width', 1)
.attr('shape-rendering', 'crispedges')
//定義豬蹄數據
// // text地理名稱
mapGroups.selectAll('.zhutext')
.data(mapdata)
.enter()
.append('text')
.attr('class', 'zhutext')
.text((d) => {
var num = d[0].num
return num.toFixed(1) + '%'
})
.attr('font-size', '15')
.attr('transform', (d) => {
var coor = projection([d[0].log, d[0].lat]);
return 'translate(' + (coor[0] + 20) + ',' + (coor[1] - 20) + ')';
})
.attr('fill', 'blue');
})
</script>
</html>