arcgis api for js 通过指针事件访问特性 - 4.11.html

最新推荐文章于 2023-03-23 16:23:37 发布

学无止境慢慢来

最新推荐文章于 2023-03-23 16:23:37 发布

阅读量330

点赞数

分类专栏： arcgis_js_api_demo4.11

原文链接：https://js.arcgis.com

版权

arcgis_js_api_demo4.11 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>通过指针事件访问特性 - 4.11</title>

    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #info {
            background-color: black;
            opacity: 0.75;
            color: orange;
            font-size: 16pt;
            padding: 8px;
            visibility: hidden;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.11/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer"
        ], function(Map, MapView, FeatureLayer) {
            const hurricanesLayer = new FeatureLayer({
                url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/1",
                outFields: ["*"]
            });

            const map = new Map({
                basemap: "dark-gray",
                layers: [hurricanesLayer]
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-61.125537, 35.863534],
                zoom: 4,
                highlightOptions: {  // 平面视图的高光选项(在视图的feature上起作用)。
                    color: [255, 255, 0, 1],
                    haloOpacity: 0.9,
                    fillOpacity: 0.2
                }
            });

            view.ui.add("info", "top-right");

            view.when().then(function() {
                return hurricanesLayer.when();
            }).then(function(layer) {
                const renderer = layer.renderer.clone();
                // console.log("renderer.symbol:", renderer.symbol);
                // 设置响应特性的新样式。
                renderer.symbol.width = 4;  // hurricanesLayer图层的特性宽度。
                renderer.symbol.color = [128, 128, 128, 0.8];
                layer.renderer = renderer;

                return view.whenLayerView(layer);
            }).then(function(layerView) {
                // 为pointer-down(手机)和pointer-move(鼠标)事件 设置事件处理程序。
                // 并且获取屏幕的x, y坐标。
                // view.on("pointer-move", eventHandler);
                view.on("click", eventHandler);
                view.on("pointer-down", eventHandler);

                function eventHandler(event) {
                    // hitTest()检查：视图中的所有图形，是否和指针的x, y坐标相交。
                    view.hitTest(event).then(getGraphics);
                }

                let highlight, currentYear, currentName, currentId;

                function getGraphics(response) {
                    // 展示hurricanesLayer的最上层图形的选择的属性-值给用户。
                    if (response.results.length) {
                        const graphic = response.results.filter(function(result) {
                            return result.graphic.layer === hurricanesLayer;
                        })[0].graphic;
                        console.log("graphic:", graphic);

                        const attributes = graphic.attributes;
                        const category = attributes.CAT;
                        const wind = attributes.WIND_KTS;
                        const name = attributes.NAME;
                        const year = attributes.YEAR;
                        const id = attributes.OBJECTID;

                        document.getElementById("info").style.visibility = "visible";
                        document.getElementById("name").innerHTML =  "名称：" + name;
                        document.getElementById("category").innerHTML =
                            "风力等级：" + category;
                        document.getElementById("wind").innerHTML = "风速：" + wind + " kts(节(海里/小时))";

                        // 突出显示属于同一飓风的所有特征，而该特征是从hitTest()返回的。
                        const query = layerView.layer.createQuery();
                        // query.where = "YEAR = " + year + " AND NAME = '" + name + "'";
                        query.where = "OBJECTID = " + id;
                        layerView.queryObjectIds(query).then(function(ids) {
                            // if( highlight && (currentName !== name || currentYear !== year) ){
                            //     highlight.remove();
                            //     highlight = null;
                            // }
                            if( highlight && currentId !== id){
                                highlight.remove();
                                highlight = null;
                            }
                            console.log("ids:", ids);
                            highlight = layerView.highlight(ids);
                            // currentYear = year;
                            // currentName = name;
                            currentId = id;
                        });
                    }
                    else {
                        // 如果没有从hitTest()返回任何feature，则移除突出显示。
                        if(highlight){
                            highlight.remove();
                            highlight = null;
                        }
                        document.getElementById("info").style.visibility = "hidden";
                    }
                }
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="info">
        <span id="name"></span> <br />
        <span id="category"></span> <br />
        <span id="wind"></span>
    </div>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
arcgis api for js 通过指针事件访问特性 - 4.11.html

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> <title>通过指针事件...
复制链接

扫一扫