开发工具: Visual Studio 2015 、SuperMapiDesktop8C、SuperMapiServer8C、
关键技术:C#、ASP.MVC、
完成模块功能:地图区域定位
第一步:使用SuperMapiDesktop8C设置地图
1、右键看到新建文件型数据源点击创建文件型数据源
2、导入地图需要的数据(文件型数据:后缀格式shp)
3、然后右键再新建数据库型数据(你根据个人需求或者项目需求来决定是否需要数据库型)图1有新建数据库型数据点击
4、鼠标移到未命名工作空间右键选择另存工作空间创建工作空间(可以文件型或者数据库其中一个,也可以同时保存)
5、根据自己需求进行保存,我的是SQL保存方式(这样新建地图需要的数据和准备工作就完成了)
6、前面第三步把数据集导入到了文件数据源了,然后我们根据自己需求把数据拉到中间iDesktop会默认帮你创建地图窗口
7、进行数据处理和设置(这里数据我就不详解,如果需要留言我再跟你们讲解)
8、选择一个面数据集拿来当网格图层(我选择的是省界进行处理)
9、选择对象操作,然后根据你需要切割的面的数据集进行区域切割(铅笔图标代表可编辑状态)
(1):对象处理右上角“画线切割”选择
10、然后右键切割面的数据集选择关联浏览属性数据点击进去里面NAME填入自己需要的数据保存。
那么我们需要实现的区域定位工作就准备好了
注意:1、有了数据源才可以创建数据库,不然你直接创建数据库会报异常“原因是你没有是数据源”。
功能实现效果:
打开功能管理栏看到区域定位点击其中一个街道
区域定位样式代码:
<div class="panel panel-primary" style="border-radius:0">
<div class="panel-heading" style="height:35px;border-radius:0;">
<h4 class="panel-title ">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" style="display: block;font-style: normal;float: left; width: 90%;text-decoration:none;">
区域定位
</a>
<a style="width: 16px;height: 15px;float: right;display: block; background: url(/Content/images/jiantou.png) no-repeat round;background-repeat: round;" ;></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" style="height:136px;">
<div style="float:initial" onclick="getFeaturesBySQL(1)"><a>矿泉街道</a></div>
<div style="" onclick="getFeaturesBySQL(3)"><a>流花街道</a></div>
<div style="" onclick="getFeaturesBySQL(4)"><a>登峰街道</a></div>
<div style="" onclick="getFeaturesBySQL(6)"><a>人民街道</a></div>
<div style="" onclick="getFeaturesBySQL(7)"><a>光塔街道</a></div>
<div style="" onclick="getFeaturesBySQL(9)"><a>珠光街道</a></div>
<div style="margin-top:-111px;margin-left:88px;" onclick="getFeaturesBySQL(10)"><a>北京街道</a></div>
<div style="margin-top:7px;margin-left:87px;" onclick="getFeaturesBySQL(11)"><a>北京街道</a></div>
<div style="margin-top:7px;margin-left:88px;" onclick="getFeaturesBySQL(14)"><a>建设街道</a></div>
<div style="margin-top:7px;margin-left:82px;" onclick="getFeaturesBySQL(17)"><a>梅花村街道</a></div>
<div style="margin-top:6px;margin-left:88px;" onclick="getFeaturesBySQL(18)"><a>东山街道</a></div>
<div style="margin-top:-122px;margin-left:170px;" onclick="getFeaturesBySQL(20)"><a>白云街道</a></div>
<div style="margin-top:4px;margin-left:170px;" onclick="getFeaturesBySQL(21)"><a>洪桥街道</a></div>
<div style="margin-top:6px;margin-left:170px;" onclick="getFeaturesBySQL(22)"><a>六榕街道</a></div>
<div style="margin-top:9px;margin-left:170px;" onclick="getFeaturesBySQL(23)"><a>大东街道</a></div>
<div style="margin-top:6px;margin-left:170px;" onclick="getFeaturesBySQL(24)"><a>农林街道</a></div>
<div style="margin-top:-11px;margin-left:3px;" onclick="getFeaturesBySQL(25)"><a>大塘街道</a></div>
</div>
</div>
11:代码讲解
var map, //地图
markers,
url, //路径
LocalMrker,
lineLayer,
vectorLayer_ZJ, //省界矢量图层
style = {
strokeColor: "#3473b729",
strokeWidth: 2,
pointerEvents: "visiblePainted",
fillColor: "#fff",
fillOpacity: 0.3
};
url = "http://localhost:8090/iserver/services/map-Yuexiuquenclosure/rest/maps/区县界_region@YueXiuQusource_Data";
//创建地图控件
function init() {
//创建Markers标记图层
markersWu = new SuperMap.Layer.Markers("Markers");
vectorLayer_ZJ = new SuperMap.Layer.Vector("乡镇图层");
//新建线矢量图层
lineLayer = new SuperMap.Layer.Vector("lineLayer");
layer = new SuperMap.Layer.TiledDynamicRESTLayer("越秀区地图", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
layer.events.on({ "layerInitialized": addLayer });
//map上添加控件
map = new SuperMap.Map("map", {
controls: [
new SuperMap.Control.LayerSwitcher(),
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.PanZoomBar(),
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
})]
});
}
function drawGeometry1() {
//先清除上次的显示结果
//clearStatus();
clearFeatures();
drawPolygon1.activate();
}
function addLayer() {
//将Layer图层加载到Map对象上
map.addLayers([layer, markers, selects, lineLayer, marker1, markerLayer2, polygonLayer, markersWu, vectorLayer_ZJ]);//距离、标记物
//出图,map.setCenter函数显示地图
map.setCenter(new SuperMap.LonLat(113.2848870916, 23.1323660784993), 1);//LonLat:表示经纬度:x:(横轴,地理投影为经度)y:(纵轴,地理投影为纬度)//setCenter 设置地图中心点。
//removeLayer 通过删除可见元素(即layer.div属性)来移除地图上的图层。然后从地图的 图层列表中移除该图层,同时设置图层的map属性为null。
map.setBaseLayer(layer);
}
//区域定位
function getFeaturesBySQL(ZhenID) {
vectorLayer_ZJ.removeAllFeatures();
var queryParam = [], queryBySQLParams, queryBySQLService;
queryParam.push(new SuperMap.REST.FilterParameter({
name: "省界_region@YueXiuQusource_Data#1",
attributeFilter: "SmID =" + ZhenID
}));
//SQL 查询参数类。 该类用于设置 SQL 查询的相关参数。
queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
queryParams: queryParam//查询过滤条件参数数组
});
//SQL 查询服务类。 在一个或多个指定的图层上查询符合 SQL 条件的空间地物信息。
queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {//url 服务的访问地址
eventListeners: { "processCompleted": processCompleted_SB, "processFailed": processFailed_SB }
});
//传递到服务端
queryBySQLService.processAsync(queryBySQLParams);
}
//定位添加颜色
function processCompleted_SB(queryEventArgs) {
//声明字段
var i, j, feature, bounds, N = [], S = [], W = [], E = [],
result = queryEventArgs.result;//获取服务器传回来的数据
vectorLayer_ZJ.removeAllFeatures();
var features = [];
//判断是否有数据
if (result && result.recordsets) {//判断查询的查询结果记录集数组是否为空
for (i = 0; i < result.recordsets.length; i++) {//循环记录集数组
//features===用于存放矢量要素
if (result.recordsets[i].features) {//判断记录集数组的矢量要素是否为空
//如果记录集数组的矢量要素不为空,则又循环 记录集数组的矢量要素
for (j = 0; j < result.recordsets[i].features.length; j++) {
feature = result.recordsets[i].features[j];//获取记录集数组的矢量要素
//判断显示面或点
if (feature.geometry.CLASS_NAME == SuperMap.Geometry.Point.prototype.CLASS_NAME) {//判断返回的数据是不是这个数据
}
else {
var smID = parseInt(feature.data.SmID);
feature.smID = smID;
//省界网格
feature.style = {
strokeColor: '#0322ff',//边颜色
strokeWidth: 1,//边宽度
strokeDashstyle: 'dash',//边类型,虚线
fillColor: '#0322ff',//填充颜色
fillOpacity: 0.08,//透明度
fontColor: '#0322ff',
fontOpacity: "1",
fontSize: '18px',
fontWeight: 700
};
vectorLayer_ZJ.addFeatures(feature);
bounds = feature.data
if (bounds != null) {
if (bounds.SmSdriN != null && Boolean(bounds.SmSdriN) == true) {
N.push(Number(bounds.SmSdriN));
}
if (bounds.SmSdriS != null && Boolean(bounds.SmSdriS) == true) {
S.push(Number(bounds.SmSdriS));
}
if (bounds.SmSdriW != null && Boolean(bounds.SmSdriW) == true) {
W.push(Number(bounds.SmSdriW));
}
if (bounds.SmSdriE != null && Boolean(bounds.SmSdriE) == true) {
E.push(Number(bounds.SmSdriE));
}
}
}
}
}
}
}
if (W.length > 0 && S.length > 0 && E.length > 0 && N.length > 0) {
var bounds = new SuperMap.Bounds(
Math.min.apply(null, W),//最小的水平坐标系。
Math.min.apply(null, S),//最小的垂直坐标系。
Math.max.apply(null, E),//最大的水平坐标系。
Math.max.apply(null, N) //最大的垂直坐标系。
);
map.zoomToExtent(bounds, 2);//缩放到指定范围,重新定位中心点。
}
}
//失败方法
function processFailed_SB(e) {
swal('', e.error.errorMsg, '');
}
总结:
不知不觉中,旧的一年半悄然离去,迎来崭新而充满期望的2019年,
回首即将走完的2017-2018年,对我而言,是一个思考、反省,尝新求变之年。
因为对学习的追求,在这一年半里内我还学会了SQL、DW、C#、SpriingMVC和GIS等等编程技术,使我对未来向往生活如虎添翼;我时常反省,反省自己学习中的不足,进一步认识自己,扬长避短,争取在新的一年里在学习上有更出色的表现。首先要更加注重细节,因为我往往大意马虎常常在编写代码时上犯细节错误,学习前写好学习计划,从容的结束每一天的学习生活,而不是慌乱向以往高中一样迷茫;其次是更加细化学习时间,科学合理的安排好每一项学习任务,不再出现拖拉的迹象;最后是加强体育锻炼,为什么锻炼身体呢?因为这一年半的大学生活我严重发福了,要继续坚持每逢节假日去公园锻炼身体,才能适应今后长时间学习。