| | |
| | | //bindEvent(); |
| | | }) |
| | | // 加载地图 |
| | | var countries = []; |
| | | var countriesOverlay = new T.D3Overlay(init,redraw); |
| | | var countriesOverlay1 = new T.D3Overlay(init1,redraw1); |
| | | function loadMap() { |
| | | let map = new T.Map('map_div'); |
| | | map.centerAndZoom(new T.LngLat(116.38, 39.9), 11); |
| | |
| | | var control = new T.Control.Zoom(); |
| | | control.setPosition(T_ANCHOR_TOP_RIGHT); |
| | | map.addControl(control);// 添加缩放平移控件 |
| | | |
| | | var scale = new T.Control.Scale();// 创建比例尺控件对象 |
| | | // var ctrl = new T.Control.MapType(); |
| | | // ctrl.setPosition(T_ANCHOR_BOTTOM_RIGHT); |
| | | // 添加控件 |
| | | map.addControl(ctrl); |
| | | |
| | | |
| | | // const sourceGeoJson = new VectorSource({ |
| | | // format: new GeoJSON(), |
| | | // url:'/beijing.geojson' |
| | | // }); |
| | | // |
| | | // const layerGeoJson = new VectorLayer({ |
| | | // source:sourceGeoJson, |
| | | // }); |
| | | // |
| | | // map.addLayer(layerGeoJson); |
| | | d3.json("/bjfw/js/custom/beijing.json", function (data) { |
| | | countries = data.features; |
| | | map.addOverLay(countriesOverlay) |
| | | countriesOverlay.bringToBack(); |
| | | map.addOverLay(countriesOverlay1) |
| | | countriesOverlay.bringToBack(); |
| | | }); |
| | | } |
| | | |
| | | |
| | | |
| | | function init(sel, transform) { |
| | | var upd = sel.selectAll('path.geojson').data(countries); |
| | | upd.enter() |
| | | .append('path') |
| | | .attr("class", "geojson") |
| | | .attr('stroke', 'grey') |
| | | .attr('fill', function (d, i) { |
| | | //return d3.hsl(Math.random() * 360, 0.9, 0.5) |
| | | return "transparent" |
| | | }) |
| | | .attr('fill-opacity', '0') |
| | | } |
| | | |
| | | function redraw(sel, transform) { |
| | | sel.selectAll('path.geojson').each( |
| | | function (d, i) { |
| | | d3.select(this).attr('d', transform.pathFromGeojson) |
| | | } |
| | | ) |
| | | } |
| | | |
| | | |
| | | function init1(sel, transform) { |
| | | var upd = sel.selectAll('path.geojson1').data(countries); |
| | | upd.enter() |
| | | .append('path') |
| | | .attr("class", "geojson1") |
| | | .attr('stroke', 'grey') |
| | | .attr('fill', function (d, i) { |
| | | return d3.hsl(Math.random() * 360, 0.9, 0.5) |
| | | }) |
| | | .attr('fill-opacity', '0.1') |
| | | } |
| | | |
| | | function redraw1(sel, transform) { |
| | | sel.selectAll('path.geojson1').each( |
| | | function (d, i) { |
| | | d3.select(this).attr('d', transform.pathFromGeojson) |
| | | } |
| | | ) |
| | | } |
| | | |
| | | // 获取数据库真实数据 |
| | | function getReallyData() { |
| | | let url = window.location.protocol + "//" + window.location.host + "/bjfw/geotdp/index/indexCollect"; |