代码之家  ›  专栏  ›  技术社区  ›  DhanaLaxshmi

如何使用openalyers中的方向服务绘制不同颜色的折线3

direction openlayers-3 colors service
  •  0
  • DhanaLaxshmi  · 技术社区  · 10 年前

    我正在使用您的方向服务在上绘制多段线,如下示例所示 

    <!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我可以做到,但对于上面的示例,我不知道如何开始,请给我指一个示例或指导我怎么做

    1 回复  |  直到 10 年前
        1
  •  1
  •   itsyahani    10 年前

    向要添加的每个LineString要素添加一个属性,然后在样式数组中添加一个具有所需颜色的样式,然后在“样式”函数中,使用该属性从该数组中选择相关样式。在这里我编辑了你的代码, 

     <!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>
    推荐文章
    Peter  ·  确定声流的方向声[关闭]
    8 年前
    iji  ·  如何在swift中使用MapKit旋转自定义用户LocationAnnotationView图像?
    9 年前
    DhanaLaxshmi  ·  如何使用openalyers中的方向服务绘制不同颜色的折线3
    10 年前
    Sumi  ·  角度统计没有意义
    11 年前
    Kyle Shike  ·  HTML选择和选项混合方向(ltr&rtl)
    11 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号