Skip to content

html / MeteorologicalBureau

Go to a project
Commit 6803348d by fengfan
Options

map

parent f6a4dce2
Showing with 74 additions and 148 deletions
map/index-ff.html
...@@ -62,8 +62,32 @@ ...@@ -62,8 +62,32 @@
}); });
var SatelliteDown = new AMap.TileLayer.Satellite({ var SatelliteDown = new AMap.TileLayer.Satellite({
rejectMapMask: true, rejectMapMask: true,
// opacity:0.1,
zIndex: 0 zIndex: 0
}); });
//定义中国东南西北端点
var pNW = { lat: 59.1, lng: 73.1 }
var pNE = { lat: 59.1, lng: 136.1 }
var pSE = { lat: 3.1, lng: 136.1 }
var pSW = { lat: 3.1, lng: 73.1 }
var maskTileLayerBounds =new AMap.Bounds(pSW, pNE)
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 200;
var context = canvas.getContext('2d')
context.fillStyle = 'rgb(0,0,0)';
context.fillRect(0,0,200,200);
var CanvasLayer = new AMap.CanvasLayer({
rejectMapMask: true,
opacity:0.9,
zIndex:8,
canvas: canvas,
bounds: new AMap.Bounds(
[pSW.lng, pSW.lat],
[pNE.lng, pNE.lat]
),
zooms: [3, 18],
});
// debugger
var RoadNet = new AMap.TileLayer.RoadNet({ var RoadNet = new AMap.TileLayer.RoadNet({
rejectMapMask: true, rejectMapMask: true,
mapStyle: 'amap://styles/' + styleId mapStyle: 'amap://styles/' + styleId
...@@ -90,7 +114,7 @@ ...@@ -90,7 +114,7 @@
result.districtList[0].center.lng, result.districtList[0].center.lng,
result.districtList[0].center.lat result.districtList[0].center.lat
], ],
// mapStyle: 'amap://styles/' + styleId, mapStyle: 'amap://styles/' + styleId,
disableSocket: true, disableSocket: true,
viewMode: '3D', viewMode: '3D',
showLabel: false, showLabel: false,
...@@ -101,7 +125,9 @@ ...@@ -101,7 +125,9 @@
// layers: [road, ]//Satellite, // layers: [road, ]//Satellite,
}); });
map.add(Satellite); map.add(Satellite);
map.add(CanvasLayer);
map.add(SatelliteDown); map.add(SatelliteDown);
map.getLayers()[0].setzIndex(1000)
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({
......
map/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<<<<<<< HEAD
<head> <head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" /> <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" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...@@ -16,23 +15,14 @@ ...@@ -16,23 +15,14 @@
} }
</style> </style>
</head> </head>
=======
<body> <body>
<div id="container"></div> <div id="container"></div>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script> <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch,ElasticMarker"></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 language="javascript">
// open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/ff/git/
>>>>>>> 73f9107f9fd6bd3de2c2bad02c1d402c7b5bf882
<body>
<div id="container"></div>
<script <script
src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch"></script> src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch,ElasticMarker"></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">
...@@ -62,91 +52,42 @@ ...@@ -62,91 +52,42 @@
); );
} }
} }
<<<<<<< HEAD
return theRequest; return theRequest;
} }
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: false,
zIndex: 10 zIndex: 10
}); });
var SatelliteDowm = new AMap.TileLayer.Satellite({ var SatelliteDown = new AMap.TileLayer.Satellite({
rejectMapMask: true, rejectMapMask: true,
// opacity:0.1,
zIndex: 0 zIndex: 0
}); });
var RoadNet = new AMap.TileLayer.RoadNet({ //定义中国东南西北端点
var pNW = { lat: 59.1, lng: 73.1 }
var pNE = { lat: 59.1, lng: 136.1 }
var pSE = { lat: 3.1, lng: 136.1 }
var pSW = { lat: 3.1, lng: 73.1 }
var maskTileLayerBounds =new AMap.Bounds(pSW, pNE)
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 200;
var context = canvas.getContext('2d')
context.fillStyle = 'rgb(0,0,0)';
context.fillRect(0,0,200,200);
var CanvasLayer = new AMap.CanvasLayer({
rejectMapMask: true, rejectMapMask: true,
mapStyle: 'amap://styles/' + styleId opacity:0.9,
}); zIndex:8,
//利用行政区查询获取边界构建mask路径 canvas: canvas,
//也可以直接通过经纬度构建mask路径 bounds: new AMap.Bounds(
var district = new AMap.DistrictSearch(opts); [pSW.lng, pSW.lat],
var map; [pNE.lng, pNE.lat]
var init = function () { ),
district.search(params.city ? params.city : '成都市', function (status, result) { zooms: [3, 18],
console.log(result);
bounds = result.districtList[0].boundaries;
boundsPath = bounds2Path(bounds);
var mask = []
for (var i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]])
}
map = new AMap.Map('container', {
mask: mask,
center: [result.districtList[0].center.lng, result.districtList[0].center.lat],
// 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.add(SatelliteDowm);
findsubarea(result);
// 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: 9 });
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: 8,
map: map
});
}
AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
initMask(DistrictExplorer);
=======
var params = GetParams();
//ltype 2 路网 12 poi
var Satellite = new AMap.TileLayer.Satellite({
rejectMapMask: true,
zIndex: 10
}); });
// debugger
var RoadNet = new AMap.TileLayer.RoadNet({ var RoadNet = new AMap.TileLayer.RoadNet({
rejectMapMask: true, rejectMapMask: true,
mapStyle: 'amap://styles/' + styleId mapStyle: 'amap://styles/' + styleId
...@@ -155,21 +96,25 @@ ...@@ -155,21 +96,25 @@
//也可以直接通过经纬度构建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( district.search(params.city ? params.city : '成都市', function (
status, status,
result result
) { ) {
console.log(result); console.log(result);
bounds = result.districtList[0].boundaries; bounds = result.districtList[0].boundaries;
boundsPath = bounds2Path(bounds); boundsPath = bounds2Path(bounds);
let 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: [ center: [
result.districtList[0].center.lng, result.districtList[0].center.lng,
result.districtList[0].center.lat result.districtList[0].center.lat
], ],
// mapStyle: 'amap://styles/' + styleId, mapStyle: 'amap://styles/' + styleId,
disableSocket: true, disableSocket: true,
viewMode: '3D', viewMode: '3D',
showLabel: false, showLabel: false,
...@@ -180,6 +125,9 @@ ...@@ -180,6 +125,9 @@
// layers: [road, ]//Satellite, // layers: [road, ]//Satellite,
}); });
map.add(Satellite); map.add(Satellite);
map.add(CanvasLayer);
map.add(SatelliteDown);
map.getLayers()[0].setzIndex(1000)
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({
...@@ -191,7 +139,7 @@ ...@@ -191,7 +139,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
...@@ -211,7 +159,7 @@ ...@@ -211,7 +159,7 @@
map: map map: map
}); });
} }
AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) { AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
initMask(DistrictExplorer); initMask(DistrictExplorer);
}); });
// 获取人员信息 // 获取人员信息
...@@ -225,13 +173,12 @@ ...@@ -225,13 +173,12 @@
setPersonalPoint(item); setPersonalPoint(item);
}); });
}); });
>>>>>>> 73f9107f9fd6bd3de2c2bad02c1d402c7b5bf882
});
}); });
}; };
init(); init();
function initMask(DistrictExplorer) { function initMask(DistrictExplorer) {
console.log(map.getLayers());
//创建一个实例 //创建一个实例
var districtExplorer = new DistrictExplorer({ var districtExplorer = new DistrictExplorer({
map: map map: map
...@@ -262,6 +209,7 @@ ...@@ -262,6 +209,7 @@
fillColor: 'black', //填充色 fillColor: 'black', //填充色
fillOpacity: 0.65, //填充透明度 fillOpacity: 0.65, //填充透明度
map: map, map: map,
zIndex: 1000,
path: path path: path
}); });
}); });
...@@ -289,55 +237,6 @@ ...@@ -289,55 +237,6 @@
function bounds2Path(bounds) { function bounds2Path(bounds) {
var path = []; var path = [];
for (var i = 0; i < bounds.length; i += 1) { for (var i = 0; i < bounds.length; i += 1) {
var subPath = []
for (let index = 0; index < bounds[i].length; index++) {
let element = bounds[i][index];
subPath.push([element.lng, element.lat]);
}
path.push(subPath)
}
return path;
}
function findsubarea(res) {
let childrensDistrictList = res.districtList[0].districtList
for (
let index = 0;
index < childrensDistrictList.length;
index++
) {
let adcode =
childrensDistrictList[index].adcode
district.search(adcode, function (status, result) {
// path.push.apply(path, )
var polygon2 = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: '#99ffff', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线宽
fillColor: 'black', //填充色
fillOpacity: 0, //填充透明度
map: map,
path: bounds2Path(result.districtList[0].boundaries)
});
});
}
}
</script>
</body>
<<<<<<< HEAD
</html>
=======
rings.sort(function(a, b) {
return b.length - a.length;
});
return rings[0];
}
function bounds2Path(bounds) {
var path = [];
for (var i = 0; i < bounds.length; i += 1) {
var subPath = []; var subPath = [];
for (let index = 0; index < bounds[i].length; index++) { for (let index = 0; index < bounds[i].length; index++) {
let element = bounds[i][index]; let element = bounds[i][index];
...@@ -351,7 +250,7 @@ ...@@ -351,7 +250,7 @@
let childrensDistrictList = res.districtList[0].districtList; let childrensDistrictList = res.districtList[0].districtList;
for (let index = 0; index < childrensDistrictList.length; index++) { for (let index = 0; index < childrensDistrictList.length; index++) {
let adcode = childrensDistrictList[index].adcode; let 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,
...@@ -379,7 +278,7 @@ ...@@ -379,7 +278,7 @@
// } // }
// } // }
// ], // ],
zooms:[14,20], zooms: [14, 20],
center: new AMap.LngLat(Number(item.lon), Number(item.lat)), center: new AMap.LngLat(Number(item.lon), Number(item.lat)),
position: new AMap.LngLat(Number(item.lon), Number(item.lat)), position: new AMap.LngLat(Number(item.lon), Number(item.lat)),
zIndex: 1000, zIndex: 1000,
...@@ -397,6 +296,6 @@ ...@@ -397,6 +296,6 @@
} }
console.log(AMap.ElasticMarker); console.log(AMap.ElasticMarker);
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
>>>>>>> 73f9107f9fd6bd3de2c2bad02c1d402c7b5bf882
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