Skip to content

html / MeteorologicalBureau

Go to a project
Commit 97319ad1 by fengfan
Options

map

parents 278d1591 73f9107f
Showing with 157 additions and 2 deletions
map/index.html
<!DOCTYPE html>
<html>
<<<<<<< HEAD
<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" />
......@@ -15,6 +16,16 @@
}
</style>
</head>
=======
<body>
<div id="container"></div>
<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>
......@@ -49,6 +60,7 @@
);
}
}
<<<<<<< HEAD
return theRequest;
}
var params = GetParams();
......@@ -126,6 +138,89 @@
}
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
});
var RoadNet = new AMap.TileLayer.RoadNet({
rejectMapMask: true,
mapStyle: 'amap://styles/' + styleId
});
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
var district = new AMap.DistrictSearch(opts);
var map;
var init = function() {
district.search(params.city ? params.city : '成都市', function(
status,
result
) {
console.log(result);
bounds = result.districtList[0].boundaries;
boundsPath = bounds2Path(bounds);
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);
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: 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: 8,
map: map
});
}
AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
initMask(DistrictExplorer);
});
// 获取人员信息
$.getJSON('./personal.json').then(res => {
console.log(JSON.parse(res));
currentDetailList = JSON.parse(res).currentDetailList
currentDetailList.map(item => {
setPersonalPoint(item);
});
});
>>>>>>> 73f9107f9fd6bd3de2c2bad02c1d402c7b5bf882
});
});
};
......@@ -226,4 +321,65 @@
</script>
</body>
</html>
\ No newline at end of file
<<<<<<< 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 = []
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)
});
});
}
}
function setPersonalPoint(item) {
const marker = new AMap.ElasticMarker({
map: map,
style: [
{
icon: {
img:
'https://upload.jianshu.io/users/upload_avatars/8613997/15e570d2-9dd0-4be4-b1c7-f0373ef1adc9.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp'
}
}
],
center: new AMap.LngLat(Number(item.lon), Number(item.lat)),
position: new AMap.LngLat(Number(item.lon), Number(item.lat)),
zIndex: 1000000
});
// map.add(marker);
}
</script>
</body>
</html>
>>>>>>> 73f9107f9fd6bd3de2c2bad02c1d402c7b5bf882
map/personal.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
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