因为项目使用openlayers地图框架，所以就研究了一下，配置了一些可以复制粘贴修改的代码！，基础配置怎么让地图出来、属性等我不详细说了，API看看复制都行！只讲解一下怎么绘制各种图层！以及添加点击、移入选择图层获取属性等！ 因为我项目中用的是Ext.js框架，所以用到了一些ext的功能 但是不影响讲解效果，可以看懂！因为用的是项目中的写好的代码，所以比较乱，凑合看。。。
1.给图层添加各种事件，移动、画点、画面、画线 ，根据点击的按钮不同，开启不同功能
//添加各种地图事件
addInteraction: function () {
this.vectorSource = new ol.source.Vector({
wrapX: false
});
this.vectorLayer = new ol.layer.Vector({
source: this.vectorSource,
layerid: 'drawlayer',
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#0ab3f1',
width: 4
}),
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: '#f6fcff'
}),
stroke: new ol.style.Stroke({
color: '#2fbbba',
width: 5
})
})
})
});
this.map.addLayer(this.vectorLayer);
this.selectI = new ol.interaction.Select();
this.map.addInteraction(this.selectI);
this.selectI.on('select', function (e) {
if (e.selected.length > 0) {}
}, this);
//移动
this.translateI = new ol.interaction.Translate({
features: this.selectI.getFeatures()
});
this.translateI.on('translateend', function (e) {
var wkt = new ol.format.WKT().writeFeature(e.features.getArray()[0]);
var id = this.selectI.getFeatures().array_[0].get('ID');
var type = this.selectI.getFeatures().array_[0].getGeometry().getType();
var record = {
ID: id,
type: type,
geom: wkt
};
this.updataLayerGeom(record);
}, this);
//画点
this.pointI = new ol.interaction.Draw({
source: this.vectorSource,
type: 'Point'
});
this.pointI.on('drawstart', function (e) {});
this.pointI.on('drawend', function (e) {
var wkt = new ol.format.WKT().writeFeature(e.feature);
var type = e.feature.getGeometry().getType();
var guid = this.getGuid();
e.feature.set('ID',guid);
var record = {
type: type,
geom: wkt,
ID: guid
};
this.saveGeomData(record);
}, this);
//画面
this.polygonI = new ol.interaction.Draw({
source: this.vectorSource,
type: 'Polygon'
});
this.polygonI.on('drawstart', function (e) {});
this.polygonI.on('drawend', function (e) {
var wkt = new ol.format.WKT().writeFeature(e.feature);
var type = e.feature.getGeometry().getType();
var guid = this.getGuid();
e.feature.set('ID',guid);
var record = {
type: type,
geom: wkt,
ID: guid
};
this.saveGeomData(record);
}, this);
//画线
this.lineStringI = new ol.interaction.Draw({
source: this.vectorSource,
type: 'LineString'
});
this.lineStringI.on('drawstart', function (e) {});
this.lineStringI.on('drawend', function (e) {
var wkt = new ol.format.WKT().writeFeature(e.feature);
var type = e.feature.getGeometry().getType();
var guid = this.getGuid();
e.feature.set('ID',guid);
var record = {
type: type,
geom: wkt,
ID: guid
};
this.saveGeomData(record);
}, this);
},
onButtonClick: function (button, pressed) {
switch (button.reference) {
case 'editor_create_point':
this.map.removeInteraction(this.translateI);
this.map.removeInteraction(this.polygonI);
this.map.removeInteraction(this.lineStringI);
this.map.addInteraction(this.pointI);
this.Delete = 0;
break;
case 'editor_create_pline':
this.map.removeInteraction(this.translateI);
this.map.removeInteraction(this.polygonI);
this.map.removeInteraction(this.pointI);
this.map.addInteraction(this.lineStringI);
this.Delete = 0;
break;
case 'editor_create_region':
this.map.removeInteraction(this.translateI);
this.map.removeInteraction(this.lineStringI);
this.map.removeInteraction(this.pointI);
this.map.addInteraction(this.polygonI);
this.Delete = 0;
break;
case 'editor_move':
this.map.removeInteraction(this.lineStringI);
this.map.removeInteraction(this.polygonI);
this.map.removeInteraction(this.pointI);
this.map.addInteraction(this.translateI);
this.Delete = 0;
break;
case 'editor_delete':
this.map.removeInteraction(this.translateI);
this.map.removeInteraction(this.lineStringI);
this.map.removeInteraction(this.pointI);
this.map.removeInteraction(this.polygonI);
this.Delete = 1;
this.deleteLayers();
break;
}
},
getGuid: function (len, radix) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
var uuid = [],
i;
radix = radix || chars.length;
if (len) {
// Compact form
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
} else {
// rfc4122, version 4 form
var r;
// rfc4122 requires these characters
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
// Fill in random data. At i==19 set the high bits of clock sequence as
// per rfc4122, sec. 4.1.5
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random() * 16;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
}
2.添加色块图层配置，通用
addDaQuLayer: function() {
var mystore = new Ext.data.JsonStore({
storeId: 'myStore',
proxy: {
type: 'ajax',
url: 'resources/data/交通大区.json',//此处是引入GIS人员处理好的json文件，绘画出图层
reader: {
type: 'json'
}
}
});
mystore.load({
scope: this,
callback: function(records, operation, success) {
if (success) {
var Source_dq = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(records[0].data, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
})
});
this.Layer_dq = new ol.layer.Vector({
source: Source_dq,
opacity: 0.5, //此图层的透明度
zIndex: 10, //此图层的层级
style: function(feature) {//配置每一个色块的属性，颜色 线的颜色 显示文字，等等，下面例子还有别的，可以看看
return new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(43,46,82,0.8)'
}),
stroke: new ol.style.Stroke({
color: '#00A9E6'
}),
zIndex: 1,
text: ol.style.Text({
text: feature.getProperties().XH
})
});
}
});
this.Layer_dq.set("layerid", 'daqulayer'); //设置矢量图层的layerid，用于查找该图层
this.map.addLayer(this.Layer_dq);
this.Layer_dq.setVisible(false);
}
}
});
},
3.添加线的图层配置方法，通用！
addGuiDaoLayer: function() {
var store = new Ext.data.JsonStore({
storeId: 'myStore',
proxy: {
type: 'ajax',
url: 'resources/data/轨道已建.json', //此处是引入GIS人员处理好的json文件，绘画出图层
reader: {
type: 'json'
}
}
});
var me = this;
store.load({
scope: this, //绑定this
callback: function(records, operation, success) {
if (success) {
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(records[0].data, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
})
});
this.layer_GuiDao = new ol.layer.Vector({
source: vectorSource,
zIndex: 11, //此图层的层级
style: function(feature) { //线的样式配置
return result = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0,0,0,0)' //线中间的色块颜色 画线用不到
}),
stroke: new ol.style.Stroke({
color: '#268997',//a31237 线颜色
width: 4 //线宽度
})
});
}
});
this.layer_GuiDao.set("layerid", 'trafficregionlayer') //设置矢量图层的layerid，用于查找该图层
this.layer_GuiDao.setVisible(true); //设置此图层显示还是隐藏 方便以后控制图层
this.map.addLayer(this.layer_GuiDao); //把此图层放在地图上
}
}
});
},
4.添加点的图层绘制，改改gis文件名字和属性等即可！
addGDStationLayer2: function() {
var mystore = new Ext.data.JsonStore({
storeId: 'myStore',
proxy: {
type: 'ajax',
url: 'resources/data/轨道站点在建.json', //依旧是gis人员配置好的json文件 ajax访问即可
reader: {
type: 'json'
}
}
});
mystore.load({
scope: this,
callback: function(records, operation, success) {
if (success) {
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(records[0].data, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
})
});
this.layer_GDStation2 = new ol.layer.Vector({
source: vectorSource,
zIndex: 20,
style: function(feature) {
var img;
if(feature.get('type')=='地铁换乘站点'){ //配置此点位显示图片
img=new ol.style.Icon({
anchor: [0.5, 8],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
//size: [40,40],
opacity: 0.8,
src: 'resources/images/地铁换乘.png'
})
}else if(feature.get('type')=='快线换乘站点'){
img=new ol.style.Icon({
anchor: [0.5, 8],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
//size: [40,40],
opacity: 0.8,
src: 'resources/images/快线换乘.png'
})
}else{
img=new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: '#999'
}),
stroke: new ol.style.Stroke({
color: '#f00',
width: 2
})
})
}
return new ol.style.Style({ //这种方法也可， 配置此点位显示别的文字，等
fill: new ol.style.Fill({
color: 'rgba(43,46,82,0.8)'
}),
stroke: new ol.style.Stroke({
color: '#00A9E6'
}),
zIndex: 1,
text: ol.style.Text({
text: feature.getProperties().NAME,
})
});
}
});
this.layer_GDStation2.set("layerid", 'stationlayer') //设置矢量图层的layerid，用于查找该图层\
this.layer_GDStation2.setVisible(false);
this.map.addLayer(this.layer_GDStation2);
}
}
});
},
5.下面是鼠标移入，鼠标点击，等显示地图色块、线路、点、等名称配置， 通用，我已经写好了，可以复制改改即可。
onMapInit: function(view) {
me = this;
this.wmscontroller = view.getController();
this.map = this.wmscontroller.map;
//禁用地图 禁用地图的一些文字以及图层配置
//this.wmscontroller.tileLayer.setVisible(false);
this.wmscontroller.annoTileLayer.setVisible(false);
var selectPointerMove = new ol.interaction.Select({ //鼠标移入配置
condition: ol.events.condition.pointerMove,
style: function(feature) {
if (feature == undefined) return;
var result;
switch (feature.getGeometry().getType()) {
case 'Point':
result = new ol.style.Style({
//鼠标移入文字配置
// image: new ol.style.Circle({
// radius: 5,
// fill: new ol.style.Fill({
// color: 'rgba(10, 100, 255, 0.6)'
// }),
// stroke: new ol.style.Stroke({
// color: 'red',
// width: 1
// })
// }),
zIndex: 20,
//鼠标移入图片配置 可以添加一些小图标显示
image: new ol.style.Icon(({
anchor: [0.5, 10],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
//size: [40,40],
opacity: 0.8,
src: 'resources/images/位置.png'
})),
text: new ol.style.Text({
text: '站点：' + feature.get('name'), // 访问的json地图格式文件中属性 都在feature中，get（）此方法可以获取到
font: "bold 12px 微软雅黑",
offsetY: -15,
fill: new ol.style.Fill({
color: '#f7f89e'
})
})
});
break;
case 'LineString':
result = new ol.style.Style({
zIndex: 20,
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
}),
text: new ol.style.Text({
text: '线路：' + feature.get('name'),
font: "bold 12px 微软雅黑",
offsetY: -15,
fill: new ol.style.Fill({
color: '#f7f89e'
})
})
});
break;
case 'MultiPoint':
result = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'rgba(10, 100, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 1
})
})
});
break;
case 'MultiPolygon':
result = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
})
});
break;
case 'Polygon':
result = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [4],
width: 3
})
});
break;
case 'GeometryCollection':
result = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'magenta',
width: 2
}),
fill: new ol.style.Fill({
color: 'magenta'
}),
image: new ol.style.Circle({
radius: 10,
fill: null,
stroke: new ol.style.Stroke({
color: 'magenta'
})
})
});
break;
case 'Circle':
result = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
})
});
break;
case 'LineString':
result = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 3
}),
zIndex: 20,
text: new ol.style.Text({
text: feature.get('name_2') + '/' + feature.get('num'),
font: "bold 12px 微软雅黑",
offsetY: -15,
fill: new ol.style.Fill({
color: '#f7f89e'
})
})
})
break;
case 'MultiLineString':
result = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 1
}),
zIndex: 20,
text: new ol.style.Text({
text: feature.get('name_2') + '/' + feature.get('num') + '条',
font: "bold 12px 微软雅黑",
offsetY: -15,
fill: new ol.style.Fill({
color: '#f7f89e'
})
})
});
break;
}
return result;
}
});
//上面配置好后， 就把移入事件添加到图层上面，
this.map.addInteraction(selectClick);
var tagfield_location = this.lookup('tagfield_location');
selectClick.on('select', function(e) { //这里面是配置点击色图层获取到图层的一些数据属性后要做什么
if (e.selected.length > 0) { //这里面是我的例子，只是放着做示例！
var addShowText;
if (e.selected[0].values_['XH'] != undefined) {
addShowText = e.selected[0].values_['XH'];
} else if (e.selected[0].values_['QUHUA'] != undefined) {
addShowText = e.selected[0].values_['QUHUA'];
} else if (e.selected[0].values_['DISTNAME'] != undefined) {
addShowText = e.selected[0].values_['DISTNAME'];
}
_this.clickMapArea = tagfield_location.getValue();
_this.clickMapArea.push(addShowText);
_this.tagfieldPushLocation();
}
});
},