Skip to content

html / MeteorologicalBureau

Go to a project
Commit 71f18484 by fengfan
Options

map

parents 82e1ce65 25e986ce
Showing with 83 additions and 63 deletions
map/.DS_Store
No preview for this file type
map/index.html
<!DOCTYPE HTML> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"> name="viewport"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 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> <title>区域掩模</title>
<style> <style>
body, body,
...@@ -11,21 +13,20 @@ ...@@ -11,21 +13,20 @@
#container { #container {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100% height: 100%;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="container"></div> <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"></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">
// open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/ff/git/ // open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/ff/git/
var styleId = '14732285e0b3c284fa6efdb25627d3f6' var styleId = '14732285e0b3c284fa6efdb25627d3f6';
var opts = { var opts = {
subdistrict: 3, subdistrict: 3,
extensions: 'all', extensions: 'all',
...@@ -34,41 +35,57 @@ ...@@ -34,41 +35,57 @@
var bounds; var bounds;
var boundsPath = []; var boundsPath = [];
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" getTileUrl:
}) 'https://wprd02.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&lang=zh_cn&size=1&scl=1&style=8&ltype=12'
});
function GetParams() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf('?') != -1) {
var str = url.substr(1);
strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = decodeURI(
strs[i].split('=')[1]
);
}
}
return theRequest;
}
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: 1 zIndex: 10
}) });
var RoadNet = new AMap.TileLayer.RoadNet({ var RoadNet = new AMap.TileLayer.RoadNet({
rejectMapMask: true, rejectMapMask: true,
}) mapStyle: 'amap://styles/' + styleId
});
//利用行政区查询获取边界构建mask路径 //利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建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('110000', 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);
map = new AMap.Map('container', { map = new AMap.Map('container', {
// mask: mask, // mask: mask,
center: [116.472804, 39.995725], center: [result.districtList[0].center.lng, 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,
labelzIndex: 130, labelzIndex: 130,
pitch: 40, pitch: 40,
zoom: 9, zoom: 9
// layers: [RoadNet,Satellite ]//Satellite, // layers: [RoadNet,Satellite ]//Satellite,
// layers: [road, ]//Satellite, // layers: [road, ]//Satellite,
}); });
map.add(Satellite); map.add(Satellite);
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({
// position: [116.501415, 39.926055], // position: [116.501415, 39.926055],
...@@ -80,16 +97,16 @@ ...@@ -80,16 +97,16 @@
// }) // })
//添加高度面 //添加高度面
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1000 }); var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1000 });
map.add(object3Dlayer) map.add(object3Dlayer);
var height = -59800; var height = -59800;
var color = '#ffffffcc';//rgba var color = '#ffffffcc'; //rgba
// var wall = new AMap.Object3D.Wall({ var wall = new AMap.Object3D.Wall({
// path: bounds, path: bounds,
// height: height, height: height,
// color: color color: color
// }); });
// wall.transparent = true wall.transparent = true;
// object3Dlayer.add(wall) object3Dlayer.add(wall);
//添加描边 //添加描边
for (var i = 0; i < bounds.length; i += 1) { for (var i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({ new AMap.Polyline({
...@@ -97,24 +114,28 @@ ...@@ -97,24 +114,28 @@
strokeColor: '#99ffff', strokeColor: '#99ffff',
strokeWeight: 8, strokeWeight: 8,
map: map map: map
}) });
} }
AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) { AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
initMask(DistrictExplorer); initMask(DistrictExplorer);
}); });
}); });
} };
init() init();
function initMask(DistrictExplorer) { function initMask(DistrictExplorer) {
//创建一个实例 //创建一个实例
var districtExplorer = new DistrictExplorer({ var districtExplorer = new DistrictExplorer({
map: map map: map
}); });
console.log(map.getLayers()) console.log(map.getLayers());
var countryCode = 100000 //全国 var countryCode = 100000; //全国
districtExplorer.loadMultiAreaNodes([countryCode], function (error, areaNodes) {//.concat(areaCodes) districtExplorer.loadMultiAreaNodes([countryCode], function(
error,
areaNodes
) {
//.concat(areaCodes)
var cityNode = areaNodes[0], var cityNode = areaNodes[0],
areaNodes = areaNodes.slice(1); areaNodes = areaNodes.slice(1);
...@@ -123,8 +144,7 @@ ...@@ -123,8 +144,7 @@
//首先放置背景区域，这里是大陆的边界 //首先放置背景区域，这里是大陆的边界
path.push(getLongestRing(cityNode.getParentFeature())); path.push(getLongestRing(cityNode.getParentFeature()));
path.push.apply(path, boundsPath);
path.push.apply(path, [boundsPath])
var polygon = new AMap.Polygon({ var polygon = new AMap.Polygon({
bubble: true, bubble: true,
lineJoin: 'round', lineJoin: 'round',
...@@ -136,14 +156,9 @@ ...@@ -136,14 +156,9 @@
map: map, map: map,
path: path path: path
}); });
});
})
} }
function getAllRings(feature) { function getAllRings(feature) {
var coords = feature.geometry.coordinates, var coords = feature.geometry.coordinates,
rings = []; rings = [];
...@@ -157,26 +172,34 @@ ...@@ -157,26 +172,34 @@
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;
}); });
return rings[0]; return rings[0];
} }
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++) { for (let index = 0; index < bounds[i].length; index++) {
let element = bounds[i][index]; let element = bounds[i][index];
path.push([element.lng, element.lat]) subPath.push([element.lng, element.lat]);
} }
path.push(subPath)
} }
return path return path;
} }
function findsubarea(res) { function findsubarea(res) {
for (let index = 0; index < res.districtList[0].districtList[0].districtList.length; index++) { let childrensDistrictList = res.districtList[0].districtList
let adcode = res.districtList[0].districtList[0].districtList[index].adcode; for (
district.search(adcode, function (status, result) { let index = 0;
index < childrensDistrictList.length;
index++
) {
let adcode =
childrensDistrictList[index].adcode
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,
...@@ -185,16 +208,13 @@ ...@@ -185,16 +208,13 @@
strokeOpacity: 1, //线透明度 strokeOpacity: 1, //线透明度
strokeWeight: 2, //线宽 strokeWeight: 2, //线宽
fillColor: 'black', //填充色 fillColor: 'black', //填充色
fillOpacity: 0., //填充透明度 fillOpacity: 0, //填充透明度
map: map, map: map,
path: [bounds2Path(result.districtList[0].boundaries)] path: bounds2Path(result.districtList[0].boundaries)
}) });
}) });
} }
} }
</script> </script>
</body> </body>
</html> </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