高德地图 JSAPI 给指定部分标记颜色

最新推荐文章于 2024-05-17 22:07:54 发布

青宝宝的猪宝宝

最新推荐文章于 2024-05-17 22:07:54 发布

阅读量1.9k

点赞数

分类专栏：高德APIJS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43471769/article/details/129790608

版权

高德APIJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

此次以北京各区以不同颜色显示为例

1、新建地图对象：

  var map = new AMap.Map("container", {
        zoom: 11,//地图打开时缩放级别
        center: [116.39199256, 40.0270229],//起始显示的中心位置
        viewMode: '3D',//引入2D地图
        mapStyle: 'amap://styles/whitesmoke'//设置地图显示模式
        });

2、新建北京市图层：

adcode：110000。110000代表北京的高德城市编码。此表可以去高德下载adcode与省市行政区对照表。

fill：填充对应区块的颜色。此处fill会循环填充全国的地区的颜色，但只会显示adcode值对应区域的颜色。所以此处写了一个function函数，每次运行时会把每个地区的所有属性值赋给properties。所以可以在function根据properties来抓取指定区域赋给其指定色彩。

disProvince = new AMap.DistrictLayer.Province({
		//styles fill中的function会生成国家所有的地区颜色，通过adcode来确认需要的颜色
            zIndex: 1,//图层的层级
            adcode: 110000,//行政区编码,可以是数组
            depth: 2,//设置显示层级，0：国家级，1：省级，2，市级
            styles: {
                'fill': function (properties) {//填充色properties代表地图中的每个地区对象，其内有很多相关属性，会对每个地区运行一遍这个函数
                    var adcode = properties.adcode;
                    return getColorByAdcode(adcode);
                },
                'province-stroke': 'cornflowerblue',//省界颜色
                'city-stroke': 'white', //城市界颜色
                'county-stroke': 'rgba(255,255,255,0.5)' //区或县界颜色
            }
        });

3、将北京市的图层加载到地图上。

disProvince.setMap(map);//将disprovince图层设置到地图上

4、完整代码如图所示：

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        #container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <title>简易行政区图 - 省份&层级</title>
</head>

<body>
    <div id="container"></div>
    <script
        src="https://webapi.amap.com/maps?v=2.0&key=此处请填入自己的key值&plugin=AMap.Scale,AMap.ToolBar">
    </script>
    <script src="https://a.amap.com/Loca/static/mock/adcodes.js"></script>

    <script>
    
        var map = new AMap.Map("container", {
        zoom: 11,
        center: [116.412427, 39.303573],
        viewMode: '2D',//引入2D地图
        });
 

    var disProvince;
    function initPro(code) {
        disProvince && disProvince.setMap(null);

        disProvince = new AMap.DistrictLayer.Province({
		//styles fill中的function会生成国家所有的地区颜色，通过adcode来确认需要的颜色
            zIndex: 12,
            adcode: 110000,//行政区编码,可以是数组
            depth: 2,//设置显示层级，0：国家级，1：省级，2，市级
            styles: {
                'fill': function (properties) {//填充色properties代表地图中的每个地区对象，其内有很多相关属性，会对每个地区运行一遍这个函数
                    var adcode = properties.adcode;
                    return getColorByAdcode(adcode);
                },
                'province-stroke': 'cornflowerblue',//省界颜色
                'city-stroke': 'white', //城市界颜色
                'county-stroke': 'rgba(255,255,255,0.5)' //区或县界颜色
            }
        });

        disProvince.setMap(map);//将disprovince图层设置到地图上
    }

   
    var colors = {};
    //获取每个区域的颜色
    var getColorByAdcode = function (adcode) {
        if (!colors[adcode]){
		switch (adcode)
		{
		case 110101:
		colors[adcode] = '#cfcfcf';
		break;
		case 110102:
		colors[adcode] = 'rgb(' + 232 + ',' + 70 + ',34)';
		break;
		case 110105:
		colors[adcode] = 'rgb(' + 111 + ',' + 150 + ',34)';
		break;
		case 110106:
		colors[adcode] = 'rgb(' + 35 + ',' + 120 + ',65)';
		break;
		case 110107:
		colors[adcode] = 'rgb(' + 22 + ',' + 170 + ',120)';
		break;
		case 110108:
		colors[adcode] = 'rgb(' + 24 + ',' + 200 + ',150)';
		break;
		case 110109:
		colors[adcode] = 'rgb(' + 152 + ',' + 255 + ',170)';
		break;
		case 110111:
		colors[adcode] = 'rgb(' + 255 + ',' + 65 + ',109)';
		break;
		case 110112:
		colors[adcode] = 'rgb(' + 100 + ',' + 36 + ',120)';
		break;
		case 110113:
		colors[adcode] = 'rgb(' + 120 + ',' + 125 + ',200)';
		break;
		case 110114:
		colors[adcode] = 'rgb(' + 35 + ',' + 167 + ',220)';
		break;
		case 110115:
		colors[adcode] = 'rgb(' + 200 + ',' + 190 + ',230)';
		break;
		case 110116:
		colors[adcode] = 'rgb(' + 150 + ',' + 235 + ',250)';
		break;
		case 110117:
		colors[adcode] = 'rgb(' + 70 + ',' + 200 + ',22)';
		break;
		case 110118:
		colors[adcode] = 'rgb(' + 40 + ',' + 253 + ',34)';
		break;
		case 110119:
		colors[adcode] = 'rgb(' + 170 + ',' + 209 + ',130)';
		break;
		default:
		{
		var gb = Math.random() * 155 + 50;
         colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
		}
		}
		}
		 return colors[adcode];
	}
initPro(110000);//调用initpro函数设置北京市图层
</script>
</body>

</html>

注意：务必 src="https://webapi.amap.com/maps?v=2.0&key=此处请填入自己的key值&plugin=AMap.Scale,AMap.ToolBar"

显示效果：

青宝宝的猪宝宝

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
高德地图 JSAPI 给指定部分标记颜色

fill：填充对应区块的颜色。此处fill会循环填充全国的地区的颜色，但只会显示adcode值对应区域的颜色。所以此处写了一个function函数，每次运行时会把每个地区的所有属性值赋给properties。所以可以在function根据properties来抓取指定区域赋给其指定色彩。注意：务必 src="https://webapi.amap.com/maps?110000代表北京的高德城市编码。3、将北京市的图层加载到地图上。此处请填入自己的key值。
复制链接

扫一扫