使用GeoJson 文件可视化中国地图
来源：互联网 发布：js定时器导致页面崩溃 编辑：程序博客网 时间：2024/05/20 00:16
使 用 G e oJ so n 文 件可视化中国地图
一. 准备GeoJson文件
首先可以从百度上下载中国的GeoJson文件，一共有34个省市区（包括香港，澳门，台湾）
以下部分为台湾的GeoJson文件
{"type":"Feature","properties":{"id":34,"name":"台湾","density":640.05},"geometry":{"type":"Polygon","coordinates":[[[121.63599694100014,25.222805080000114],[121.71851647200015,25.15200429900011],[121.89283287900003,25.113674221000167],[121.9057723320002,24.95010000200014],[121.82349694100014,24.854925848000164],[121.81495201900032,24.644354559000192],[121.85596764400032,24.550523179000123],[121.78003991000003,24.43268463700008],[121.77271569100003,24.30923086100006],[121.66285241000014,24.193101304000038],[121.60743248800014,24.07684967700004],[121.62891686300009,24.026190497000158],[121.52149498800031,23.658677476000094],[121.46216881600026,23.34300364800015],[121.4088647800001,23.254584052000126],[121.40007571700005,23.145493882000153],[121.29957116000003,22.95917389500019],[121.19027754000001,22.843166408000144],[121.14144941500001,22.741766669000185],[121.02100670700008,22.647894598000136],[120.9482528000002,22.52680084800005],[120.87501061300014,22.289252020000134],[120.87924238400001,22.055812893000052],[120.84156334700009,21.925482489000103],[120.70435631600014,21.98139069200016],[120.69695071700016,22.113226630000156],[120.62126712300017,22.29507070500017],[120.51197350400025,22.42475006700016],[120.33122806100027,22.51972077000019],[120.17554772200015,22.88410065300016],[120.17025800900024,23.013373114000046],[120.05941816500012,23.151027736000174],[120.1301491600002,23.360960244000154],[120.12426153300032,23.520020550000083],[120.18921959700026,23.774807033000116],[120.29224694100003,23.911932684000192],[120.34009850400014,24.02179596600007],[120.4931746750002,24.23065827000005],[120.57081139400032,24.404933986000202],[120.64893639400009,24.48387278900023],[120.70215905000032,24.60700104400013],[120.84750410200013,24.710842190000108],[120.90235436300031,24.836818752000056],[121.05933678500003,25.050238348000164],[121.37875410200007,25.157945054000038],[121.43628991000026,25.24144114800012],[121.53972415500004,25.28742096600007],[121.63599694100014,25.222805080000114]]]}}]}要想在leftlet地图中使用GeoJson文件，可以将其用js文件表示，china.js如下所示. 数组中包含多个如上图所示的对象
var chinaData={"type":"FeatureCollection","features":[{},{},{},{}]};二. 地图可视化
为了提高图的实用性，本图增加展示各省市的人口密度功能。数据来源于2016年
<!DOCTYPE html><html><head><title>leftLetDemo</title><meta charset="utf-8"></script><script type="text/javascript" src="js/china.js"></script><script type="text/javascript" src="js/leaflet.js"></script><link rel="stylesheet" type="text/css" href="css/leaflet.css"></script><style type="text/css"> #map{ height:600px; } .info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; } .legend { line-height: 18px; color: #555;}.legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7;}</style></head><body> <div id="map"></div> <script type="text/javascript"> var geojson,info; function getColor(d) {//#800026 return d > 3000 ? '#800026' : d > 1000 ? '#BD0026' : d > 500 ? '#E31A1C' : d > 200 ? '#FC4E2A' : d > 100 ? '#FD8D3C' : d > 50 ? '#FEB24C' : d > 10 ? '#FED976' : '#FFEDA0';}function style(feature) {//json的每个属性会执行此函数 return { fillColor: getColor(feature.properties.density),// weight: 2, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.7 };}function highlightFeature(e) {//当鼠标拂过时高亮显示 var layer = e.target; layer.setStyle({ weight: 5, color: '#666', dashArray: '', fillOpacity: 0.7 }); if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { layer.bringToFront(); } info.update(layer.feature.properties);}function resetHighlight(e) {//当鼠标退出后reset geojson.resetStyle(e.target);// geojson要先定义 info.update();}function zoomToFeature(e) {//当点击时显示状态 map.fitBounds(e.target.getBounds());}function onEachFeature(feature, layer) {//遍历每一个数据，也就是为每一个地点加上监听器 layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature });} var mymap = L.map('map').setView([34.76, 113.65], 4); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', maxZoom: 18}).addTo(mymap);geojson=L.geoJson(chinaData,{ style:style, onEachFeature: onEachFeature }).addTo(mymap);info = L.control({position: 'topright'});//添加一个组件，也可以使用自己定义的组件，设置监听事件，使用float属性 或者position:absolute info.onAdd = function (mymap) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" this.update(); return this._div;};// method that we will use to update the control based on feature properties passedinfo.update = function (props) { this._div.innerHTML = '<h4>China Population Density</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' : 'Hover over a province');};info.addTo(mymap);//加入图标var legend = L.control({position: 'bottomright'});legend.onAdd = function (map) {//onAdd函数向其中添加组件 var div = L.DomUtil.create('div', 'info legend'), grades = [0, 10, 50, 100, 200, 500, 1000,3000], labels = []; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+'); } return div;};legend.addTo(mymap);//加入显示比例尺 </script></body></html>三. 结果展示
当鼠标放到不同的省份时，提示栏会显示相应省份及人口密度。
1 0
- 使用GeoJson 文件可视化中国地图
- 带钓鱼岛的中国地图geoJson
- echarts地图扩展文件使用geoJson格式。
- OpenLayers3加载Geojson文件
- 使用Echarts实现中国地图
- GeoJSON
- GeoJSON
- 由shp文件生成geojson
- Cross origin requests ，Geojson文件
- openlayer4中使用geojson数据
- R语言在线地图神器：Leaflet for R包（五） GeoJson文件的使用
- 使用echarts简单制作中国地图
- 使用R语言绘制中国地图
- iOS Xcode配置文件之Geojson文件
- 上传AppStore关于.geojson文件的配置
- 上传AppStore关于.geojson文件的配置
- 将shape文件转成geojson格式
- win7下使用TileStache生成geojson…
- 分析Linux内核创建一个新进程的过程
- ant使用笔记
- Go语言小知识之append()函数
- 初识Retrofit(-)
- 【安装Appium后的环境变量配置】
- 使用GeoJson 文件可视化中国地图
- ohmyzsh自动登录ssh服务器脚本实现
- MySQL存入图片+Qt读入读出数据库中的图片
- idea常用快捷方式
- Qt QWidget播放视频背景图片闪烁
- Linux下的进程描述
- mysql字符串拼接
- Java 之 HashMap 和HashTable
- 等价二叉树
