高德地图系列之多边形polygon、行政边界查询districtExplorer、海量麻点MassMarks

最新推荐文章于 2024-03-15 13:22:50 发布

Gytha_1

最新推荐文章于 2024-03-15 13:22:50 发布

阅读量1.3w

点赞数

分类专栏： js map

本文链接：https://blog.csdn.net/gytha_1/article/details/80695888

版权

js 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

map

4 篇文章 0 订阅

订阅专栏

多边形polygon：

<!DOCTYPE html>

<html>
<head>
<title>map</title>
<script type="text/javascript" src=""></script>
<style type="text/css">
body,html,#container{
height: 100%;
margin: 0px;
}
</style>
</head>
<body>
<div id="container" tabindex="0"></div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=86a4b7cc36b60dcaa93e5ab86f4d4007"></script>
<script type="text/javascript">
var map = new AMap.Map('container',{
resizeEnable: true,
zoom: 18,
center: [116.40249623233241,39.92292807688322]
});
// path:[
// new AMap.LngLat(116.4137441460175,39.90125217483801),
// new AMap.LngLat(116.41463346014412,39.901278423806424),
// new AMap.LngLat(116.4146334601453,39.90129242381057),
// new AMap.LngLat(116.41374014460584,39.901266173722455)
// ],

var option = {
map:map,
path:[
[116.40249623233241,39.92292807688322],
[116.4025172394779,39.9229280825497],
[116.40250723606474,39.92309507987206],
[116.40248522857951,39.92309307393583]
],
strokeColor: "#238CFB", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 2, //线宽
strokeStyle: "solid",
fillColor: "#2B90FB", //填充色
fillOpacity: 0.2//填充透明度
}
var polygon = new AMap.Polygon(option);
polygon.setMap(map);
</script>
</body>
</html>

行政边界查询districtExplorer：

render中map参数设置，此处使用的react-amap

<Map

version={'1.4.4'}
amapkey={'XXXXXXXXX'}
plugins={['ToolBar']}
center={this.center}
zoom={15}
expandZoomRange={true}
zooms={zooms}
animateEnable={true}
events={this.mapEvents}
useAMapUI

</Map>

画图

let adcodes = [110000];//310000, 330100, 330200

window.AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {

that.districtExplorers = new DistrictExplorer({//创建一个实例
map: that.amap,
});
that.districtExplorers.loadMultiAreaNodes(adcodes, function(error, areaNodes) {
if(areaNodes){
that.subCenter = [];
let subFeatures = areaNodes[0]._data.geoData.sub.features;
subFeatures.forEach((item,index)=>{
let center = item.properties.center;//[116,39]
that.subCenter.push(center);
})
that.districtExplorers.clearFeaturePolygons();//清除已有的绘制内容
for (let i = 0, len = areaNodes.length; i < len; i++) {
renderAreaNode(areaNodes[i]);
}
//更新地图视野以适合区划面
//that.amap.setFitView(that.districtExplorers.getAllFeaturePolygons());
}

});
function renderAreaNode(areaNode) {
//绘制子区域
that.districtExplorers.renderSubFeatures(areaNode, function(feature, i) {
let fillColor = colors[i % colors.length];
let strokeColor = colors[colors.length - 1 - i % colors.length];
return {
cursor: 'default',
bubble: true,
strokeColor: strokeColor, //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: fillColor, //填充色
fillOpacity: 0.35, //填充透明度
};
});
//绘制父区域
that.districtExplorers.renderParentFeature(areaNode, {
cursor: 'default',
bubble: true,
strokeColor: 'black', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 1, //线宽
fillColor: null, //填充色
fillOpacity: 0.35, //填充透明度
});
}
});

}

官方示例

<!doctype html>
<html lang="zh-CN">
<head>

<base href="https://webapi.amap.com/ui/1.0/ui/geo/DistrictExplorer/examples/" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>行政区浏览</title>
<link rel="stylesheet" type="text/css" href="./area.css">
</head>
<body>
<div id="outer-box">
<div id="container" tabindex="0"></div>
<div id="panel" class="scrollbar1">
<ul id="area-tree">
</ul>
</div>

</div>

海量麻点MassMarks：

<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://a.amap.com/jsapi_demos/static/resource/commonStyle.css"/>
<title>海量麻点</title>
</head>
<body >
<div id="container" class="map" tabindex="0"></div>
<div class="button-group">
<input type="button" class="button" value="单一图标" onclick = 'setStyle(0)'/>
<input type="button" class="button" value="多个图标" onclick = 'setStyle(1)'/>
</div>
<script type="text/javascript" src = 'http://a.amap.com/jsapi_demos/static/citys.js'></script>
<script type="text/javascript" src = 'http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值'></script>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 4,
center: [102.342785, 35.312316]
});
var style = [{
url: 'http://a.amap.com/jsapi_demos/static/images/mass0.png',
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(11, 11)
},{
url: 'http://a.amap.com/jsapi_demos/static/images/mass1.png',
anchor: new AMap.Pixel(4, 4),
size: new AMap.Size(7, 7)
},{
url: 'http://a.amap.com/jsapi_demos/static/images/mass2.png',
anchor: new AMap.Pixel(3, 3),
size: new AMap.Size(5, 5)
}
];
var mass = new AMap.MassMarks(citys, {
opacity:0.8,
zIndex: 111,
cursor:'pointer',
style:style
});
var marker = new AMap.Marker({content:' ',map:map})
mass.on('mouseover',function(e){
marker.setPosition(e.data.lnglat);
marker.setLabel({content:e.data.name})
})
mass.setMap(map);
var setStyle = function(multiIcon) {
if(multiIcon){
mass.setStyle(style);
}else{
mass.setStyle(style[2]);
}
}
</script>
</body>
</html>

Gytha_1

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
高德地图系列之多边形polygon、行政边界查询districtExplorer、海量麻点MassMarks

多边形polygon：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;map&lt;/title&gt;&lt;script type="text/javascript" src=""&gt;&lt;/script&gt;&lt;style type="
复制链接

扫一扫