Skip to content

html / MeteorologicalBureau

Go to a project
Commit b57b6bf0 by fengfan
Options

map

parent 704b09d1
Showing with 541 additions and 350 deletions
map/index-ff.html
......@@ -19,125 +19,83 @@
<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"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></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 language="javascript">
// open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/ff/git/
var params = GetParams(); //url 入参
var styleId = '14732285e0b3c284fa6efdb25627d3f6';
var opts = {
subdistrict: 3,
extensions: 'all',
level: 'district'
};
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'
});
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
var district = new AMap.DistrictSearch(opts);
var Markers = [];//点
var bounds;//城市 bounds
var boundsPath = [];//城市 bounds 路径
var limit
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)
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({
rejectMapMask: true,
mapStyle: 'amap://styles/' + styleId
});
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
var district = new AMap.DistrictSearch(opts);
var CanvasLayer = new MaskLayer()
var map;
var init = function () {
init();
function init () {
district.search(params.city ? params.city : '成都市', function (
status,
result
) {
console.log(result);
bounds = result.districtList[0].boundaries;
boundsPath = bounds2Path(bounds);
var _bounds = bounds2Path(bounds);
boundsPath = _bounds.path
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,
zooms:[8,13],
pitch: 40,
zoom: 9
// layers: [RoadNet,Satellite ]//Satellite,
// layers: [road, ]//Satellite,
});
//定义中国东南西北端点
var pNW = { lat: 59.1, lng: 73.1 }
var pNE = { lat: -179.9, lng: 179.9 }
var pSE = { lat: 3.1, lng: 136.1 }
var pSW = { lat: -73.1, lng: 83.1 }
var mapBounds = new AMap.Bounds(pSW, pNE)
map.add(Satellite);//高亮mask 卫星图
map.add(CanvasLayer);// 半黑遮罩层
map.add(SatelliteDown);//底图 卫星图
map.getLayers()[0].setzIndex(1000);//个性地图置顶
map.getLayers()[0].setzIndex(11);//个性地图置顶
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);
......@@ -150,6 +108,7 @@
});
wall.transparent = true;
object3Dlayer.add(wall);
//添加描边
for (var i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
......@@ -159,92 +118,45 @@
map: map
});
}
// AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
// initMask(DistrictExplorer);
// });
// 设置合适的zoom center
map.setFitView();
dragLimit(dragLimitBounds)//拖动限制 限制地图显示范围
// 获取人员信息
$.getJSON('./personal.json').then(res => {
console.log(JSON.parse(res));
currentDetailList = JSON.parse(res).currentDetailList.slice(
0,
1000
100
);
currentDetailList.map(item => {
setPersonalPoint(item);
});
console.log(Markers)
cluster = new AMap.MarkerClusterer(map, Markers, { gridSize: 80 })
});
});
};
init();
function initMask(DistrictExplorer) {
console.log(map.getLayers());
//创建一个实例
var districtExplorer = new DistrictExplorer({
map: map
});
console.log(map.getLayers());
var countryCode = 100000; //全国
districtExplorer.loadMultiAreaNodes([countryCode], function (
error,
areaNodes
) {
//.concat(areaCodes)
var cityNode = areaNodes[0],
areaNodes = areaNodes.slice(1);
var path = [];
//首先放置背景区域，这里是大陆的边界
path.push(getLongestRing(cityNode.getParentFeature()));
path.push.apply(path, boundsPath);
var polygon = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: '#99ffff', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 5, //线宽
fillColor: 'black', //填充色
fillOpacity: 0.65, //填充透明度
map: map,
zIndex: 1000,
path: path
});
});
}
function getAllRings(feature) {
var coords = feature.geometry.coordinates,
rings = [];
for (var i = 0, len = coords.length; i < len; i++) {
rings.push(coords[i][0]);
}
return rings;
}
function getLongestRing(feature) {
var rings = getAllRings(feature);
rings.sort(function (a, b) {
return b.length - a.length;
});
return rings[0];
}
function bounds2Path(bounds) {
var maxlng,minlng,maxlat,minlat
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]);
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;
return {path,maxlng,minlng,maxlat,minlat};
}
function findsubarea(res) {
let childrensDistrictList = res.districtList[0].districtList;
......@@ -261,40 +173,73 @@
fillColor: 'black', //填充色
fillOpacity: 0, //填充透明度
map: map,
path: bounds2Path(result.districtList[0].boundaries)
path: bounds2Path(result.districtList[0].boundaries).path
});
});
}
}
function MaskLayer() {
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);
return 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],
});
}
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;
}
function setPersonalPoint(item) {
console.log(map)
const marker = new AMap.ElasticMarker({
map: map,
// styles: [
// {
// 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'
// }
// }
// ],
zooms: [14, 20],
center: new AMap.LngLat(Number(item.lon), Number(item.lat)),
position: new AMap.LngLat(Number(item.lon), Number(item.lat)),
zIndex: 1000,
zoomStyleMapping: {
14: 0,
15: 0,
16: 0,
17: 0,
18: 0,
19: 0,
20: 0
if (!item.lon || !item.lat) {
return '坐标有问题'//toDo 需改进
}
var marker = new AMap.Marker({
map: map,
position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置
icon: "https://a.amap.com/jsapi_demos/static/images/darkRed.png", //marker图标，直接传递地址url
offset: { x: -8, y: -34 } //相对于基点的位置
});
map.add(marker);
Markers.push(marker)
// circleMarker.setMap(map)
}
function dragLimit(bounds) {
//https://lbs.amap.com/api/javascript-api/example/map/limit-map-show-range/ map.clearLimitBounds(); bounds = map.getBounds(); map.setLimitBounds(bounds);
// var mapBounds = map.getBounds()
// // var mapBounds = new AMap.Bounds(southWest:LngLat, northEast:LngLat)
// console.log(mapBounds);
// var bounds = map.getBounds();
map.setLimitBounds(bounds);
}
console.log(AMap.ElasticMarker);
</script>
</body>
......
map/index.html
......@@ -20,123 +20,82 @@
<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://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 language="javascript">
// open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/ff/git/
var params = GetParams(); //url 入参
var styleId = '14732285e0b3c284fa6efdb25627d3f6';
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'
});
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
var district = new AMap.DistrictSearch(opts);
var Markers = [];//点
var bounds;//城市 bounds
var boundsPath = [];//城市 bounds 路径
var limit
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)
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({
rejectMapMask: true,
mapStyle: 'amap://styles/' + styleId
});
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
var district = new AMap.DistrictSearch(opts);
var CanvasLayer = new MaskLayer()
var map;
var init = function () {
init();
function init () {
district.search(params.city ? params.city : '成都市', function (
status,
result
) {
console.log(result);
bounds = result.districtList[0].boundaries;
boundsPath = bounds2Path(bounds);
var _bounds = bounds2Path(bounds);
boundsPath = _bounds.path
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,
zooms:[8,13],
pitch: 40,
zoom: 9
// layers: [RoadNet,Satellite ]//Satellite,
// layers: [road, ]//Satellite,
});
//定义中国东南西北端点
var pNW = { lat: 59.1, lng: 73.1 }
var pNE = { lat: -179.9, lng: 179.9 }
var pSE = { lat: 3.1, lng: 136.1 }
var pSW = { lat: -73.1, lng: 83.1 }
var mapBounds = new AMap.Bounds(pSW, pNE)
map.add(Satellite);//高亮mask 卫星图
map.add(CanvasLayer);// 半黑遮罩层
map.add(SatelliteDown);//底图 卫星图
map.getLayers()[0].setzIndex(1000);//个性地图置顶
map.getLayers()[0].setzIndex(11);//个性地图置顶
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);
......@@ -149,6 +108,7 @@
});
wall.transparent = true;
object3Dlayer.add(wall);
//添加描边
for (var i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
......@@ -158,9 +118,10 @@
map: map
});
}
// AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
// initMask(DistrictExplorer);
// });
// 设置合适的zoom center
map.setFitView();
dragLimit(dragLimitBounds)//拖动限制 限制地图显示范围
// 获取人员信息
$.getJSON('./personal.json').then(res => {
console.log(JSON.parse(res));
......@@ -169,84 +130,33 @@
100
);
currentDetailList.map(item => {
console.log(123)
setPersonalPoint(item);
});
console.log(Markers)
cluster = new AMap.MarkerClusterer(map, Markers, {gridSize: 80})
cluster = new AMap.MarkerClusterer(map, Markers, { gridSize: 80 })
});
});
};
init();
function initMask(DistrictExplorer) {
console.log(map.getLayers());
//创建一个实例
var districtExplorer = new DistrictExplorer({
map: map
});
console.log(map.getLayers());
var countryCode = 100000; //全国
districtExplorer.loadMultiAreaNodes([countryCode], function (
error,
areaNodes
) {
//.concat(areaCodes)
var cityNode = areaNodes[0],
areaNodes = areaNodes.slice(1);
var path = [];
//首先放置背景区域，这里是大陆的边界
path.push(getLongestRing(cityNode.getParentFeature()));
path.push.apply(path, boundsPath);
var polygon = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: '#99ffff', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 5, //线宽
fillColor: 'black', //填充色
fillOpacity: 0.65, //填充透明度
map: map,
zIndex: 1000,
path: path
});
});
}
function getAllRings(feature) {
var coords = feature.geometry.coordinates,
rings = [];
for (var i = 0, len = coords.length; i < len; i++) {
rings.push(coords[i][0]);
}
return rings;
}
function getLongestRing(feature) {
var rings = getAllRings(feature);
rings.sort(function (a, b) {
return b.length - a.length;
});
return rings[0];
}
function bounds2Path(bounds) {
var maxlng,minlng,maxlat,minlat
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]);
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;
return {path,maxlng,minlng,maxlat,minlat};
}
function findsubarea(res) {
let childrensDistrictList = res.districtList[0].districtList;
......@@ -263,71 +173,73 @@
fillColor: 'black', //填充色
fillOpacity: 0, //填充透明度
map: map,
path: bounds2Path(result.districtList[0].boundaries)
path: bounds2Path(result.districtList[0].boundaries).path
});
});
}
}
function MaskLayer() {
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);
return 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],
});
}
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;
}
function setPersonalPoint(item) {
// console.log(map);
// const marker = new AMap.ElasticMarker({
// map: map,
// styles: [
// {
// 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',
// size: [366, 201],
// ancher: [183, 101],
// imageSize: [865, 1156],
// imageOffset: [45, 480],
// fitZoom: 17.5,
// scaleFactor: 2,
// maxScale: 2,
// minScale: 0.125
// }
// }
// ],
// zooms: [0, 20],
// // position: new AMap.LngLat(Number(item.lon), Number(item.lat)),
// position: {Q: 30.8307, R: 104.24599999999998, lng: 104.246, lat: 30.8307},
// zIndex: 100000,
// zoomStyleMapping: {
// 14: 0,
// 15: 0,
// 16: 0,
// 17: 0,
// 18: 0,
// 19: 0,
// 20: 0
// }
// });
// console.log(new AMap.LngLat(Number(item.lon), Number(item.lat)))
// marker.setMap(map)
// var circleMarker = new AMap.CircleMarker({
// center: new AMap.LngLat(Number(item.lon), Number(item.lat)),
// radius:5+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
// strokeColor:'white',
// strokeWeight:2,
// strokeOpacity:0.5,
// fillColor:'rgba(0,0,255,1)',
// fillOpacity:0.5,
// zIndex:10,
// bubble:true,
// cursor:'pointer',
// clickable: true
// })
if (!item.lon || !item.lat) {
return '坐标有问题'//toDo 需改进
}
var marker = new AMap.Marker({
map:map,
map: map,
position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置
icon:"https://a.amap.com/jsapi_demos/static/images/darkRed.png", //marker图标，直接传递地址url
offset:{x:-8,y:-34} //相对于基点的位置
icon: "https://a.amap.com/jsapi_demos/static/images/darkRed.png", //marker图标，直接传递地址url
offset: { x: -8, y: -34 } //相对于基点的位置
});
Markers.push(marker)
// circleMarker.setMap(map)
}
console.log(AMap.ElasticMarker);
function dragLimit(bounds) {
//https://lbs.amap.com/api/javascript-api/example/map/limit-map-show-range/ map.clearLimitBounds(); bounds = map.getBounds(); map.setLimitBounds(bounds);
// var mapBounds = map.getBounds()
// // var mapBounds = new AMap.Bounds(southWest:LngLat, northEast:LngLat)
// console.log(mapBounds);
// var bounds = map.getBounds();
map.setLimitBounds(bounds);
}
</script>
</body>
......
map/index1.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>区域掩模</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 language="javascript">
// open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/ff/git/
var styleId = '14732285e0b3c284fa6efdb25627d3f6';
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'
});
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
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)
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({
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);
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,
zoom: 9
// layers: [RoadNet,Satellite ]//Satellite,
// layers: [road, ]//Satellite,
});
map.add(Satellite);//高亮mask 卫星图
map.add(CanvasLayer);// 半黑遮罩层
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 = -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.slice(
0,
100
);
currentDetailList.map(item => {
console.log(123)
setPersonalPoint(item);
});
console.log(Markers)
cluster = new AMap.MarkerClusterer(map, Markers, {gridSize: 80})
});
});
};
init();
function initMask(DistrictExplorer) {
console.log(map.getLayers());
//创建一个实例
var districtExplorer = new DistrictExplorer({
map: map
});
console.log(map.getLayers());
var countryCode = 100000; //全国
districtExplorer.loadMultiAreaNodes([countryCode], function (
error,
areaNodes
) {
//.concat(areaCodes)
var cityNode = areaNodes[0],
areaNodes = areaNodes.slice(1);
var path = [];
//首先放置背景区域，这里是大陆的边界
path.push(getLongestRing(cityNode.getParentFeature()));
path.push.apply(path, boundsPath);
var polygon = new AMap.Polygon({
bubble: true,
lineJoin: 'round',
strokeColor: '#99ffff', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 5, //线宽
fillColor: 'black', //填充色
fillOpacity: 0.65, //填充透明度
map: map,
zIndex: 1000,
path: path
});
});
}
function getAllRings(feature) {
var coords = feature.geometry.coordinates,
rings = [];
for (var i = 0, len = coords.length; i < len; i++) {
rings.push(coords[i][0]);
}
return rings;
}
function getLongestRing(feature) {
var rings = getAllRings(feature);
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) {
// console.log(map);
// const marker = new AMap.ElasticMarker({
// map: map,
// styles: [
// {
// 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',
// size: [366, 201],
// ancher: [183, 101],
// imageSize: [865, 1156],
// imageOffset: [45, 480],
// fitZoom: 17.5,
// scaleFactor: 2,
// maxScale: 2,
// minScale: 0.125
// }
// }
// ],
// zooms: [0, 20],
// // position: new AMap.LngLat(Number(item.lon), Number(item.lat)),
// position: {Q: 30.8307, R: 104.24599999999998, lng: 104.246, lat: 30.8307},
// zIndex: 100000,
// zoomStyleMapping: {
// 14: 0,
// 15: 0,
// 16: 0,
// 17: 0,
// 18: 0,
// 19: 0,
// 20: 0
// }
// });
// console.log(new AMap.LngLat(Number(item.lon), Number(item.lat)))
// marker.setMap(map)
// var circleMarker = new AMap.CircleMarker({
// center: new AMap.LngLat(Number(item.lon), Number(item.lat)),
// radius:5+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
// strokeColor:'white',
// strokeWeight:2,
// strokeOpacity:0.5,
// fillColor:'rgba(0,0,255,1)',
// fillOpacity:0.5,
// zIndex:10,
// bubble:true,
// cursor:'pointer',
// clickable: true
// })
var marker = new AMap.Marker({
map:map,
position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置
icon:"https://a.amap.com/jsapi_demos/static/images/darkRed.png", //marker图标，直接传递地址url
offset:{x:-8,y:-34} //相对于基点的位置
});
Markers.push(marker)
// circleMarker.setMap(map)
}
console.log(AMap.ElasticMarker);
</script>
</body>
</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