篆刻小站之设计与开发

目的

静态网站，有css、html、还有bootstrapy等框架，

新东西

老师说要在可视化和加建模里面选，我选了可视化，加了可视化地图。
录入浙江省的地图，如何根据地方的经纬度，搞出坐标，可以点，如何显示具体信息。

具体的一点点代码

主要功能地图代码，如何设置一下鼠标放大缩小、颜色、点上去有什么字注释。

//获取杭州市的地图信息
			window.onload = function GetGeoMap() {
				var geoJson = null;
				var url = "josn/zhejiang.json";
				MapChart.showLoading();
				$.get(url, null, function(ret) {
					geoJson = ret;
					loadMap(geoJson);
				});
			}
			//初始化地图容器
			var MapChart = echarts.init(document.getElementById('main'));
			//设置地图。
			var loadMap = function(geoJson) {
				echarts.registerMap('tianjin', geoJson);
				MapChart.hideLoading();
				var data = dataJson;

				var geoCoordMap = {

					'西冷印社': [120.168667,30.283576],
					'浙江博物馆': [120.149943,30.257342],
					'中国印学博物馆': [120.146039,30.25754],
					'平湖玺印篆刻博物馆': [121.03287,30.704162],
					'浙江省非物质文化金石篆刻传承基地': [120.288635,30.434233],
					'浙江美术馆': [120.163334,30.236852],
					'浙江青年书协篆刻创作基地': [119.676536,29.989765],
					'宁波市篆刻艺术馆': [121.547596,29.876101],
					'沙孟海故居': [120.165073,30.267529],
					'吴昌硕纪念馆': [119.709203,30.625453],
					
					
				}

				var convertData = function(data) {
					var res = [];
					for(var i = 0; i < data.length; i++) {
						var geoCoord = geoCoordMap[data[i].name];
						if(geoCoord) {
							res.push({
								name: data[i].name,
								value: geoCoord.concat(data[i].value),
								value1:  geoCoord.concat(data[i].value1)
							
							});
						}
					}
					return res;
				};

展示

代码结构

要下浙江省的json才可以被引入

首页展示

色彩搭配很舒服，有点篆刻风的感觉

其他：