superMap简单地图

最新推荐文章于 2022-03-03 22:03:46 发布

日暮途远人间何世？

最新推荐文章于 2022-03-03 22:03:46 发布

阅读量466

点赞数

分类专栏： superMap 文章标签： javascript 数据可视化 html js

本文链接：https://blog.csdn.net/weixin_45223696/article/details/108080976

版权

superMap 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }

        #map {
            margin: 0 auto;
            width: 100%;
            height: 100%;
        }

        #btn_box {
            position: absolute;
            left: 100px;
            top: 10px;
            text-align: center;
            z-index: 999999
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
</body>
<script type="text/javascript" src="https://iclient.supermap.io/web/libs/iclient8c/libs/SuperMap.Include.js"></script>
<script type="text/javascript" src="https://mapv.baidu.com/build/mapv.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/classic/iclient-classic.js"></script>
<script type="text/javascript">
    //              undefiend           true            false
    var host = window.isLocal ? window.server : "https://iserver.supermap.io"
    // 挂载地图
    var map,

        baseLayer,

        mapvLayer,
        // 路径
        url = host + "/iserver/services/map-china400/rest/maps/China_4326"
    init()
    function init() {
        // 检测是否存在绘图环境
        if (!document.createElement('canvas').getContext) {
            widgets.alert.showAlert(resources.msg_supportCanvas, false);
            return;
        }
        map = new SuperMap.Map("map", {
            // 添加控件  每一个显示控件都会以div的形式渲染在DOM中
            controls: [
                // 归因属性
                new SuperMap.Control.Attribution(),
                // 比例尺控制。默认情况下，它绘制在地图的左下角。
                new SuperMap.Control.ScaleLine(),
                // 缩放控件
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })
            ]
        })
        baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer(
            "China",
            url,
            {
                transparent: true,
                cacheEnabled: true
            },
            {
                maxResolution: 'auto'
            }
        )
        // 图层渲染到页面
        baseLayer.events.on({
            layerInitialized: addLayer
        })
    }
    function addLayer() {
        // 在地图中添加多个指定层  
        map.addLayers([baseLayer])
        // 设置地图中心  new SuperMap.LonLat这个类用来表示经度和纬度对。   2表示缩放级别
        map.setCenter(new SuperMap.LonLat(116.4, 39.9), 2)
        createMapVLayer()
    }
    function createMapVLayer() {
        var randomCOunt = 1000
        var data = []
        var citys = [
            '北京',
            '天津',
            '上海',
            '重庆',
            '石家庄',
            '太原',
            '呼和浩特',
            '哈尔滨',
            '长春',
            '沈阳',
            '济南',
            '南京',
            '合肥',
            '杭州',
            '南昌',
            '福州',
            '郑州',
            '武汉',
            '长沙',
            '广州',
            '南宁',
            '西安',
            '银川',
            '兰州',
            '西宁',
            '乌鲁木齐',
            '成都',
            '贵阳',
            '昆明',
            '拉萨',
            '海口'
        ]
        // 循环1000遍随机数据出来
        while (randomCOunt--) {
            var cityCenter = mapv.utilCityCenter.getCenterByCityName(
                citys[parseInt(Math.random() * citys.length)]
            );
            data.push({
                geometry: {
                    type: "Point",
                    coordinates: [
                        cityCenter.lng - 2 + Math.random() * 4,
                        cityCenter.lat - 2 + Math.random() * 4
                    ]
                },
                count: 30 * Math.random()
            })
        }
        // 获取数据
        var dataSet = new mapv.DataSet(data)
        // 样式
        var options = {
            fillStyle: 'rgba(55, 50, 250, 0.8)',
            // 方块颜色
            shadowColor: 'rgba(250, 250, 250, 1)',
            // 边框
            shadowBlur: 20,
            max: 100,
            // 方块大小
            size: 50,
            unit: 'px',
            // 字体颜色 字体是否显示
            label: {
                show: true,
                fillStyle: 'white'
            },
            // 方块对比度
            globalAlpha: 0.5,
            // ???
            gradient: {
                0.25: 'rgb(0,0,255)',
                0.55: 'rgb(0,255,0)',
                0.85: 'yellow',
                1.0: 'rgb(255,0,0)'
            },
            draw: 'honeycomb'
        }
        // 把数据添加到一个对象上 然后添加单个图层到地图上
        mapvLayer = new SuperMap.Layer.MapVLayer('mapv', {
            // 数据源
            dataSet: dataSet,
            // 数据样式
            options: options
        });
        map.addLayer(mapvLayer);
    }


</script>

</html>

日暮途远人间何世？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
superMap简单地图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {
复制链接

扫一扫