鄂州市网站建设_网站建设公司_服务器维护_seo优化

GIS开发openlayers基于webgis的全国公司分布统计以及查询系统 适合对象：gis初学者，爱好者 这个系统采用的webgis技术是openlayers+geoserver，开发工具vs2012。 备注：前端项目，没有后端，后台接口调用在线模式，geoserver地图服务数据也是在线模式，但是目前云服务器停止，访问不到！所以只有前端项目源码部分！！适合学习研究webgis素材用。 具体的功能点包括：1、地图底图切换；2、地图工具栏；3、条件搜索;4、分布以及统计。 具体看截图效果。

嘿，GIS初学者和爱好者们！今天来给大家分享一个超有趣的前端项目——基于WebGIS的全国公司分布统计以及查询系统。这个项目采用了OpenLayers + GeoServer的WebGIS技术，用的开发工具是VS2012 。不过要注意哦，目前云服务器停止，后台接口调用的在线模式以及GeoServer地图服务数据的在线模式都访问不到啦，所以咱们现在就只能研究前端项目源码部分，但这对于学习WebGIS来说，可是很好的素材呢！

系统功能大揭秘

1. 地图底图切换

地图底图切换功能可以让用户根据自己的喜好和需求，轻松切换不同风格的地图底图。在OpenLayers里，实现这个功能关键在于对不同图层的控制。咱们来看段简单代码：

// 创建不同底图的图层 var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); var bingLayer = new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'YOUR_BING_MAPS_KEY', imagerySet: 'Road' }) }); // 创建地图并添加底图图层 var map = new ol.Map({ target:'map', layers: [osmLayer], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 }) }); // 底图切换按钮点击事件 document.getElementById('osmButton').addEventListener('click', function () { map.setLayers([osmLayer]); }); document.getElementById('bingButton').addEventListener('click', function () { map.setLayers([bingLayer]); });

在这段代码里，我们先创建了OSM和Bing Maps两种不同的底图图层。然后通过map.setLayers方法，在用户点击相应按钮时，切换显示不同的底图图层。这样用户就能自由选择自己喜欢的地图风格啦。

2. 地图工具栏

地图工具栏提供了一系列实用的工具，比如缩放、平移、测距等功能，方便用户对地图进行操作。以缩放功能为例，OpenLayers里实现起来也不难：

// 创建缩放控件 var zoomControl = new ol.control.Zoom({ target: document.getElementById('zoom-toolbar') }); map.addControl(zoomControl);

这里通过ol.control.Zoom创建了缩放控件，并把它添加到地图上指定的DOM元素zoom-toolbar里。用户点击缩放按钮，就能轻松缩放地图，查看更详细或更宏观的地图信息。

3. 条件搜索

条件搜索功能允许用户按照特定条件查找公司。假设我们要根据公司类型来搜索，前端代码可能会像这样：

<input type="text" id="companyTypeInput" placeholder="输入公司类型"> <button id="searchButton">搜索</button>

document.getElementById('searchButton').addEventListener('click', function () { var companyType = document.getElementById('companyTypeInput').value; // 这里假设数据存储在一个数组里，实际可能从服务器获取 var companies = [ { name: '公司A', type: '科技', location: [116.4, 39.9] }, { name: '公司B', type: '金融', location: [121.4, 31.2] } ]; var resultCompanies = []; for (var i = 0; i < companies.length; i++) { if (companies[i].type === companyType) { resultCompanies.push(companies[i]); } } // 这里可以根据搜索结果在地图上标注公司位置等操作 });

在这段代码里，我们获取用户输入的公司类型，然后遍历模拟的公司数据数组，筛选出符合条件的公司。实际项目中，这些数据可能是通过AJAX从服务器获取的。

4. 分布以及统计

分布统计功能会展示全国公司的分布情况，并进行一些统计分析，比如不同地区公司数量统计等。要实现公司分布展示，我们可以在地图上添加点标记：

// 创建一个矢量图层用于显示公司点 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector() }); map.addLayer(vectorLayer); // 假设获取到的公司数据 var companies = [ { name: '公司A', location: [116.4, 39.9] }, { name: '公司B', location: [121.4, 31.2] } ]; for (var i = 0; i < companies.length; i++) { var feature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat(companies[i].location)), name: companies[i].name }); vectorLayer.getSource().addFeature(feature); }

这段代码创建了一个矢量图层，然后根据公司的经纬度数据创建ol.Feature，添加到矢量图层中，这样就在地图上显示出公司的分布点啦。至于统计功能，就需要对这些数据进一步分析计算，比如按照地区分类统计公司数量等操作。

虽然目前这个项目因为云服务器的问题不能完整运行，但通过研究前端源码，咱们能学到不少WebGIS开发的知识和技巧。希望大家能从这个项目中收获满满，在GIS开发的道路上越走越远！