arcgis js api 根据速度不同用不同颜色渲染行驶轨迹

最新推荐文章于 2021-10-19 14:54:25 发布

L.傲骨雄风

最新推荐文章于 2021-10-19 14:54:25 发布

阅读量808

点赞数

分类专栏： arcgis-js

本文链接：https://blog.csdn.net/xlp789/article/details/108200001

版权

arcgis-js 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

1.代码

require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/SpatialReference",
            "esri/graphic",
            "esri/geometry/Polyline",
            "esri/layers/GraphicsLayer",
            , "esri/symbols/SimpleLineSymbol", "esri/Color"],
            function (Map, ArcGISTiledMapServiceLayer, , SpatialReference, Graphic, Polyline, GraphicsLayer, SimpleLineSymbol, Color) {

                var map = new Map("map", {
                    logo: false,
                    showAttribution: false,
                    center: [123.50403560, 41.74942523],
                    zoom: 16,
                    spatialReference: { "wkid": 3857 },
                });

                var DxtLayer = new ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer");
                map.addLayer(DxtLayer);


                var lowspedd_sls = new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([0, 255, 0]),
                    3
                );
                var middlespeed_sls = new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([255, 255, 0]),
                    3
                );
                
                var highspeed_sls = new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([255, 0, 0]),
                    3
                );
                $.ajax({
                    type: "get",
                    url: "test.ashx?m=GetGjd",
                    dataType: "json",
                    success: function (data) {
                        
                        var graphicLayer = new GraphicsLayer();
                        map.addLayer(graphicLayer);
                        for (var i = 0; i < data.length-1; i++) {
                            var polyline = new Polyline(new SpatialReference({ wkid: 3857 }));
                            polyline.addPath([[parseFloat(data[i].X), parseFloat(data[i].Y)], [parseFloat(data[i + 1].X), parseFloat(data[i + 1].Y)]]);
                            var speed = parseFloat(data[i + 1].SPEED);
                            var graphic = new Graphic(polyline);
                            if (speed > 0 && speed <=5) {
                                graphic.setSymbol(lowspedd_sls);
                            } else if (speed >5 && speed <= 10) {
                                graphic.setSymbol(middlespeed_sls);
                            } else {
                                graphic.setSymbol(highspeed_sls);
                            }
                            graphicLayer.add(graphic);
                        }
                        
                    }
                });


            });

2.效果图