ArcGis for js 自定义点和弹出层

最新推荐文章于 2021-10-28 18:41:08 发布

鱼恋虾

最新推荐文章于 2021-10-28 18:41:08 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_50810577/article/details/110910034

版权

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>地图</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
    //引入需要的模块
        require([
            "esri/Basemap",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/GraphicsLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/TileLayer",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/symbols/TextSymbol",
            "esri/renderers/support/jsonUtils",
            "esri/layers/support/LabelClass",
            "dojo/domReady!"
        ], function (Basemap, Map, MapView, GraphicsLayer, FeatureLayer, TileLayer, Graphic, Point, TextSymbol,
            rendererJsonUtils,
            LabelClass) {
              //自定义图层做地图，地址换成自己的------------
            // var layerMap = new TileLayer({
            //     url: "http://10.8.4.128/server/rest/services/OneMap/TH_XZQH_2000/MapServer"
            // });
            // var customBasemap = new Basemap({
            //     baseLayers: [layerMap],
            //     title: "Custom Basemap",
            //     id: "myBasemap"
            // });
            // var map = new Map({
            //     basemap: customBasemap
            // });
            //--------------------------------
            var map = new Map({
                basemap: "osm"
            });
            var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 6,
                center: [120.173901, 31.242549]
            });
			//点的信息
            var point = [{
                    "geometry": {
                        "x": 120.40025930148481,
                        "y": 31.44042484400633,
                        "spatialReference": {
                            "wkid": 4490
                        }
                    },
                    "attributes": {
                        "ID": "2021",
                        "type": "municipality",
                        "name": "太湖",
                        "code": "2021",
                        "pop": "0",
                       
                    }
                },
                {
                    "geometry": {
                        "x": 120.430444,
                        "y": 31.451119,
                        "spatialReference": {
                            "wkid": 4490
                        }
                    },
                    "attributes": {
                        "ID": "2021",
                        "type": "municipality",
                        "name": "张桥",
                        "code": "2020",
                        "pop": "1",
                        
                    }
                }
            ];
            //点
            var gras = [];
            for (var i = 0; i < point.length; i++) {
                gras.push(new Graphic({
                    geometry: new Point({
                        longitude: point[i].geometry.x,
                        latitude: point[i].geometry.y
                    }),
                    attributes: point[i].attributes
                }))
            }
            console.log(gras)
            //要用到的样式
            var Symbol1 = {
                // "color": [255, 163, 138, 150],

                "color": [28, 251, 2, 255], //绿色
                "size": 22,
                "type": "esriSMS",
                "style": "circle"
            };
            var Symbol2 = {
                "color": [255, 0, 0, 255], //红色
                "size": 22,
                "type": "esriSMS",
                "style": "circle"
            };

            var renderJson = {
                "type": "uniqueValue",
                "field1": "pop",//与点的信息关联的属性，用来判断用哪种symbol
                "defaultSymbol": {
                    "color": [28, 251, 2, 150],
                    "size": 22,
                    "outline": {
                        "color": [255, 0, 0, 150],
                        "width": 1,
                        "type": "esriSLS",
                        "style": "none"
                    },
                    "type": "esriSMS"
                },
                "uniqueValueInfos": [{
                        "value": "0", //红色 对应pop的值
                        "symbol": Symbol1 //对应样式
                    },
                    {
                        "value": "1", //绿色 对应pop的值
                        "symbol": Symbol2 //对应样式
                    }
                ]

            };
            var renderer = rendererJsonUtils.fromJSON(renderJson);
            //字段定义
            var fields = [{
                name: "ObjectID",
                alias: "ObjectID",
                type: "oid"
            }];
            for (var col in gras[0]["attributes"]) {
                console.log(col)
                fields.push({
                    name: col,
                    alias: col,
                    type: "string"
                })
            }
            console.log(fields)
            //标注
            //弹框
            //定义图层
            var layer = new FeatureLayer({
                source: gras,
                renderer: renderer,
                geometryType: "point",
                fields: fields,
                objectIdField: "ObjectID",
                //弹出层内容
                popupTemplate: {
                    title: "{name}",
                    content: `{pop}`
                }
            });
			//将layer添加到map中
            map.add(layer);
            // center: [120.173901, 31.242549]
            //重新设定中心点经纬度
            var pt = new Point({
                x: 120.173901,
                y: 31.242549,
                spatialReference: 4490
            });
            view.center = pt;
            //自定义点击事件
            view.on('click', e => {
                console.log("点击了屏幕")
                view.hitTest(e).then(res => {
                    if (res.results.length !== 0) {
                        console.log("点击了坐标点")
                        console.log((res.results[0].graphic.attributes.ObjectID))
                        let objId = res.results[0].graphic.attributes.ObjectID
                        //筛选当前点击的坐标点信息
                        let mark = gras.filter(value => {
                            // console.log(value)
                            return value.attributes.ObjectID == objId
                        })

                        console.log(mark[0].attributes.ObjectID)
                        //定义新的弹出层内容
                        var popupTemplate = {
                            // autocasts as new PopupTemplate()
                            title: "自定义图层{name}",
                            // outFields: ["*"],
                            content: "",
                        };

                        layer.popupTemplate = popupTemplate
                    }
                })
            })

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

画三角

var Symbol1 = {
                // "color": [255, 163, 138, 150],
                "type": "esriSMS",
                "style": "esriSMSPath",
                "color": [28, 251, 2, 255],
                "angle": 180,
                "size": 15,
                "path": "M5 0 L10 10 L0 10 z", //按照设置的svgpath进行绘制，三个点坐标
            };
            var Symbol2 = {
                "color": [255, 0, 0, 255], //红色
                "type": "esriSMS",
                "style": "esriSMSPath",
                "angle": 180,
                "size": 15,
                "path": "M5 0 L10 10 L0 10 z", //按照设置的svgpath进行绘制
            };

            var renderJson = {
                "type": "uniqueValue",
                "field1": "pop", //attribute中的关键字，其值用来判断uniqueValueInfos的value
                "defaultSymbol": {
                    "color": [28, 251, 2, 150],
                    "size": 22,
                    "angle": 30,
                    "outline": {
                        "color": [255, 0, 0, 150],
                        "width": 1,
                        "type": "esriSLS",
                        "style": "esriSLSSolid"
                    },
                    "type": "esriSMS",
                    "style": "esriSMSCircle",
                },
                "uniqueValueInfos": [{
                        "value": "0", //绿色
                        "symbol": Symbol1
                    },
                    {
                        "value": "1", //红色
                        "symbol": Symbol2
                    }
                ]

            };

鱼恋虾

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
ArcGis for js 自定义点和弹出层

<!DOCTYPE html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>地图</title> <style> html, body, #viewDiv
复制链接

扫一扫