<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>基本地图展示</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.3&key=5f79ee442402a0060f2bc167f234f5f9"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="./data.js"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}
/**
* 利用 containerClassNames: 'my-marker' 设置label样式
*/
.amap-simple-marker.my-marker .amap-simple-marker-label {
color: #fff;
font-size: 16px;
font-style: italic;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
zoom: 7,
center: [116.397428, 39.90923]
});
AMapUI.loadUI(['overlay/SimpleInfoWindow', 'overlay/SimpleMarker'], function(SimpleInfoWindow, SimpleMarker) {
var markersClusterer = [], //聚合数据
markersNoClusterer = []; //监测站数据
//先加载聚合数据
setMarkerAndShowInfo(dataList, map.getZoom());
map.on("zoomend", function(e) {
addMarkers()
});
map.on("moveend", function(e) {
addMarkers();
});
//移除marker标签
function removeMarkers(markers) {
map.remove(markers);
}
//添加markers
function addMarkers() {
//先移除再添加
removeMarkers(markersClusterer.concat(markersNoClusterer));
setMarkerAndShowInfo(dataList, map.getZoom());
}
function setMarkerAndShowInfo(dataList, zoom) {
if (zoom < 10) {
dataList[0].forEach(dataObj => {
setMarkInfo(dataObj, zoom);
});
} else {
dataList[1].forEach(dataObj => {
setMarkInfo(dataObj);
});
}
//设置marker信息
function setMarkInfo(dataObj, zoom) {
var marker = new SimpleMarker({
//设置节点属性
iconLabel: {
//普通文本
innerHTML: dataObj["PM25"],
//设置样式
style: {
color: '#fff',
fontSize: '12px',
marginTop: '2px'
}
},
iconStyle: 'red',
map: map,
position: [dataObj["longtitude"], dataObj["latitude"]]
});
var infoWindow = new SimpleInfoWindow({
infoTitle: '<strong>这里是标题</strong>',
infoBody: '<p class="my-desc"><strong>这里是内容。</strong> <br/> 高德地图 JavaScript API，是由 JavaScript 语言编写的应用程序接口，' +
'它能够帮助您在网站或移动端中构建功能丰富、交互性强的地图应用程序</p>',
//基点指向marker的头部位置
offset: new AMap.Pixel(0, -31)
});
zoom < 11 ? markersClusterer.push(marker) : markersNoClusterer.push(marker);
function openInfoWin() {
infoWindow.open(map, marker.getPosition());
}
//marker 点击时打开
AMap.event.addListener(marker, 'click', function(e) {
openInfoWin();
});
}
}
});
</script>
</body>
</html>
webgis地图开发
5星 · 超过95%的资源 需积分: 49 151 浏览量
2018-01-28
09:05:28
上传
评论 1
收藏 861KB ZIP 举报 
osmGIS.zip （29个子文件） 
osmGIS css images 
test.html 1KB index.html 1KB js src bootstrap openlayers wfs.html 637B test.html 2KB index.html 765B 4.2.0 css dev 
twms.css 1KB mapWMS.css 352B ol.css 5KB js dev mapVectorTile.js 3KB mapWMS.js 1KB tools.js 414B mapWFS.js 3KB mapLayer.js 751B ol.js 3.02MB twms.html 828B gaode index.html 5KB data.js 7KB jquery jquery.min.js 121KB baidu leaflet images 
marker-icon-2x.png 2KB marker-icon.png 1KB layers.png 696B layers-2x.png 1KB marker-shadow.png 618B leaflet.js 136KB leaflet-src.js.map 737KB leaflet-src.js 388KB leaflet.js.map 186KB leaflet.css 14KB angularjs platform dateTool.js 789B html 资源评论
GouGe05232020-07-26这个可以，挺好的，适合初学者
