效果如下:
鼠标滑动上去的时候出现详细信息
数据以json格式传递,数据如下(data.js):
var data = [ //json数据
{
"name":"长城",
"x":116.016033,
"y":40.364233,
"desc":"长城(Great Wall),又称万里长城,是中国古代的军事防御工程,是一道高大、坚固而连绵不断的长垣,用以限隔敌骑的行动。长城不是一道单纯孤立的城墙,而是以城墙为主体,同大量的城、障、亭、标相结合的防御体系。",
"type":"cultureHeritage"
},
{
"name":"莫高窟",
"x":94.815602,
"y":40.048747,
"desc":"莫高窟,俗称千佛洞,坐落在河西走廊西端的敦煌。它始建于十六国的前秦时期,历经十六国、北朝、隋、唐、五代、西夏、元等历代的兴建,形成巨大的规模,有洞窟735个,壁画4.5万平方米、泥质彩塑2415尊,是世界上现存规模最大、内容最丰富的佛教艺术地。",
"type":"cultureHeritage"
},
{
"name":"故宫",
"x":116.403414,
"y":39.924091,
"desc":"北京故宫是中国明清两代的皇家宫殿,旧称为紫禁城,位于北京中轴线的中心,是中国古代宫廷建筑之精华。北京故宫以三大殿为中心,占地面积72万平方米,建筑面积约15万平方米,有大小宫殿七十多座,房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。",
"type":"cultureHeritage"
},
{
"name":"秦始皇陵及兵马俑坑",
"x":109.289337,
"y":34.392294,
"desc":"秦始皇陵是中国历史上第一个皇帝——秦始皇帝的陵园,也称骊山陵。兵马俑坑是秦始皇陵的陪葬坑,位于陵园东侧1500米处。其规模之大、陪葬坑之多、内涵之丰富,为历代帝王陵墓之冠。",
"type":"cultureHeritage"
},
{
"name":"周口店北京人遗址",
"x":115.938822,
"y":39.696296,
"desc":"周口店遗址博物馆坐落在北京城西南房山区周口店龙骨山脚下,是一座古人类遗址博物馆,始建于1953年。1929年,中国古人类学家裴文中先生在龙骨山发掘出第一颗完整的“北京猿人”头盖骨化石,震撼了全世界。",
"type":"cultureHeritage"
},
{
"name":"拉萨布达拉宫历史建筑群",
"x":91.125103,
"y":29.660384,
"desc":"布达拉宫(藏文:པོ་ཏ་ལ,藏语拼音:bo da la,威利:po ta la),坐落于于中国西藏自治区的首府拉萨市区西北玛布日山上,是世界上海拔最高,集宫殿、城堡和寺院于一体的宏伟建筑,也是西藏最庞大、最完整的古代宫堡建筑群。",
"type":"cultureHeritage"
},
{
"name":"峨眉山-乐山大佛",
"x":103.450213,
"y":29.575827,
"desc":"峨眉山(Mount Emei)山头位于中国四川省乐山市峨眉山市境内,是中国“四大佛教名山”之一,地势陡峭,风景秀丽,素有“峨眉天下秀”之称,山上的万佛顶最高,海拔3099米,高出峨眉平原2700多米。《峨眉郡志》云:“云鬘凝翠,鬒黛遥妆,真如螓首蛾眉,细而长,美而艳也,故名峨眉山。”",
"type":"doubleHeritage"
},
{
"name":"九寨沟国家级自然保护区",
"x":103.925277,
"y":33.273815,
"desc":"九寨沟:世界自然遗产、国家重点风景名胜区、国家AAAAA级旅游景区、国家级自然保护区、国家地质公园、世界生物圈保护区网络,是中国第一个以保护自然风景为主要目的的自然保护区。",
"type":"natureHeritage"
}
];
前端代码:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<title>中国的世界遗产(部分)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css">
<script src="http://jsapi.thinkgis.cn/init.js"></script>
<style type="text/css">
html,body,#map{
height: 100%;
width: 100%;
border: 0px;
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
font-size: medium;
}
/*图名图例表的样式*/
#mapInfo{
width: 320px;
height: 120px;
position: fixed;
right: 20px;
top: 20px;
z-index: 999;
border-radius:10px;
background: white;
}
#title{
background-color: #444444;
width: 100%;
border: 0px;
border-radius:10px 10px 0 0;
height: 35px;
line-height: 200%;
}
#mapLegend{
width: 80%;
border-radius:0 0 10px 10px;
height: 85px;
margin: auto;
padding-top: 5px;
}
#mapLegend img{
width: 20px;
}
</style>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
var map;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Point",
"esri/layers/GraphicsLayer",
"esri/graphic",
"dojo/_base/Color",
"dojo/domReady!"],
function(Map,
Tiled,
Point,
GraphicsLayer,
Graphic,
Color)
{
map = new Map("map",{
logo:true,
maxZoom:5,//最大放大等级
minZoom:2//最小放大等级
});
var tiled = new Tiled("http://server.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer",{"id":"tiled"});
map.addLayer(tiled);
var mapCenter = new Point(103.847, 36.0473, {"wkid":4326});
map.centerAndZoom(mapCenter,3);
var gLyr = new GraphicsLayer({"id":"gLyr"});
map.addLayer(gLyr);
var gLyrLbl = new GraphicsLayer({"id":"gLyrLbl"});
map.addLayer(gLyrLbl);
map.on("load",function(){
for(var i=0;i<data.length;i++){
var pt = new Point(data[i].x,data[i].y,{"wkid":4326});
var pms;
if (data[i].type=="natureHeritage") {
pms = new esri.symbol.PictureMarkerSymbol("images/natureHeritage.png",30,30);
}else if (data[i].type=="cultureHeritage") {
pms = new esri.symbol.PictureMarkerSymbol("images/cultureHeritage.png",30,30);
}else if (data[i].type=="doubleHeritage") {
pms = new esri.symbol.PictureMarkerSymbol("images/doubleHeritage.png",30,30);
}
var gImg = new Graphic(pt,pms,data[i]);
gLyr.add(gImg);
var gLbl = new esri.Graphic(pt,data[i]);
gLyrLbl.add(gLbl);
}
gLyr.on("mouse-over",function(e){
var attr = e.graphic.attributes;
showInfo(attr);
});
});
function showInfo(attr){
var pt=new Point(attr.x,attr.y,{"wkid":4326});//WGS84的点
map.infoWindow.setTitle(attr.name);
map.infoWindow.setContent(attr.desc);
map.infoWindow.show(pt);
}
});
</script>
</head>
<body>
<div id="map"></div>
<div id="mapInfo">
<div id="title">
<h3 style="width: 60%;margin: auto;text-align: center;color: white;">
<em>世界遗产在中国</em>
</h3>
</div>
<div id="mapLegend">
<small>图例:</small><br>
<small>自然遗产</small> <img src="images/natureHeritage.png">
<small>文化遗产</small> <img src="images/cultureHeritage.png"><br>
<small>文化自然双遗产</small> <img src="images/doubleHeritage.png">
</div>
</div>
</body>
</html>
(任何问题:[email protected])