geoservice地图openlayers图层+echart图表政区添加色块

约定不等于承诺〃 2023-10-05 18:27 10阅读 0赞

先看效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70][]

openlayers案例+api：

[https://openlayers.org/en/latest/examples/][https_openlayers.org_en_latest_examples]

[https://openlayers.org/en/latest/apidoc/module-ol\_Map-Map.html\#removeLayer][https_openlayers.org_en_latest_apidoc_module-ol_Map-Map.html_removeLayer]

ol3Echart参考网站：

[https://sakitam-fdd.github.io/ol3Echarts/\#/index][https_sakitam-fdd.github.io_ol3Echarts_index]

1.引入相关js+css文件，相关文件git地址：[https://gitee.com/zhanglizeng/jarlist/tree/master/geoservice][https_gitee.com_zhanglizeng_jarlist_tree_master_geoservice]

2.页面定义div用户承接地图：

3.初始化图层和地图

//初始化图层
       function initLayer(){
    	   //背景图层
    	   backgroundMapLayer = new ol.layer.Tile({
    			name: "背景",
    			zIndex: 0, 
    			source: new ol.source.TileWMS({
    				url: geowebcacheUrl + '/geowebcache/service/wms',
    				params: {
    					'VERSION': '1.1.1',
    					'LAYERS': 'lwzx_bk',
    					'FORMAT': 'image/png',
    					'SRS': 'EPSG:3857'
    				},
    				tileGrid: new ol.tilegrid.TileGrid({
    					//resolution和conf.xml中保持一致
    					resolutions: [78271.517018034036, 39135.758509017018,
    						19567.879254508509, 9783.9394949623238,
    						4891.9698797730935, 2445.9849398865467,
    						1222.992337651342, 611.49616882567102,
    						305.74808441283551, 152.87417449834899,
    						76.436954957243259, 38.218609770552874,
    						19.109304885276437, 9.5546524426382184,
    						4.7773262213191092, 2.3886631106595546,
    						1.1943315553297773, 0.59716577766488865
    					],
    					tileSize: [256, 256],
    					origin: [-22041258.62706707, 33265069.154240012]
    				})
    			})
    		});
    	  
    	   //政区名称图层
    	    orgNameMapLayer = new ol.layer.Tile({
    			name: "标记",
    			zIndex: 2, 
    			source: new ol.source.TileWMS({
    				url: geowebcacheUrl + '/geowebcache/service/wms',
    				params: {
    					'VERSION': '1.1.1',
    					'LAYERS': 'lwzx_zhuji',
    					'FORMAT': 'image/png',
    					'SRS': 'EPSG:3857'
    				},
    				tileGrid: new ol.tilegrid.TileGrid({
    					//resolution和conf.xml中保持一致
    					resolutions: [78271.517018034036, 39135.758509017018,
    						19567.879254508509, 9783.9394949623238,
    						4891.9698797730935, 2445.9849398865467,
    						1222.992337651342, 611.49616882567102,
    						305.74808441283551, 152.87417449834899,
    						76.436954957243259, 38.218609770552874,
    						19.109304885276437, 9.5546524426382184,
    						4.7773262213191092, 2.3886631106595546,
    						1.1943315553297773, 0.59716577766488865
    					],
    					tileSize: [256, 256],
    					origin: [-22041258.62706707, 33265069.154240012]
    				})
    			})
    		});    
       } 
    
     //初始化地图
       function initMap(){
    	   var projection = ol.proj.get('EPSG:3857'); //墨卡托投影空间参考坐标系
    	   var view = new ol.View({
    			projection: projection, //坐标系如果不设置，默认为墨卡托
    			center: ol.proj.fromLonLat([104.408718, 39.922369]), 
    			zoom: 4.5,      
    			minZoom: 4,    
    			maxZoom: 16
    	   });
    	   map = new ol.Map({      
    			target: 'arcgisDiv',
    			layers: [backgroundMapLayer, orgNameMapLayer],
    			view: view,
    			controls: ol.control.defaults({ zoom: false })//加载比例尺控件overviewMapControl,   
    	   });

4.地图画点

5.点击地图时弹出提示框

（1）页面定义一个弹框div
    <div id="popupWindow"> </div> 
    
    （2）自定义弹出框头部
      var popTitle = "<ul><li><div style='width:100%;height:25px;background:#2C9EFF;color:white;font-size:16px;line-height:25px'><span style='padding-left:10px'>基本信息</span><span class='fa fa-close' style='float:left;color:#ffffff;font-size:16px;cursor:pointer;float:right;line-height:25px' onclick='hiddenPopWindow()' title='关闭'></span></div></li></ul>";
    (3)初始化地图时添加点击监听
    	   var container = document.getElementById("popupWindow");
    	   
    	   windowOverlay = new ol.Overlay({
    	         //设置弹出框的容器
    	        element: container,
    	        //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
    	        autoPan: true
    	    });
    	   
    	   map.on('click',function(e){   
    	        //在点击时获取像素区域
    	        var pixel = map.getEventPixel(e.originalEvent);
    	        map.forEachFeatureAtPixel(pixel,function(feature){
    	            //coodinate存放了点击时的坐标信息
    	            var coodinate = e.coordinate;  
    	            //设置弹出框内容，可以HTML自定义
    	            container.innerHTML = popTitle+feature.get("popContent");     
    	            //设置overlay的显示位置
    	            windowOverlay.setPosition(coodinate);
    	            //显示overlay
    	            map.addOverlay(windowOverlay);    
    	        });
    	    });

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1][]

6.画线

7.结合echart画饼图，需要给一个饼图的经纬度坐标值

//展示饼图表
        function showPieCharts(){ 
        	pieEchartslayer = new ol3Echarts({
        	    tooltip : {
        	      trigger: 'item',
        	      formatter: "{a} <br/>{b} : {c} ({d}%)"
        	    },  
        	    legend: {
        	      orient: 'vertical',
        	      left: 'right',
        	      show:false,  
        	      data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        	    },
        	    series: [
        	      {
        	        name: '访问来源',
        	        type: 'pie',
        	        radius : '30',
        	        coordinates: [110.53450137499999, 33.44104525],
        	        data: [
        	          {value:335, name:'直接访问'},
        	          {value:310, name:'邮件营销'},
        	          {value:234, name:'联盟广告'},
        	          {value:135, name:'视频广告'},
        	          {value:1548, name:'搜索引擎'}
        	        ],
        	        itemStyle: {
        	          emphasis: {
        	            shadowBlur: 10,
        	            shadowOffsetX: 0,
        	            shadowColor: 'rgba(0, 0, 0, 0.5)'
        	          }
        	        }
        	      },
        	      {
        	        name: '访问来源',
        	        type: 'pie',
        	        radius : '30',
        	        coordinates: [113.53450137499999, 34.44104525],
        	        data: [
        	          {value:335, name:'直接访问'},
        	          {value:310, name:'邮件营销'},
        	          {value:234, name:'联盟广告'},
        	          {value:135, name:'视频广告'},
        	          {value:1548, name:'搜索引擎'}
        	        ],
        	        itemStyle: {
        	          emphasis: {
        	            shadowBlur: 10,
        	            shadowOffsetX: 0,
        	            shadowColor: 'rgba(0, 0, 0, 0.5)'
        	          }
        	        }
        	      },
        	      {
        	        name: '访问来源',
        	        type: 'pie',
        	        radius : '30',
        	        coordinates: [110.53450137499999, 38.44104525],
        	        data: [
        	          {value:335, name:'直接访问'},
        	          {value:310, name:'邮件营销'},
        	          {value:234, name:'联盟广告'},
        	          {value:135, name:'视频广告'},
        	          {value:1548, name:'搜索引擎'}
        	        ],
        	        itemStyle: {
        	          emphasis: {
        	            shadowBlur: 10,
        	            shadowOffsetX: 0,
        	            shadowColor: 'rgba(0, 0, 0, 0.5)'
        	          }
        	        }
        	      }
        	    ]
        	  });
        	pieEchartslayer.appendTo(map);     
        }

多个饼图时需要一次性组织好数据，否则有层级问题，只有最后一个饼图鼠标放上去出提示信息，组织数据形式：

8.画柱状图

//展示柱图表    
        function showBarCharts(){   
        	var options = {
        		    color: ['#3398DB'],
        		    tooltip : {
        		      trigger: 'axis',
        		      axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        		        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        		      }
        		    },
        		    legend: {
        		      x: "left",
        		      show: false,  
        		      data: ['包租费', '物业费', '水电', '网络', '燃气'],
        		      selectedMode: 'multiple'
        		    },
        		    grid: [],
        		    xAxis : [],
        		    yAxis : [],
        		    series: []
        		  }
    
        		  var series = [
        		    {
        		      name: '包租费',
        		      type: 'bar',
        		      barWidth: '15',
        		      coordinates: [87.1435546875, 43.79150390625],
        		      data: [20, 12, 31, 34, 31],
        		      xAxisIndex: 0,
        		      yAxisIndex: 0
        		    },
        		    {
        		      name:'物业费',
        		      type:'bar',
        		      barWidth: '15',
        		      coordinates: [86.5283203125, 32.40966796875],
        		      data: [1, 1, 2, 3, 1],
        		      xAxisIndex: 1,
        		      yAxisIndex: 1
        		    },
        		    {
        		      name:'水电',
        		      type:'bar',
        		      barWidth: '15',
        		      coordinates: [98.876953125, 35.74951171875],
        		      data: [1, 1, 2, 3, 1],
        		      xAxisIndex: 2,
        		      yAxisIndex: 2
        		    },
        		    {
        		      name:'网络',
        		      type:'bar',
        		      barWidth: '15',
        		      coordinates: [108.80859375, 23.44482421875],
        		      data: [1, 1, 2, 3, 1],
        		      xAxisIndex: 3,
        		      yAxisIndex: 3
        		    },
        		    {
        		      name:'燃气',
        		      type:'bar',
        		      barWidth: '15',
        		      coordinates: [120.53450137499999, 44.44104525],
        		      data: [1, 1, 2, 3, 1],      
        		      xAxisIndex: 4,
        		      yAxisIndex: 4
        		    }
        		  ];
    
        		  series.forEach(function (item, index) {
        		    options.grid.push({
        		      show: true,
        		      containLabel: false,
        		      borderWidth: 0,
        		      borderColor: '#fff',
        		      width: 150,
        		      height: 80
        		    });
        		    options.xAxis.push({
        		      type : 'category',
        		      show: true,
        		      gridIndex: index,
        		      nameTextStyle: {
        		        color: '#3c3c3c'
        		      },
        		      axisLine: {
        		        show: false,
        		        onZero: false
        		      },
        		      axisLabel: {
        		        show: false,
        		        interval: 0,
        		        rotate: -45,
        		        textStyle: {
        		          color: '#3c3c3c',
        		          fontSize: 10
        		        }
        		      },
        		      axisTick: {
        		        show: false
        		      },
        		      data : ['新虹桥', '中山公园', '虹桥', '镇宁路', '天山古北']
        		    });
        		    options.yAxis.push({
        		      type: 'value',
        		      show: true,
        		      min: 0.001,
        		      splitLine: {show: false},
        		      axisLabel: {
        		        show: false
        		      },
        		      axisLine: {
        		        show: false,
        		        onZero: false
        		      },
        		      nameGap: '1',
        		      axisTick: {
        		        show: false
        		      },
        		      nameTextStyle: {
        		        color: '#3c3c3c',
        		        fontSize: 14
        		      },
        		      gridIndex: index
        		    });
        		    options.series.push(item)
        		  })
      
        		  barEchartslayer = new ol3Echarts(options);
        		  barEchartslayer.appendTo(map);   
        }

9.清除地图加载的echart图，layer

//清除所有的图层
    	function Draw_clear(){
    		if(null != pieEchartslayer){
    			pieEchartslayer.remove();  //移出,避免重复添加.
    		}  
    		if(null != barEchartslayer){
    			barEchartslayer.remove();  //移出,避免重复添加.
    		}  
    		if(null != orgLayerArr && orgLayerArr.length > 0){
    			for(var i = 0;i < orgLayerArr.length;i++){
    				map.removeLayer(orgLayerArr[i]);
    			}
    			orgLayerArr = [];     
    		}
    	}

10.给地图每个政区按图例的颜色上色，上色由各个政区的结果值匹配

//初始化政区图像坐标
       function initOrgPolygon(){
          $.ajax({  
    	         type:'get',  
    	         url: geowebcacheUrl+'/geoserver/sf/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sf%3Aprovince_borderline&maxFeatures=50&outputFormat=application%2Fjson',  
    	         dataType:'json',  
    	         data:null,        
    	         success:function(data){   
    	        	 orgPolygonArr = data;          
    	         },     
    	         error:function(){       
    	        	orgPolygonArr = null;          
    	        	showMsg("查询数据错误，请稍后重试","danger",1200,"center","center");
    	         }	
    		});  
    	}

11.鼠标移动简体：当底图及echarts都需要有提示信息时，设置底图的提示信息在图表之下，这样才能显示echart的提示信息，设置弹出框的stopEvent: false

var container = document.getElementById("popupWindow");
    	   
    	   windowOverlay = new ol.Overlay({
    	         //设置弹出框的容器
    	        element: container,
    	        //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
    	        autoPan: true,
    	        // 如果设置为ture，那么叠置层被放在装载控件的那个div容器中（该div容器css类名为ol-overlaycontainer-stopevent）
                // 如果设置为false，那么叠置层被放在css类名为ol-overlaycontainer的div容器下，由className属性（默认为'ol-overlay-container ol-selectable'）指定类名的div容器中
    	        stopEvent: false  
    	    });
    	   map.addOverlay(windowOverlay);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210127094510232.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70
[https_openlayers.org_en_latest_examples]: https://openlayers.org/en/latest/examples/
[https_openlayers.org_en_latest_apidoc_module-ol_Map-Map.html_removeLayer]: https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#removeLayer
[https_sakitam-fdd.github.io_ol3Echarts_index]: https://sakitam-fdd.github.io/ol3Echarts/#/index
[https_gitee.com_zhanglizeng_jarlist_tree_master_geoservice]: https://gitee.com/zhanglizeng/jarlist/tree/master/geoservice
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210126182843350.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210525103116530.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HTElaRU5H,size_16,color_FFFFFF,t_70