OpenLayers基本功能的实现

           从着手研究Gis到刚才最后一个功能的实现，算算有一个月的时间，从前端到后端是geoserver+OpenLayers+MySQL,很开源，很通用
           总的实现思路：用WMS作地图的显示，用Vector做基本操作，因为是第一次接触GIS这块，这是前期我选择的实现方式，这两天意识到有更方便的方式，当然研究越深，知道的也越多，这个暂时不表，先说下各个功能的实现方式：
           增加功能，很简单就是在前台图层（注：图层的概念和PS图层的概念类似，而整个Map是个容器，一个一个图层的叠加构成了Map的总体视觉体现）上新增一个点，能动态的保存到后台数据库中，而通过刷新，能展现出来。做了个按钮，点击后，就新建一个Vector，给这个vector注册一个featureadded监听事件，一旦发现有新的元素添加，通过一些转换将元素的坐标通过调用后台保存到数据库，按着这个思路实现没问题，中间遇到的都是一些技术上的小问题，但就是这些小问题往往让我们很纠结，因为不解决下一步就没办法进行。
          查询功能，通过点击地图上的元素能查询到这个元素在数据库中保存的一些信息，比如一个点是医院的话，点击它后台数据库中保存的医院的名字，地址，电话等一些基本信息都能在前台看到。这个功能实现也不难，因为OpenLayers封装了一个控件​WMSGetFeatureInfo，然后通过Popup格式化这些信息并弹出来，这个也没遇到什么问题
          删除功能:当确定删除的时候，点击元素能从后台数据库中删除元素对应的那条数据，这个功能我借用了查询功能的控件，但问题也出现了，​WMSGetFeatureInfo控件能直接返回信息，我前期一直认为这个控件是向Geoserver发出的请求，因为geoserver发布图层的时候是和对应数据库中的表绑定的，因为控件功能是封装的一直想当然的认为是这样，而它所返回的信息是Html形式的，在如何取到html中的元素的id属性这个问题上纠结了两天，直到突然意识到可以用正则表达式进行匹配，当然这个问题是解决了能成功的进行删除操作，但这两天我才悲催的感觉到，好像通过feature.fid就能直接拿到你点击的那个点的fid，走了弯路浪费了两天的光阴。
        下面是编辑功能，编辑功能有两个预想一个是在查询功能弹出信息框的时候改用Extjs实现这样能直接在信息框里修改数据，另一个预想就是拖动点到一个新位置能动态的保存，第一个预想容易实现，第二个遇到一些问题，也实现了，方法就是新建vector并用WFS取数据，添加ModifyFeature控件，在用WFS取数据的时候遇到了问题，我是照着官方的例子做的，代码格式什么的没问题但就是取不到数据，和群里的哥们请教了下 也没找到错误，直到让一个同事帮忙看下代码，奇迹出现了只见他轻轻的点击一下按钮，地图出现了，数据取到了！而那个按钮我已经点击了一上午了，当时那个心啊 内牛满面。。。。
        最后一个功能是增加marker 能添加备注文字，并且点击marker备注文字能显示出来，这个功能做成什么样我心里也没个具体的逻辑，看了下百度地图的标记功能，就按照它那个样式实现的，marker不保存到后台数据库里 只是暂存前台，一刷新就没了。
希望写的东西能让刚接触GIS的朋友，实现基本Demo的时候有个参考不会感到不知从那下手。
基本功能实现了，下一步自然就是优化了。

评论

2 楼 zeng8960 2014-07-11  

楼主，能把代码 放出来么

1 楼 影非弦 2013-07-31  

很怀疑Lz贴这样一张图片的目的是干嘛