BIGEMPA Js API示例中心
<!DOCTYPE html> <html lang="en"> <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.bigemap.com/reader/download/detail201802017.html --> <link href='http://www.bigemap.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.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script> <script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script> <script src="http://www.bigemap.com/Public/js/d3.min.js"></script> </head> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } .d3 { width: 500px; height: 500px; z-index: 10; /* background-color: rosybrown; */ } #zhemu { width: 600px; height: 100%; opacity: .9; background-color: black; position: absolute; z-index: 10; } </style> <body> <div id="map"></div> <div id="zhemu"> <div class="d3"></div> </div> </body> <script> //软件配置信息地址,软件安装完成之后使用本地地址,如:http://localhost:9000 BM.Config.HTTP_URL = 'http://www.bigemap.com:9000'; // 在ID为map的元素中实例化一个地图,并设置地图的ID号为 bigemap.zhongkexingtu,ID号程序自动生成,无需手动配置,并设置地图的投影为百度地图 ,中心点,默认的级别和显示级别控件 var map = BM.map('map', 'bigemap.zhongkexingtu', { center: [30, 104], zoom: 4, zoomControl: true }); var marker = BM.marker([30, 104]).addTo(map) getdata() // 获取数据 function getdata() { $.get('/Public/d3json/flare-2.json', function (data) { var height = 700 var width = 600 console.log(data); //处理数据 treemap = data => d3.treemap() .size([width, height]) .padding(1) .round(true) (d3.hierarchy(data) .sum(d => d.value) .sort((a, b) => b.value - a.value)) //定义格式化 format = d3.format(",d") //颜色比例尺 color = d3.scaleOrdinal(d3.schemeCategory10) var root = treemap(data); //添加svg图层 var svg = d3.select('.d3').append('svg').attr('height', height).attr('width', width) //添加图层分组 const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("title") .text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`); leaf.append("rect") // .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); }) .attr("fill-opacity", 0.6) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf.append("clipPath") // .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") // .attr("xlink:href", d => d.leafUid.href); leaf.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null) // .attr('font-size', '5') .text(d => d); }) } </script> </html