Skip to content

html / MeteorologicalBureau

Go to a project
Commit 972e5d83 by hanjixin
Options

修改地图文字

parent 7a0bef49
Showing with 160 additions and 0 deletions
map/index-hank.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>区域掩模</title>
<style>
body,
html,
#container {
margin: 0;
width: 90%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script
language="javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch"
></script>
<script language="javascript">
var styleId = '14732285e0b3c284fa6efdb25627d3f6';
var opts = {
subdistrict: 10,
extensions: 'all',
level: 'city,district'
};
function getDrictArea(name, map, item) {
var district = new AMap.DistrictSearch({
// 返回行政区边界坐标等具体信息
extensions: 'all',
// 设置查询行政区级别为 区
level: 'district'
});
district.search(name, function(status, result) {
// 获取朝阳区的边界信息
var bounds = result.districtList[0].boundaries;
var polygons = [];
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.01,
fillColor: '#CCF3FF',
strokeColor: '#99ffff'
});
// new AMap.Text({
// text: name,
// map,
// position: new AMap.LngLat(item.center.lng,item.center.lat),
// zIndex: 10000
// })
polygons.push(polygon);
}
// 地图自适应
map.setFitView();
}
});
}
var road = new AMap.TileLayer();
var Satellite = new AMap.TileLayer.Satellite({
rejectMapMask: true
});
var RoadNet = new AMap.TileLayer.RoadNet({
rejectMapMask: true,
mapStyle: 'amap://styles/' + styleId
});
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
var district = new AMap.DistrictSearch(opts);
district.search('北京市', function(status, result) {
var bounds = result.districtList[0].boundaries;
var mask = [];
for (var i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]]);
}
var map = new AMap.Map('container', {
mask: mask,
center: [116.472804, 39.995725],
mapStyle: 'amap://styles/' + styleId,
disableSocket: true,
viewMode: '3D',
showLabel: false,
labelzIndex: 130,
pitch: 40,
zoom: 9,
layers: [Satellite, road]
});
// var maskerIn = new AMap.Marker({
// position: [116.501415, 39.926055],
// map: map
// })
// var maskerOut = new AMap.Marker({//区域外的不会显示
// position: [117.001415, 39.926055],
// map: map
// })
//添加高度面
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1000 });
map.add(object3Dlayer);
var height = -59800;
var color = '#ffffffcc'; //rgba
var wall = new AMap.Object3D.Wall({
path: bounds,
height: height,
color: color
});
wall.transparent = true;
object3Dlayer.add(wall);
//添加描边
for (var i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: '#99ffff',
strokeWeight: 4,
map: map
});
}
result.districtList[0].districtList[0].districtList.map(item => {
getDrictArea(item.name, map, item)
});
console.log(result);
// var layer = new Loca.PolygonLayer({
// map: map,
// fitView: true
// });
// layer.setData(data, {
// lnglat: 'coordinates'
// });
// var idx = 0;
// layer.setOptions({
// style: {
// height: function() {
// return Math.random() * 20000;
// },
// opacity: 0.8,
// color: function() {
// return colors[idx++ % colors.length];
// }
// }
// });
// layer.render();
});
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment