如何在 openalyers3 中使用你的方向服务绘制不同颜色的多段线
How to draw different colors polylines using yours direction service in openalyers3
我正在使用您的方向服务绘制多段线,如下例所示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">-->
</head>
<body>
<div id="map" class="map"></div>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script>
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'Point': new ol.style.Style({
image: image
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rose',
width: 1
})
}),
'MultiPoint': new ol.style.Style({
image: image
}),
'MultiPolygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
'GeometryCollection': 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'
})
})
}),
'Circle': 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)'
})
})
};
var styleFunction = function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
var geojsonObject = {
"type": "LineString",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"coordinates":
[
[103.984865, 1.350197]
,[103.985188, 1.350903]
,[103.985376, 1.351149]
,[103.985477, 1.351341]
,[103.986155, 1.352857]
,[103.986195, 1.352982]
,[103.986248, 1.353248]
,[103.986393, 1.353593]
,[103.986564, 1.353550]
,[103.985175, 1.350160]
,[103.985138, 1.350069]
], "properties": {
"distance": "21.452372",
"description": "To enable simple instructions add: 'instructions=1' as parameter to the URL",
"traveltime": "1228"
}
};
//console.log(geojsonObject.coordinates);
var routeGeom = new ol.geom.LineString(geojsonObject.coordinates).transform('EPSG:4326','EPSG:3857');
var routeFeature = new ol.Feature({
geometry:routeGeom
})
var extentToZoom = routeGeom.getExtent();
console.log(extentToZoom);
console.log(routeFeature);
var vectorSource = new ol.source.Vector({
features: [routeFeature]
});
//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
urls : ["http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all//{z}/{x}/{y}.png"]
})
}),
vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
map.getView().fit(extentToZoom,map.getSize())
</script>
</body>
</html>
但是我想画不同的颜色线,例如在示例中我想要第一行是绿色,下一行是蓝色(知道它本身是绿色的)同样我想要的图太多用不同的颜色绘制它
使用 multiString 我可以做到,但对于上面的示例,我不知道如何开始,请指点我一个示例或指导我如何做
为您要添加的每个 LineString 特征添加一个属性,并在您的样式数组中添加一个具有您想要的颜色的样式,然后在样式函数中,将该属性用于 select 相关样式大批。我在这里编辑了你的代码,
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">-->
</head>
<body>
<div id="map" class="map"></div>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script>
var styles = {
'greenRoute': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
}),
'redRoute': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
})
})
};
var styleFunction = function(feature, resolution) {
return styles[feature.get("fName")];
};
var geojsonObject = {
"type": "LineString",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"coordinates":
[
[103.984865, 1.350197]
,[103.985188, 1.350903]
,[103.985376, 1.351149]
,[103.985477, 1.351341]
,[103.986155, 1.352857]
,[103.986195, 1.352982]
,[103.986248, 1.353248]
,[103.986393, 1.353593]
,[103.986564, 1.353550]
,[103.985175, 1.350160]
,[103.985138, 1.350069]
], "properties": {
"distance": "21.452372",
"description": "To enable simple instructions add: 'instructions=1' as parameter to the URL",
"traveltime": "1228"
}
};
//console.log(geojsonObject.coordinates);
var routeGeom = new ol.geom.LineString(geojsonObject.coordinates).transform('EPSG:4326','EPSG:3857');
var redRouteGeom = new ol.geom.LineString([
[103.984865, 1.350197]
,[103.985188, 1.350903]
,[103.985138, 1.350069]
]).transform('EPSG:4326','EPSG:3857');
var routeFeature = new ol.Feature({
geometry:routeGeom,
fName: "greenRoute"
})
var redRoute = new ol.Feature({
geometry:redRouteGeom,
fName: "redRoute"
})
var extentToZoom = routeGeom.getExtent();
console.log(extentToZoom);
console.log(routeFeature);
var vectorSource = new ol.source.Vector({
features: [routeFeature,redRoute]
});
//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style : styleFunction
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
urls : ["http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all//{z}/{x}/{y}.png"]
})
}),
vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
map.getView().fit(extentToZoom,map.getSize());
var select_interaction = new ol.interaction.Select();
select_interaction.on("select", function (e) {
// do something. e.element is the feature which was added
var evt= e.selected;
});
map.addInteraction(select_interaction);
</script>
</body>
</html>
我正在使用您的方向服务绘制多段线,如下例所示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">-->
</head>
<body>
<div id="map" class="map"></div>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script>
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'Point': new ol.style.Style({
image: image
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rose',
width: 1
})
}),
'MultiPoint': new ol.style.Style({
image: image
}),
'MultiPolygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
'GeometryCollection': 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'
})
})
}),
'Circle': 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)'
})
})
};
var styleFunction = function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
var geojsonObject = {
"type": "LineString",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"coordinates":
[
[103.984865, 1.350197]
,[103.985188, 1.350903]
,[103.985376, 1.351149]
,[103.985477, 1.351341]
,[103.986155, 1.352857]
,[103.986195, 1.352982]
,[103.986248, 1.353248]
,[103.986393, 1.353593]
,[103.986564, 1.353550]
,[103.985175, 1.350160]
,[103.985138, 1.350069]
], "properties": {
"distance": "21.452372",
"description": "To enable simple instructions add: 'instructions=1' as parameter to the URL",
"traveltime": "1228"
}
};
//console.log(geojsonObject.coordinates);
var routeGeom = new ol.geom.LineString(geojsonObject.coordinates).transform('EPSG:4326','EPSG:3857');
var routeFeature = new ol.Feature({
geometry:routeGeom
})
var extentToZoom = routeGeom.getExtent();
console.log(extentToZoom);
console.log(routeFeature);
var vectorSource = new ol.source.Vector({
features: [routeFeature]
});
//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
urls : ["http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all//{z}/{x}/{y}.png"]
})
}),
vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
map.getView().fit(extentToZoom,map.getSize())
</script>
</body>
</html>
但是我想画不同的颜色线,例如在示例中我想要第一行是绿色,下一行是蓝色(知道它本身是绿色的)同样我想要的图太多用不同的颜色绘制它
使用 multiString 我可以做到,但对于上面的示例,我不知道如何开始,请指点我一个示例或指导我如何做
为您要添加的每个 LineString 特征添加一个属性,并在您的样式数组中添加一个具有您想要的颜色的样式,然后在样式函数中,将该属性用于 select 相关样式大批。我在这里编辑了你的代码,
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">-->
</head>
<body>
<div id="map" class="map"></div>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script>
var styles = {
'greenRoute': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
}),
'redRoute': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
})
})
};
var styleFunction = function(feature, resolution) {
return styles[feature.get("fName")];
};
var geojsonObject = {
"type": "LineString",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"coordinates":
[
[103.984865, 1.350197]
,[103.985188, 1.350903]
,[103.985376, 1.351149]
,[103.985477, 1.351341]
,[103.986155, 1.352857]
,[103.986195, 1.352982]
,[103.986248, 1.353248]
,[103.986393, 1.353593]
,[103.986564, 1.353550]
,[103.985175, 1.350160]
,[103.985138, 1.350069]
], "properties": {
"distance": "21.452372",
"description": "To enable simple instructions add: 'instructions=1' as parameter to the URL",
"traveltime": "1228"
}
};
//console.log(geojsonObject.coordinates);
var routeGeom = new ol.geom.LineString(geojsonObject.coordinates).transform('EPSG:4326','EPSG:3857');
var redRouteGeom = new ol.geom.LineString([
[103.984865, 1.350197]
,[103.985188, 1.350903]
,[103.985138, 1.350069]
]).transform('EPSG:4326','EPSG:3857');
var routeFeature = new ol.Feature({
geometry:routeGeom,
fName: "greenRoute"
})
var redRoute = new ol.Feature({
geometry:redRouteGeom,
fName: "redRoute"
})
var extentToZoom = routeGeom.getExtent();
console.log(extentToZoom);
console.log(routeFeature);
var vectorSource = new ol.source.Vector({
features: [routeFeature,redRoute]
});
//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style : styleFunction
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
urls : ["http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","http://b.basemaps.cartocdn.com/light_all//{z}/{x}/{y}.png"]
})
}),
vectorLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
map.getView().fit(extentToZoom,map.getSize());
var select_interaction = new ol.interaction.Select();
select_interaction.on("select", function (e) {
// do something. e.element is the feature which was added
var evt= e.selected;
});
map.addInteraction(select_interaction);
</script>
</body>
</html>