在客戶端電腦，用非administrator本地用戶登陸系統，深思精銳5加密狗如果在客戶端電腦用administrator本地用戶登陸系統，【電筒徽I7I⒌⒋⒏⒊⒊⒎⒍⒉】則一切正常，彈出用戶名密碼輸入窗口，權限正常。同時，文件服務器上的本地組策略裏的“網絡訪問：本地賬戶的共享和安全模型”設置爲“經典－對本地用戶進行身份認證，不改變其本來身份”
我這裏還是使用 ECharts 來處理，有一個 API 是 registerMap，可以用來生成地圖。它有兩個比較重要的參數，mapName 和 geoJson。
mapName 顧名思義，就是該註冊地圖的名稱。而對於 geoJson 呢，需要是 GeoJson 格式的數據，具體格式可以參見 http://geojson.org/。說白了就是包含了經緯度信息和地理名稱的 json 數據，這種數據很多網站都有提供，我選取了如下的網站獲取
https://data.jianshukeji.com/geochina/tianjin.json
可以看出，只要替換 json 名稱，如：tianjin，就可以獲取到天津對應的 geojson 數據。
下面就是正常的繪製地圖了，只需要注意把 mapType 設置爲前面註冊的地圖名稱即可。
後臺數據準備
由於現在要展示各個市級別的數據，那麼我們就需要重新準備下後臺的數據接口，把各省的地級市信息撈取出來，注意對於直轄市需要特殊處理
def get_chart_city_map_data(): city_map_dict = {} map_data = json.loads(rd.get(‘trend’)) city_data = map_data[‘data’][‘areaTree’][0] special = [‘北京’, ‘天津’, ‘上海’, ‘重慶’, ‘香港’, ‘澳門’] for data in city_data[‘children’]: city_list = [] if data[‘name’] in special: for inner_data in data[‘children’]: if ‘區’ in inner_data[‘name’]: city_list.append({‘name’: inner_data[‘name’], ‘value’: inner_data[‘total’][‘confirm’]}) else: city_list.append({‘name’: inner_data[‘name’] + ‘區’, ‘value’: inner_data[‘total’][‘confirm’]}) else: for inner_data in data[‘children’]: city_list.append({‘name’: inner_data[‘name’], ‘value’: inner_data[‘total’][‘confirm’]}) city_map_dict[data[‘name’]] = city_list return city_map_dict複製代碼
然後統一到一個接口中返回
@app.route(’/get_map_data’)def get_map_data(): map_data = get_chart_map_data() city_data = get_chart_city_map_data() return jsonify({‘country’: map_data, ‘city’: city_data})複製代碼
前端功能實現
下面我們來根據思路編寫前端代碼，首先在中國地圖上設置點擊事件，更加當前點擊的省份信息來請求 geojson 數據並註冊地圖。
mapChart.on(‘click’, function (params) {//點擊事件 if (params.name in provinces) { $.getJSON(‘https://data.jianshukeji.com/geochina/’ + provinces[params.name] + ‘.json’, function (jsondata) { echarts.registerMap(params.name, jsondata); var d = []; for (var i = 0; i < jsondata.features.length; i++) { d.push({ name: jsondata.features[i].properties.name }) } renderMap(params.name, data) }) } })複製代碼
接下來就是 renderMap 函數，其實就是正常的繪製地圖代碼
function renderMap (map, data) { // 初始化繪製省市地圖配置 var cityMapContainer = document.getElementById(‘map_1’); var myMapChart = echarts.init(cityMapContainer); option.title = { text: map + ‘疫情地圖’, subtext: ‘點擊標題返回全國地圖’, triggerEvent: true }; option.tooltip = { trigger: ‘item’ }; option.visualMap = { min: 0, max: 1500, show: false, left: ‘right’, top: ‘bottom’, text: [‘高’, ‘低’], // 文本，默認爲數值文本 calculable: true, textStyle: { color: ‘#fff’ } }; option.series = [ { name: ‘確診人數’, type: ‘map’, mapType: map, roam: false, data: data[‘city’][map], label: { show: true, emphasis: {//對應的鼠標懸浮效果 show: false, textStyle:{color:"#800080"} } }, itemStyle: { normal: { borderWidth: .5,//區域邊框寬度 borderColor: ‘#002097’,//區域邊框顏色 areaColor:"#4c60ff",//區域顏色 }, emphasis: { borderWidth: .5, borderColor: ‘#4b0082’, areaColor:"#ffdead", } } } ]; // 渲染地圖 myMapChart.setOption(option); myMapChart.on(‘click’, function (params) { if (params.componentType == ‘title’) { mymap(local_var) } }) }複製代碼
這裏又做了一個判斷，如果用戶點擊標題，則會調用創建中國地圖的函數，以此來達到返回全國地圖的效果！
最後我們來看下效果圖，由於從 geojson 拿到的數據和從網上接口拿到的地級市名稱不盡相同，所以有一些地級市的數據無法顯示，暫時還沒有很好的解決辦法，無奈！