Skip to content

html / MeteorologicalBureau

Go to a project
Commit 278d1591 by fengfan
Options

map

parent 71f18484
Showing with 28 additions and 18 deletions
map/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta <head>
name="viewport" <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" />
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" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>区域掩模</title> <title>区域掩模</title>
<style> <style>
...@@ -16,11 +14,12 @@ ...@@ -16,11 +14,12 @@
height: 100%; height: 100%;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="container"></div> <div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch"></script> <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 src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> --> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> -->
<script language="javascript"> <script language="javascript">
...@@ -55,9 +54,13 @@ ...@@ -55,9 +54,13 @@
var params = GetParams(); var params = GetParams();
//ltype 2 路网 12 poi //ltype 2 路网 12 poi
var Satellite = new AMap.TileLayer.Satellite({ var Satellite = new AMap.TileLayer.Satellite({
rejectMapMask: true, // rejectMapMask: true,
zIndex: 10 zIndex: 10
}); });
var SatelliteDowm = new AMap.TileLayer.Satellite({
rejectMapMask: true,
zIndex: 0
});
var RoadNet = new AMap.TileLayer.RoadNet({ var RoadNet = new AMap.TileLayer.RoadNet({
rejectMapMask: true, rejectMapMask: true,
mapStyle: 'amap://styles/' + styleId mapStyle: 'amap://styles/' + styleId
...@@ -66,13 +69,17 @@ ...@@ -66,13 +69,17 @@
//也可以直接通过经纬度构建mask路径 //也可以直接通过经纬度构建mask路径
var district = new AMap.DistrictSearch(opts); var district = new AMap.DistrictSearch(opts);
var map; var map;
var init = function() { var init = function () {
district.search(params.city ? params.city : '成都市', function(status, result) { district.search(params.city ? params.city : '成都市', function (status, result) {
console.log(result); console.log(result);
bounds = result.districtList[0].boundaries; bounds = result.districtList[0].boundaries;
boundsPath = bounds2Path(bounds); boundsPath = bounds2Path(bounds);
var mask = []
for (var i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]])
}
map = new AMap.Map('container', { map = new AMap.Map('container', {
// mask: mask, mask: mask,
center: [result.districtList[0].center.lng, result.districtList[0].center.lat], center: [result.districtList[0].center.lng, result.districtList[0].center.lat],
// mapStyle: 'amap://styles/' + styleId, // mapStyle: 'amap://styles/' + styleId,
disableSocket: true, disableSocket: true,
...@@ -85,6 +92,7 @@ ...@@ -85,6 +92,7 @@
// layers: [road, ]//Satellite, // layers: [road, ]//Satellite,
}); });
map.add(Satellite); map.add(Satellite);
map.add(SatelliteDowm);
findsubarea(result); findsubarea(result);
// map.getLayers()[0].setOpacity(0.5) // map.getLayers()[0].setOpacity(0.5)
// var maskerIn = new AMap.Marker({ // var maskerIn = new AMap.Marker({
...@@ -96,7 +104,7 @@ ...@@ -96,7 +104,7 @@
// map: map // map: map
// }) // })
//添加高度面 //添加高度面
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1000 }); var object3Dlayer = new AMap.Object3DLayer({ zIndex: 9 });
map.add(object3Dlayer); map.add(object3Dlayer);
var height = -59800; var height = -59800;
var color = '#ffffffcc'; //rgba var color = '#ffffffcc'; //rgba
...@@ -116,7 +124,7 @@ ...@@ -116,7 +124,7 @@
map: map map: map
}); });
} }
AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) { AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
initMask(DistrictExplorer); initMask(DistrictExplorer);
}); });
}); });
...@@ -131,7 +139,7 @@ ...@@ -131,7 +139,7 @@
console.log(map.getLayers()); console.log(map.getLayers());
var countryCode = 100000; //全国 var countryCode = 100000; //全国
districtExplorer.loadMultiAreaNodes([countryCode], function( districtExplorer.loadMultiAreaNodes([countryCode], function (
error, error,
areaNodes areaNodes
) { ) {
...@@ -172,7 +180,7 @@ ...@@ -172,7 +180,7 @@
function getLongestRing(feature) { function getLongestRing(feature) {
var rings = getAllRings(feature); var rings = getAllRings(feature);
rings.sort(function(a, b) { rings.sort(function (a, b) {
return b.length - a.length; return b.length - a.length;
}); });
...@@ -199,7 +207,7 @@ ...@@ -199,7 +207,7 @@
) { ) {
let adcode = let adcode =
childrensDistrictList[index].adcode childrensDistrictList[index].adcode
district.search(adcode, function(status, result) { district.search(adcode, function (status, result) {
// path.push.apply(path, ) // path.push.apply(path, )
var polygon2 = new AMap.Polygon({ var polygon2 = new AMap.Polygon({
bubble: true, bubble: true,
...@@ -216,5 +224,6 @@ ...@@ -216,5 +224,6 @@
} }
} }
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
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