openlayers-统计图显示(中国区域高亮)

　　openlayers版本: v3.19.1-dist

　　统计图效果:

       

　　案例下载地址:点击跳转

　　使用浏览器:谷歌80.0.3987.162（正式版本） （64 位）

　　我这边是加载的天地图，如果想加载其他地图，代码如下:

//1、使用正常方式调用天地图(下面代码中使用的zondyClient)
var layer1 = new ol.layer.Tile({
    title: "天地图矢量图层",
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e83d04f3e04272b8d9e91615e309fe36",// tk=天地图密钥
        wrapX: false
    })
});

//2、调用高德地图
var layer1 = new ol.layer.Tile({
    title: "高德地图",
    source: new ol.source.XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        wrapX: false
    })
});


//3、调用百度地图
var resolutions = [];//分辨率
for (var i = 0; i < 19; i++) {
    resolutions[i] = Math.pow(2, 18 - i);
}
var layer1 = new ol.layer.Tile({
    source: new ol.source.TileImage({
        //设置坐标参考系
        projection: ol.proj.get("EPSG:3857"),
        //设置分辨率
        tileGrid: new ol.tilegrid.TileGrid({
            origin: [0, 0],
            resolutions: resolutions
        }),
        //出图基地址
        tileUrlFunction: function (tileCoord, pixelRatio, proj) {
            if (!tileCoord) {
                return "";
            }
            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];

            if (x < 0) {
                x = "M" + (-x);
            }
            if (y < 0) {
                y = "M" + (-y);
            }
            return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
        }
    })
});

　　代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
        <title>openlayers-统计图显示(中国区域高亮)</title>
        <link href="v3.19.1-dist/ol.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <!-- 地图容器 -->
        <div id="mapCon" style="height: 95%;"></div>
        
        <!-- GDP图表容器 -->
        <div id="gdpChart" style="position: absolute;width:500px;height:380px"></div>
    </body>
    <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="v3.19.1-dist/ol-debug.js" type="text/javascript"></script>
    <script src="js/zondyClient.js" type="text/javascript"></script>
    <script src="js/echarts.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var map;
        
        $(document).ready(function (){
            // 初始化天地图图层
            var layer1 = new Zondy.Map.TianDiTu({
                layerType: Zondy.Enum.Map.TiandituType.VEC,
                projection: ol.proj.get('EPSG:4326'),
                // 天地图key
                token: "e83d04f3e04272b8d9e91615e309fe36"
            });
            // 初始化地图容器
            map = new ol.Map({
                target: "mapCon",
                layers: [layer1],
                view: new ol.View({
                    center: [109.05167, 31.78305],// 地图中心点(天地图里面的经纬度)
                    zoom: 5,
                    minZoom: 5,// 最大缩放级别
                    maxZoom: 5,// 最小缩放级别
                    projection: "EPSG:4326"
                })
            });
            
            // 禁止鼠标拖动
            disabledMove();
            
            // 显示中国区域
            displayChina();
            
            // 创建图表对象
            var chart = new ol.Overlay({
                // 设置图表显示位置
                position: [109.05167, 31.78305],
                // 上面的经纬度就是图表的左上角、所以这里需要修补一下位置、类似css的top、margin(单位px)
                offset: [-260, -190],
                // 指定这个图表对象使用的是那个Div
                element: document.getElementById("gdpChart")
            });
            // 把图表对象添加到地图容器中
            map.addOverlay(chart);
            // 初始化GDP图表
            initCharts();
        });
        
        /** 禁止鼠标拖动 */
        function disabledMove(){
            let pan = getFun();
            pan.setActive(false);
            function getFun() {
                let pan;
                map.getInteractions().forEach(function(element, index, array) {
                    if(element instanceof ol.interaction.DragPan) {
                        pan = element;
                    }
                })
                return pan;
            }
        }
        
        /** 显示中国区域 */
        function displayChina(){
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
            var queryParam = new Zondy.Service.QueryByLayerParameter("gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界政区", {
                resultFormat: "json",
                struct: queryStruct
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber = 20;
            //设置属性条件
            queryParam.where = "name='中国'";
            //实例化地图文档查询服务对象
            var queryService = new Zondy.Service.QueryLayerFeature(queryParam, {
                ip: "develop.smaryun.com",
                port: "6163"
            });
            queryService.query(function(result){
                //初始化Zondy.Format.PolygonJSON类
                var format = new Zondy.Format.PolygonJSON();
                //将MapGIS要素JSON反序列化为ol.Feature类型数组
                var features = format.read(result);

                //实例化一个矢量图层drawLayerr用于高亮显示结果
                var drawSource = new ol.source.Vector({
                    //是否在地图水平坐标轴上重复
                    wrapX: false
                });
                drawSource.addFeatures(features);
                drawLayer = new ol.layer.Vector({
                    source: drawSource,
                    style: new ol.style.Style({
                        //填充色
                        fill: new ol.style.Fill({
                            color: 'gray'
                        }),
                        //边线样式
                        stroke: new ol.style.Stroke({
                            color: 'rgba(255,204, 51, 1)',
                            width: 1
                        })
                    })
                });

                map.addLayer(drawLayer);
            }, function (){});
        }


        /** 初始化GDP图表 */
        function initCharts() {
            var myChart = echarts.init(document.getElementById("gdpChart"));
            var option = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['上海', '北京', '深圳', '广州', '重庆', '苏州', '成都'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '2019年经济GDP(亿)',
                        type: 'bar',
                        barWidth: '60%',
                        data: [38155.32, 35371.30, 26927.09, 23628.60, 23605.77, 19235.80, 17012.65]
                    }
                ]
            };
            myChart.setOption(option);
        }
    </script>
</html>

 

posted @ 2020-04-14 15:27  不出特产不出矿  阅读(630)  评论(0)    收藏  举报