企业官网建设流程全解析

商业网站建设与维护方案书,支付公司网站建设费怎么入账,2021最火的新媒体营销案例,新乡百度网站优化排名GIS开发openlayers基于webgis的全国公司分布统计以及查询系统 适合对象#xff1a;gis初学者#xff0c;爱好者 这个系统采用的webgis技术是openlayersgeoserver#xff0c;开发工具vs2012。 备注#xff1a;前端项目#xff0c;没有后端#xff0c;后台接口调用在线模式…GIS开发openlayers基于webgis的全国公司分布统计以及查询系统 适合对象gis初学者爱好者 这个系统采用的webgis技术是openlayersgeoserver开发工具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 typetext idcompanyTypeInput placeholder输入公司类型 button idsearchButton搜索/buttondocument.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开发的道路上越走越远