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.kenshimo.com/reader/download/detail201802017.html --> <link href='http://www.kenshimo.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.kenshimo.com:9000/bigemap.js/v2.1.0/bigemap.js'></script> <script src="http://www.kenshimo.com/Public/common/js/jquery.min.js"></script> <script src="http://www.kenshimo.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.kenshimo.com:9000'; // 在ID為map的元素中實例化一個地圖,并設置地圖的ID號為 bigemap.arcgis-satellite,ID號程序自動生成,無需手動配置,并設置地圖的投影為百度地圖 ,中心點,默認的級別和顯示級別控件 var map = BM.map('map', 'bigemap.arcgis-satellite', { 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