Skip to content

html / MeteorologicalBureau

Go to a project
Commit 54d9d033 by hanjixin
Options

es6 model not support

parent 2c03f58c
Showing with 259 additions and 1040 deletions
map/3d/echarts.min.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/3d/population.js deleted 100644 → 0
var population = [
{ name: 'Afghanistan', value: 28397.812 },
{ name: 'Angola', value: 19549.124 },
{ name: 'Albania', value: 3150.143 },
{ name: 'United Arab Emirates', value: 8441.537 },
{ name: 'Argentina', value: 40374.224 },
{ name: 'Armenia', value: 2963.496 },
{ name: 'French Southern and Antarctic Lands', value: 268.065 },
{ name: 'Australia', value: 22404.488 },
{ name: 'Austria', value: 8401.924 },
{ name: 'Azerbaijan', value: 9094.718 },
{ name: 'Burundi', value: 9232.753 },
{ name: 'Belgium', value: 10941.288 },
{ name: 'Benin', value: 9509.798 },
{ name: 'Burkina Faso', value: 15540.284 },
{ name: 'Bangladesh', value: 151125.475 },
{ name: 'Bulgaria', value: 7389.175 },
{ name: 'The Bahamas', value: 66402.316 },
{ name: 'Bosnia and Herzegovina', value: 3845.929 },
{ name: 'Belarus', value: 9491.07 },
{ name: 'Belize', value: 308.595 },
{ name: 'Bermuda', value: 64.951 },
{ name: 'Bolivia', value: 716.939 },
{ name: 'Brazil', value: 195210.154 },
{ name: 'Brunei', value: 27.223 },
{ name: 'Bhutan', value: 716.939 },
{ name: 'Botswana', value: 1969.341 },
{ name: 'Central African Republic', value: 4349.921 },
{ name: 'Canada', value: 34126.24 },
{ name: 'Switzerland', value: 7830.534 },
{ name: 'Chile', value: 17150.76 },
{ name: 'China', value: 1359821.465 },
{ name: 'Ivory Coast', value: 60508.978 },
{ name: 'Cameroon', value: 20624.343 },
{ name: 'Democratic Republic of the Congo', value: 62191.161 },
{ name: 'Republic of the Congo', value: 3573.024 },
{ name: 'Colombia', value: 46444.798 },
{ name: 'Costa Rica', value: 4669.685 },
{ name: 'Cuba', value: 11281.768 },
{ name: 'Northern Cyprus', value: 1.468 },
{ name: 'Cyprus', value: 1103.685 },
{ name: 'Czech Republic', value: 10553.701 },
{ name: 'Germany', value: 83017.404 },
{ name: 'Djibouti', value: 834.036 },
{ name: 'Denmark', value: 5550.959 },
{ name: 'Dominican Republic', value: 10016.797 },
{ name: 'Algeria', value: 37062.82 },
{ name: 'Ecuador', value: 15001.072 },
{ name: 'Egypt', value: 78075.705 },
{ name: 'Eritrea', value: 5741.159 },
{ name: 'Spain', value: 46182.038 },
{ name: 'Estonia', value: 1298.533 },
{ name: 'Ethiopia', value: 87095.281 },
{ name: 'Finland', value: 5367.693 },
{ name: 'Fiji', value: 860.559 },
{ name: 'Falkland Islands', value: 49.581 },
{ name: 'France', value: 63230.866 },
{ name: 'Gabon', value: 1556.222 },
{ name: 'United Kingdom', value: 62066.35 },
{ name: 'Georgia', value: 4388.674 },
{ name: 'Ghana', value: 24262.901 },
{ name: 'Guinea', value: 10876.033 },
{ name: 'Gambia', value: 1680.64 },
{ name: 'Guinea Bissau', value: 10876.033 },
{ name: 'Equatorial Guinea', value: 696.167 },
{ name: 'Greece', value: 11109.999 },
{ name: 'Greenland', value: 56.546 },
{ name: 'Guatemala', value: 14341.576 },
{ name: 'French Guiana', value: 231.169 },
{ name: 'Guyana', value: 786.126 },
{ name: 'Honduras', value: 7621.204 },
{ name: 'Croatia', value: 4338.027 },
{ name: 'Haiti', value: 9896.4 },
{ name: 'Hungary', value: 10014.633 },
{ name: 'Indonesia', value: 240676.485 },
{ name: 'India', value: 1205624.648 },
{ name: 'Ireland', value: 4467.561 },
{ name: 'Iran', value: 240676.485 },
{ name: 'Iraq', value: 30962.38 },
{ name: 'Iceland', value: 318.042 },
{ name: 'Israel', value: 7420.368 },
{ name: 'Italy', value: 60508.978 },
{ name: 'Jamaica', value: 2741.485 },
{ name: 'Jordan', value: 6454.554 },
{ name: 'Japan', value: 127352.833 },
{ name: 'Kazakhstan', value: 15921.127 },
{ name: 'Kenya', value: 40909.194 },
{ name: 'Kyrgyzstan', value: 5334.223 },
{ name: 'Cambodia', value: 14364.931 },
{ name: 'South Korea', value: 51452.352 },
{ name: 'Kosovo', value: 97.743 },
{ name: 'Kuwait', value: 2991.58 },
{ name: 'Laos', value: 6395.713 },
{ name: 'Lebanon', value: 4341.092 },
{ name: 'Liberia', value: 3957.99 },
{ name: 'Libya', value: 6040.612 },
{ name: 'Sri Lanka', value: 20758.779 },
{ name: 'Lesotho', value: 2008.921 },
{ name: 'Lithuania', value: 3068.457 },
{ name: 'Luxembourg', value: 507.885 },
{ name: 'Latvia', value: 2090.519 },
{ name: 'Morocco', value: 31642.36 },
{ name: 'Moldova', value: 103.619 },
{ name: 'Madagascar', value: 21079.532 },
{ name: 'Mexico', value: 117886.404 },
{ name: 'Macedonia', value: 507.885 },
{ name: 'Mali', value: 13985.961 },
{ name: 'Myanmar', value: 51931.231 },
{ name: 'Montenegro', value: 620.078 },
{ name: 'Mongolia', value: 2712.738 },
{ name: 'Mozambique', value: 23967.265 },
{ name: 'Mauritania', value: 3609.42 },
{ name: 'Malawi', value: 15013.694 },
{ name: 'Malaysia', value: 28275.835 },
{ name: 'Namibia', value: 2178.967 },
{ name: 'New Caledonia', value: 246.379 },
{ name: 'Niger', value: 15893.746 },
{ name: 'Nigeria', value: 159707.78 },
{ name: 'Nicaragua', value: 5822.209 },
{ name: 'Netherlands', value: 16615.243 },
{ name: 'Norway', value: 4891.251 },
{ name: 'Nepal', value: 26846.016 },
{ name: 'New Zealand', value: 4368.136 },
{ name: 'Oman', value: 2802.768 },
{ name: 'Pakistan', value: 173149.306 },
{ name: 'Panama', value: 3678.128 },
{ name: 'Peru', value: 29262.83 },
{ name: 'Philippines', value: 93444.322 },
{ name: 'Papua New Guinea', value: 6858.945 },
{ name: 'Poland', value: 38198.754 },
{ name: 'Puerto Rico', value: 3709.671 },
{ name: 'North Korea', value: 1.468 },
{ name: 'Portugal', value: 10589.792 },
{ name: 'Paraguay', value: 6459.721 },
{ name: 'Qatar', value: 1749.713 },
{ name: 'Romania', value: 21861.476 },
{ name: 'Russia', value: 21861.476 },
{ name: 'Rwanda', value: 10836.732 },
{ name: 'Western Sahara', value: 514.648 },
{ name: 'Saudi Arabia', value: 27258.387 },
{ name: 'Sudan', value: 35652.002 },
{ name: 'South Sudan', value: 9940.929 },
{ name: 'Senegal', value: 12950.564 },
{ name: 'Solomon Islands', value: 526.447 },
{ name: 'Sierra Leone', value: 5751.976 },
{ name: 'El Salvador', value: 6218.195 },
{ name: 'Somaliland', value: 9636.173 },
{ name: 'Somalia', value: 9636.173 },
{ name: 'Republic of Serbia', value: 3573.024 },
{ name: 'Suriname', value: 524.96 },
{ name: 'Slovakia', value: 5433.437 },
{ name: 'Slovenia', value: 2054.232 },
{ name: 'Sweden', value: 9382.297 },
{ name: 'Swaziland', value: 1193.148 },
{ name: 'Syria', value: 7830.534 },
{ name: 'Chad', value: 11720.781 },
{ name: 'Togo', value: 6306.014 },
{ name: 'Thailand', value: 66402.316 },
{ name: 'Tajikistan', value: 7627.326 },
{ name: 'Turkmenistan', value: 5041.995 },
{ name: 'East Timor', value: 10016.797 },
{ name: 'Trinidad and Tobago', value: 1328.095 },
{ name: 'Tunisia', value: 10631.83 },
{ name: 'Turkey', value: 72137.546 },
{ name: 'United Republic of Tanzania', value: 44973.33 },
{ name: 'Uganda', value: 33987.213 },
{ name: 'Ukraine', value: 46050.22 },
{ name: 'Uruguay', value: 3371.982 },
{ name: 'United States of America', value: 312247.116 },
{ name: 'Uzbekistan', value: 27769.27 },
{ name: 'Venezuela', value: 236.299 },
{ name: 'Vietnam', value: 89047.397 },
{ name: 'Vanuatu', value: 236.299 },
{ name: 'West Bank', value: 13.565 },
{ name: 'Yemen', value: 22763.008 },
{ name: 'South Africa', value: 51452.352 },
{ name: 'Zambia', value: 13216.985 },
{ name: 'Zimbabwe', value: 13076.978 }
];
\ No newline at end of file
map/3d/three.min.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/3d/world.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/baidu2.html deleted 100644 → 0
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100vh;
height: 100vh;
overflow: hidden;
margin: 0;
font-family: '微软雅黑';
}
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
</style>
<script
type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=orRAyNA22FrzmG9B61BkNQZPI1KR41tO"
></script>
<script src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<title>地图展示</title>
</head>
<body>
<!-- <img src="bus.png" alt=""> -->
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
// 创建地图实例
var map = new BMap.Map("allmap",{enableMapClick: false});
//以四川省为地图中心，显示层级为13
map.centerAndZoom("四川省", 8);
//允许滚动鼠标缩放地图
map.enableScrollWheelZoom(true);
setTimeout(function() {
map.enableDragging(); //两秒后开启拖拽
}, 2000);
map.setMapType(BMAP_HYBRID_MAP);
var index = 0;
var myGeo = new BMap.Geocoder();
//需要批量解析显示的地址
var adds = [
"煎茶镇",
"新兴镇",
"永安镇",
"白家沟",
"正兴镇",
"万安镇",
"南湖湿地公园"
];
var blist = [];
var districtLoading = 0;
function getBoundary() {
//设置指定显示区域双流、龙泉驿
addDistrict("成都市");
// addDistrict("成都市龙泉驿区");
}
function addDistrict(districtName) {
//使用计数器来控制加载过程
districtLoading++;
var bdary = new BMap.Boundary();
bdary.get(districtName, function(rs) { //获取行政区域
var count = rs.boundaries.length; //行政区域的点有多少个
if(count === 0) {
alert('未能获取当前输入行政区域');
return;
}
for(var i = 0; i < count; i++) {
blist.push({ points: rs.boundaries[i], name: districtName });
};
//加载完成区域点后计数器-1
districtLoading--;
if(districtLoading == 0) {
//全加载完成后画端点
drawBoundary();
}
});
}
function drawBoundary() {
//包含所有区域的点数组
var pointArray = [];
/*画遮蔽层的相关方法
*思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
* 这样就做出了一个经过多次西北角的闭合多边形*/
//定义中国东南西北端点，作为第一层
var pNW = { lat: 59.0, lng: 73.0 }
var pNE = { lat: 59.0, lng: 136.0 }
var pSE = { lat: 3.0, lng: 136.0 }
var pSW = { lat: 3.0, lng: 73.0 }
//向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
var pArray = [];
pArray.push(pNW);
pArray.push(pSW);
pArray.push(pSE);
pArray.push(pNE);
pArray.push(pNW);
//循环添加各闭合区域
for(var i = 0; i < blist.length; i++) {
//添加显示用标签层
var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });
label.hide();
map.addOverlay(label);
//添加多边形层并显示
var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#5185E6", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物
ply.name = blist[i].name;
ply.label = label;
map.addOverlay(ply);
//将点增加到视野范围内
var path = ply.getPath();
pointArray = pointArray.concat(path);
//将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
pArray = pArray.concat(path);
pArray.push(pArray[0]);
}
//限定显示区域，需要引用api库
var boundply = new BMap.Polygon(pointArray);
BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
map.setViewport(pointArray); //调整视野
//添加遮蔽层(描边线条，遮罩层颜色)
var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#fff", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 1 }); //建立多边形覆盖物
map.addOverlay(plyall);
}
function bdGEO() {
var add = adds[index];
geocodeSearch(add);
index++;
}
getBoundary();
function geocodeSearch(add) {
if(index < adds.length) {
setTimeout(window.bdGEO, 400);
}
myGeo.getPoint(add, function(point) {
if(point) {
var address = new BMap.Point(point.lng, point.lat);
// addMarker(address, new BMap.Label(add, { offset: new BMap.Size(20, -10) }));
}
}, "成都市");
}
// 编写自定义函数,创建标注
function addMarker(point, label) {
//使用自定义图标做标注点，宽高为8 10
var myIcon = new BMap.Icon("marker_red_sprite2.png", new BMap.Size(8, 10));
var marker = new BMap.Marker(point,{icon: myIcon});
map.addOverlay(marker);
marker.setLabel(label);
label.setStyle({
display:"none"
})
marker.addEventListener("mouseover",function(e){
var label = this.getLabel();
//设置label的样式，这里没有过多要求，能显示出来就行
label.setStyle({
display:"block",
borderRadius:"2px",
border:"1px solid #5185E6",
padding:"2px 4px"
})
});
marker.addEventListener("mouseout",function(e){
var label = this.getLabel();
label.setStyle({
display:"none"
})
});
}
bdGEO();
</script>
map/chengdu.json deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/chengdu2.json deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/geo/510000.geoJson deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/geo/510000/510100.geoJson deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/geo/510000/510300.geoJson deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/geo/510000/510800.geoJson deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/geo/510000/511300.geoJson deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/geo/510000/511500.geoJson deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/geo/510000/513300.geoJson deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/geo/510000/513400.geoJson deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
map/index-ff.html deleted 100644 → 0
<!DOCTYPE html>
<html>
<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" />
<title>区域掩模</title>
<style>
body,
html,
#container {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<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://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch,ElasticMarker,AMap.MarkerClusterer"></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="./js/utils.js?123"></script>
<script language="javascript">
//http://wanda-h5.bdideal.com/11b/map/index.html?maskOpacity=0.7&wallHeight=-32000&wallColor=25a1ff77&boundsColor=25a1ffff&boundsWeight=3&strokeWeight=1&strokeColor=a0eaff&strokeOpacity=1&city=%E9%87%8D%E5%BA%86
// open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/ff/git/
var styleId = '14732285e0b3c284fa6efdb25627d3f6'; // 高德地图样式ID
var opts = {
// 配置查询行政区的
subdistrict: 3,
extensions: 'all',
level: 'district'
};
var Markers = []; // 标记点容器
var bounds;
var boundsPath = [];
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'
});
var params = GetParams();
//ltype 2 路网 12 poi
var Satellite = new AMap.TileLayer.Satellite({
rejectMapMask: false,
zIndex: 10
});
var SatelliteDown = new AMap.TileLayer.Satellite({
rejectMapMask: true,
// opacity:0.1,
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);
// debugger
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;
var _bounds = bounds2Path(bounds);
boundsPath = _bounds.path;
var dragLimitBounds = new AMap.Bounds(
new AMap.LngLat(Number(_bounds.minlng), Number(_bounds.minlat)),
new AMap.LngLat(Number(_bounds.maxlng), Number(_bounds.maxlat))
);
let 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,
zooms: [8, 13],
// layers: [RoadNet,Satellite ]//Satellite,
// layers: [road, ]//Satellite,
});
map.add(Satellite); //高亮mask 卫星图
map.add(getCanvasLayer()); // 半黑遮罩层
map.add(SatelliteDown); //底图 卫星图
// map.getLayers()[0].setzIndex(1000); //个性地图置顶
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 = params.wallHeight||-32000;
var color = params.wallColor?('#'+params.wallColor):'#25a1ff77'; //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: params.boundsColor?('#'+params.boundsColor):'#a0eaffff', //rgba'#25a1ffff',
strokeWeight: params.boundsWeight||1,
map: map
});
}
map.setFitView();
dragLimit(dragLimitBounds); //拖动限制 限制地图显示范围
// 获取人员信息
$.getJSON('./personal.json').then(res => {
console.log(JSON.parse(res));
currentDetailList = JSON.parse(res).currentDetailList.slice(
0,
2000
);
currentDetailList.map(item => {
setPersonalPoint(item);
});
cluster = new AMap.MarkerClusterer(map, Markers, { gridSize: 80 });
});
});
};
init();
</script>
</body>
</html>
\ No newline at end of file
map/index-hank.html deleted 100644 → 0
<!DOCTYPE html>
<html>
<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" />
<title>区域掩模</title>
<style>
body,
html,
#container {
margin: 0;
width: 90%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script
language="javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch"
></script>
<script language="javascript">
var styleId = '14732285e0b3c284fa6efdb25627d3f6';
var opts = {
subdistrict: 10,
extensions: 'all',
level: 'city,district'
};
function getDrictArea(name, map, item) {
var district = new AMap.DistrictSearch({
// 返回行政区边界坐标等具体信息
extensions: 'all',
// 设置查询行政区级别为 区
level: 'district'
});
district.search(name, function(status, result) {
// 获取朝阳区的边界信息
var bounds = result.districtList[0].boundaries;
var polygons = [];
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.01,
fillColor: '#CCF3FF',
strokeColor: '#99ffff'
});
// new AMap.Text({
// text: name,
// map,
// position: new AMap.LngLat(item.center.lng,item.center.lat),
// zIndex: 10000
// })
polygons.push(polygon);
}
// 地图自适应
map.setFitView();
}
});
}
var road = new AMap.TileLayer();
var Satellite = new AMap.TileLayer.Satellite({
rejectMapMask: true
});
var RoadNet = new AMap.TileLayer.RoadNet({
rejectMapMask: true,
mapStyle: 'amap://styles/' + styleId
});
//利用行政区查询获取边界构建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 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: 4,
map: map
});
}
result.districtList[0].districtList[0].districtList.map(item => {
getDrictArea(item.name, map, item)
});
console.log(result);
// var layer = new Loca.PolygonLayer({
// map: map,
// fitView: true
// });
// layer.setData(data, {
// lnglat: 'coordinates'
// });
// var idx = 0;
// layer.setOptions({
// style: {
// height: function() {
// return Math.random() * 20000;
// },
// opacity: 0.8,
// color: function() {
// return colors[idx++ % colors.length];
// }
// }
// });
// layer.render();
});
</script>
</body>
</html>
map/index.1.html 0 → 100644
<!DOCTYPE html>
<html>
<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" />
<title>MAP</title>
<link rel="stylesheet" href="css/main.css">
<style>
</style>
</head>
<body>
<!-- <div id=personpop>
<div id=box>
<div id=title>阿斯顿</div>
<div id=contant>
<div class=li>
<div>阿斯顿</div>1
</div>
<div class=li>
<div>阿斯顿</div>2
</div>
<div class=li>
<div>阿顿</div>啊实打实的
</div>
</div>
<div id=close onclick="popclose()"></div>
</div>
</div> -->
<div id="container"></div>
<div id=nav>
<div class="item" onclick="go(0)"><span class="icon icon1"></span>预警信息</div>
<div class="item active" onclick="go(1)"><span class="icon icon2"></span>设备</div>
<div class="subnav active subnav1">
<div class=active onclick="go(1,0)">大喇叭</div>
<div onclick="go(1,1)">显示屏</div>
<div onclick="go(1,2)">北斗</div>
</div>
<div class="item" onclick="go(2)"><span class="icon icon3"></span>人员</div>
<div class="subnav subnav2">
<div onclick="go(2,0)">信息员</div>
<div onclick="go(2,1)">应急责任人</div>
</div>
</div>
<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="./js/api.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch,ElasticMarker,AMap.MarkerClusterer"></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="./js/utils.js?123"></script> -->
<style>
.amap-logo,.amap-copyright{opacity: 0;display: none!important;}
</style>
<script language=javascript type=module>
//http://106.120.82.243:8080/qxyj/pageHtml/login.html wis 12379
import { Map3D } from './js/Map3D.js';
import { GetParams } from './js/tools.js';
window.urlParams = GetParams()
//成都 重庆 天津 北京 上海 大连 三沙 湖北 中国
//350200
//350500
//320300 370100
window.map3d = new Map3D(urlParams.adcode||'610000'||'成都','container',urlParams,(_map3d)=>{
go(1,1)
});
window.review = function (params) {
map3d.review()
}
window.delPoi = function (params) {
try {
map3d.map.clearInfoWindow()
map3d.delPoi(pois)
window.pois = []
} catch (error) {
}
}
window.addPoiByApi = function (api,type,type1) {
console.log(api);
window.delPoi()
window.review()
$.get(api).then(res => {
var currentDetailList =res.data
console.log(currentDetailList);
if(type1 == 'MassMarks'){
map3d.addPoisMassMarks(currentDetailList,type).then(res=>window.pois = res)
}else if(type1 == 'Single'){
map3d.addPoisSingle(currentDetailList,type).then(res=>window.pois = res)
}else{
map3d.addPoisMarkerClusterer(currentDetailList,type).then(res=>window.pois = res)
}
});
}
</script>
<script>
var oldi1 = 0, oldi2 = 0
function popclose(){
console.log('popclose');
map3d.map.clearInfoWindow()
}
function go(i1, i2) {
console.log(oldi1, oldi2);
console.log(i1, i2);
if (i1 == oldi1 && i2 == oldi2) {
return false
}
$(".item").removeClass("active").removeClass("text-shadow")
$(".item").eq(i1).addClass("active text-shadow")
$(".subnav").hide()
$(".subnav" + i1).show()
$(".subnav" + i1).find("div").removeClass("active").removeClass("text-shadow")
if (typeof (i2) != 'undefined') {
$(".subnav" + i1).find("div").eq(i2).addClass("active text-shadow")
}
if (i1 == 0 && typeof (i2) == 'undefined') {//预警信息
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/city/two/list/'+urlParams.adcode,'setWarnPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
if (i1 == 1 && i2 == 0) {//大喇叭
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=1`,'setEquipmentPoint', 'Cluster')
oldi1 = i1, oldi2 = i2
}
if (i1 == 1 && i2 == 1) {//显示屏
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=2`,'setEquipmentPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
if (i1 == 1 && i2 == 2) {//北斗
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=3`,'setEquipmentPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
if (i1 == 2 && i2 == 0) {//信息员
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/people/two/info/'+urlParams.adcode,'setPersonalPoint', 'Cluster')
oldi1 = i1, oldi2 = i2
}
if (i1 == 2 && i2 == 1) {//应急责任人
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/people/two/principal/'+urlParams.adcode,'setPrincipalPoint', 'Single')
oldi1 = i1, oldi2 = i2
}
}
// go(i1,i2)
</script>
</body>
</html>
\ No newline at end of file
map/index.html
...@@ -12,29 +12,12 @@ ...@@ -12,29 +12,12 @@
</head> </head>
<body> <body>
<!-- <div id=personpop>
<div id=box>
<div id=title>阿斯顿</div>
<div id=contant>
<div class=li>
<div>阿斯顿</div>1
</div>
<div class=li>
<div>阿斯顿</div>2
</div>
<div class=li>
<div>阿顿</div>啊实打实的
</div>
</div>
<div id=close onclick="popclose()"></div>
</div>
</div> -->
<div id="container"></div> <div id="container"></div>
<div id=nav> <div id=nav>
<div class="item" onclick="go(0)"><span class="icon icon1"></span>预警信息</div> <div class="item" onclick="go(0)"><span class="icon icon1"></span>预警信息</div>
<div class="item active" onclick="go(1)"><span class="icon icon2"></span>设备</div> <div class="item" onclick="go(1)"><span class="icon icon2"></span>设备</div>
<div class="subnav active subnav1"> <div class="subnav subnav1">
<div class=active onclick="go(1,0)">大喇叭</div> <div class='' onclick="go(1,0)">大喇叭</div>
<div onclick="go(1,1)">显示屏</div> <div onclick="go(1,1)">显示屏</div>
<div onclick="go(1,2)">北斗</div> <div onclick="go(1,2)">北斗</div>
</div> </div>
...@@ -46,27 +29,32 @@ ...@@ -46,27 +29,32 @@
</div> </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="./js/jq.js"></script>
<script src="./js/api.js"></script> <script src="./js/api.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch,ElasticMarker,AMap.MarkerClusterer"></script> <script src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch,ElasticMarker,AMap.MarkerClusterer"></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="./js/utils.js?123"></script> -->
<style> <style>
.amap-logo,.amap-copyright{opacity: 0;display: none!important;} .amap-logo,
.amap-copyright {
opacity: 0;
display: none !important;
}
</style> </style>
<script src="./js/tools.js"></script>
<script language=javascript type=module> <script src="./js/Map3D.js"></script>
<script language=javascript>
// <script language=javascript type=module>
//http://106.120.82.243:8080/qxyj/pageHtml/login.html wis 12379 //http://106.120.82.243:8080/qxyj/pageHtml/login.html wis 12379
import { Map3D } from './js/Map3D.js'; // import { Map3D } from './js/Map3D.js';
import { GetParams } from './js/tools.js'; // import { GetParams } from './js/tools.js';
window.urlParams = GetParams() window.urlParams = GetParams()
//成都 重庆 天津 北京 上海 大连 三沙 湖北 中国 //成都 重庆 天津 北京 上海 大连 三沙 湖北 中国
//350200 //350200
//350500 //350500
//320300 370100 //320300 370100
window.map3d = new Map3D(urlParams.adcode||'610000'||'成都','container',urlParams,(_map3d)=>{ window.map3d = new Map3D(urlParams.adcode || '610000' || '成都', 'container', urlParams, (_map3d) => {
go(1,1) go(0)
}); });
window.review = function (params) { window.review = function (params) {
map3d.review() map3d.review()
...@@ -80,19 +68,19 @@ ...@@ -80,19 +68,19 @@
} }
} }
window.addPoiByApi = function (api,type,type1) { window.addPoiByApi = function (api, type, type1) {
console.log(api); console.log(api);
window.delPoi() window.delPoi()
window.review() window.review()
$.get(api).then(res => { $.get(api).then(res => {
var currentDetailList =res.data var currentDetailList = res.data
console.log(currentDetailList); console.log(currentDetailList);
if(type1 == 'MassMarks'){ if (type1 == 'MassMarks') {
map3d.addPoisMassMarks(currentDetailList,type).then(res=>window.pois = res) map3d.addPoisMassMarks(currentDetailList, type).then(res => window.pois = res)
}else if(type1 == 'Single'){ } else if (type1 == 'Single') {
map3d.addPoisSingle(currentDetailList,type).then(res=>window.pois = res) map3d.addPoisSingle(currentDetailList, type).then(res => window.pois = res)
}else{ } else {
map3d.addPoisMarkerClusterer(currentDetailList,type).then(res=>window.pois = res) map3d.addPoisMarkerClusterer(currentDetailList, type).then(res => window.pois = res)
} }
}); });
...@@ -100,7 +88,7 @@ ...@@ -100,7 +88,7 @@
</script> </script>
<script> <script>
var oldi1 = 0, oldi2 = 0 var oldi1 = 0, oldi2 = 0
function popclose(){ function popclose() {
console.log('popclose'); console.log('popclose');
map3d.map.clearInfoWindow() map3d.map.clearInfoWindow()
} }
...@@ -123,30 +111,30 @@ ...@@ -123,30 +111,30 @@
if (i1 == 0 && typeof (i2) == 'undefined') {//预警信息 if (i1 == 0 && typeof (i2) == 'undefined') {//预警信息
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/city/two/list/'+urlParams.adcode,'setWarnPoint', 'Single') addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/city/two/list/' + urlParams.adcode, 'setWarnPoint', 'Single')
oldi1 = i1, oldi2 = i2 oldi1 = i1, oldi2 = i2
} }
if (i1 == 1 && i2 == 0) {//大喇叭 if (i1 == 1 && i2 == 0) {//大喇叭
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=1`,'setEquipmentPoint', 'Cluster') addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=1`, 'setEquipmentPoint', 'Cluster')
oldi1 = i1, oldi2 = i2 oldi1 = i1, oldi2 = i2
} }
if (i1 == 1 && i2 == 1) {//显示屏 if (i1 == 1 && i2 == 1) {//显示屏
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=2`,'setEquipmentPoint', 'Single') addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=2`, 'setEquipmentPoint', 'Single')
oldi1 = i1, oldi2 = i2 oldi1 = i1, oldi2 = i2
} }
if (i1 == 1 && i2 == 2) {//北斗 if (i1 == 1 && i2 == 2) {//北斗
addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=3`,'setEquipmentPoint', 'Single') addPoiByApi(`http://123.56.149.208:8091/external/get/early/warn/equipment/two?code=${urlParams.adcode}&clientStyle=3`, 'setEquipmentPoint', 'Single')
oldi1 = i1, oldi2 = i2 oldi1 = i1, oldi2 = i2
} }
if (i1 == 2 && i2 == 0) {//信息员 if (i1 == 2 && i2 == 0) {//信息员
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/people/two/info/'+urlParams.adcode,'setPersonalPoint', 'Cluster') addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/people/two/info/' + urlParams.adcode, 'setPersonalPoint', 'Cluster')
oldi1 = i1, oldi2 = i2 oldi1 = i1, oldi2 = i2
} }
if (i1 == 2 && i2 == 1) {//应急责任人 if (i1 == 2 && i2 == 1) {//应急责任人
addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/people/two/principal/'+urlParams.adcode,'setPrincipalPoint', 'Single') addPoiByApi('http://123.56.149.208:8091/external/get/early/warn/people/two/principal/' + urlParams.adcode, 'setPrincipalPoint', 'Single')
oldi1 = i1, oldi2 = i2 oldi1 = i1, oldi2 = i2
} }
......
map/js/Map3D.js
import { bounds2Path, MaskLayer } from "./tools.js" // import { bounds2Path, MaskLayer } from "./tools.js"
var _renderClusterMarker = function (context, count) { var _renderClusterMarker = function (context, count) {
var factor = Math.pow(context.count / count, 1 / 18); var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div'); var div = document.createElement('div');
...@@ -168,7 +168,7 @@ class Map3D { ...@@ -168,7 +168,7 @@ class Map3D {
marker._data = item marker._data = item
marker.on('click', (params) => { marker.on('click', (params) => {
console.log(item, params); console.log(item, params);
infoWindow.open(this.map, marker.getPosition()); // infoWindow.open(this.map, marker.getPosition());
}) })
...@@ -224,7 +224,7 @@ class Map3D { ...@@ -224,7 +224,7 @@ class Map3D {
marker._data = item marker._data = item
marker.on('click', (params) => { marker.on('click', (params) => {
console.log(item, params); console.log(item, params);
infoWindow.open(this.map, marker.getPosition()); // infoWindow.open(this.map, marker.getPosition());
}) })
...@@ -279,7 +279,7 @@ class Map3D { ...@@ -279,7 +279,7 @@ class Map3D {
marker._data = item marker._data = item
marker.on('click', (params) => { marker.on('click', (params) => {
console.log(item, params); console.log(item, params);
infoWindow.open(this.map, marker.getPosition()); // infoWindow.open(this.map, marker.getPosition());
}) })
...@@ -334,7 +334,7 @@ class Map3D { ...@@ -334,7 +334,7 @@ class Map3D {
marker._data = item marker._data = item
marker.on('click', (params) => { marker.on('click', (params) => {
console.log(item, params); console.log(item, params);
infoWindow.open(this.map, marker.getPosition()); // infoWindow.open(this.map, marker.getPosition());
}) })
...@@ -539,4 +539,4 @@ class Map3D { ...@@ -539,4 +539,4 @@ class Map3D {
return Promise.all(PromiseArr) return Promise.all(PromiseArr)
} }
} }
export { Map3D } // export { Map3D }
\ No newline at end of file \ No newline at end of file
map/js/jq.js 0 → 100644
This diff is collapsed. Click to expand it.
map/js/tools.1.js 0 → 100644
function GetParams() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf('?') != -1) {
var str = url.substr(1);
var strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
}
}
return theRequest;
}
function bounds2Path(bounds) {
var maxlng, minlng, maxlat, minlat;
var path = [];
var mask = [];
for (var i = 0; i < bounds.length; i += 1) {
mask.push([bounds[i]]);
var subPath = [];
for (let index = 0; index < bounds[i].length; index++) {
let element = bounds[i][index];
subPath.push([element.lng, element.lat]);
if (!maxlng || element.lng > maxlng) maxlng = element.lng;
if (!minlng || element.lng < minlng) minlng = element.lng;
if (!maxlat || element.lat > maxlat) maxlat = element.lat;
if (!minlat || element.lat < minlat) minlat = element.lat;
// console.log(maxlat,minlat);
}
path.push(subPath);
}
return { path, maxlng, minlng, maxlat, minlat, mask };
}
function MaskLayer(maskOpacity) {
//定义中国东南西北端点
// var pNW = { lat: 59.1, lng: 73.1 };
var pNE = { lat: 89.9, lng: 179.9 };
// var pSE = { lat: 3.1, lng: 136.1 };
var pSW = { lat: -89.9, lng: -179.9 };
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: maskOpacity || 0.7,
zIndex: 8,
canvas: canvas,
bounds: new AMap.Bounds([pSW.lng, pSW.lat], [pNE.lng, pNE.lat]),
zooms: [3, 18]
});
return CanvasLayer;
}
export { GetParams, bounds2Path ,MaskLayer}
\ No newline at end of file
map/js/tools.js
...@@ -54,4 +54,4 @@ function MaskLayer(maskOpacity) { ...@@ -54,4 +54,4 @@ function MaskLayer(maskOpacity) {
}); });
return CanvasLayer; return CanvasLayer;
} }
export { GetParams, bounds2Path ,MaskLayer} // export { GetParams, bounds2Path ,MaskLayer}
\ No newline at end of file \ 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