Skip to content

html / MeteorologicalBureau

Go to a project
Commit 95a782ff by fengfan
Options

map

parent a9fd7d33
Showing with 132 additions and 49 deletions
map/index.html
......@@ -18,8 +18,9 @@
<body>
<div id="container"></div>
<script language="javascript"
<script
src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script language="javascript">
var styleId = '14732285e0b3c284fa6efdb25627d3f6'
var opts = {
......@@ -27,9 +28,13 @@
extensions: 'all',
level: 'city'
};
var road = new AMap.TileLayer()
var road = new AMap.TileLayer({
getTileUrl: "https://wprd02.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&lang=zh_cn&size=1&scl=1&style=8&ltype=12"
})
//ltype 2 路网 12 poi
var Satellite = new AMap.TileLayer.Satellite({
rejectMapMask: true
rejectMapMask: true,
zIndex: 0
})
var RoadNet = new AMap.TileLayer.RoadNet({
rejectMapMask: true,
......@@ -38,55 +43,133 @@
//利用行政区查询获取边界构建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 map
var init = function () {
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]])
}
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: [RoadNet,Satellite ]//Satellite,
// layers: [road, ]//Satellite,
});
map.add(Satellite);
// map.getLayers()[0].setOpacity(0.5)
// 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: 6,
map: map
})
}
AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
initMask(DistrictExplorer);
});
});
// 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
}
init()
function initMask(DistrictExplorer) {
//创建一个实例
var districtExplorer = new DistrictExplorer({
map: map
});
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
})
console.log(map.getLayers())
var countryCode = 100000, //全国
cityCodes = [
110000, //北京
]
districtExplorer.loadMultiAreaNodes([countryCode], function (error, areaNodes) {
console.log(areaNodes)
var countryNode = areaNodes[0]
// cityNodes = areaNodes.slice(1);
var path = [];
//首先放置背景区域，这里是大陆的边界
path.push(getLongestRing(countryNode.getParentFeature()));
for (var i = 0, len = cityCodes.length; i < len; i++) {
//逐个放置需要镂空的省级区域
path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(cityCodes[i])));
}
// for (var i = 0, len = cityNodes.length; i < len; i++) {
// //逐个放置需要镂空的市级区域
// path.push.apply(path, getAllRings(cityNodes[i].getParentFeature()));
// }
//绘制带环多边形
//https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
var polygon = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: 'red', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: 'black', //填充色
fillOpacity: 0.65, //填充透明度
map: map,
path: path
});
})
}
function getAllRings(feature) {
var coords = feature.geometry.coordinates,
rings = [];
for (var i = 0, len = coords.length; i < len; i++) {
rings.push(coords[i][0]);
}
});
return rings;
}
function getLongestRing(feature) {
var rings = getAllRings(feature);
rings.sort(function (a, b) {
return b.length - a.length;
});
return rings[0];
}
</script>
</body>
......
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