ArcgisForJS如何实现添加含图片样式的点要素?

文章目录

0.引言

ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。本文在ArcGIS For JavaScript中使用Graphic对象来创建包含图片样式的点要素。

1.加载底图

(1)实现代码

csharp 复制代码
<!DOCTYPE html>
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Create Map</title>  
    <link rel="stylesheet" href="http://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css" />  
    <script src="http://localhost:8099/arcgis_js_api/javascript/4.28/init.js"></script>  
    <style>  
        html,  
        body,  
        #viewDiv {  
            padding: 0;  
            margin: 0;  
            height: 100%;  
            width: 100%;  
        }  
    </style>  
  
    <script type="text/javascript">  
        require(["esri/Map",  
            "esri/Basemap",  
            "esri/layers/TileLayer",  
            "esri/views/MapView",  
            "esri/layers/GraphicsLayer",  
            "esri/Graphic"  
        ], (  
            Map,  
            Basemap,  
            TileLayer,  
            MapView,  
            GraphicsLayer,  
            Graphic  
        )=>{  
            //添加底图  
            var lyTile = new TileLayer({  
                url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"  
            });  
            var baseMap = new Basemap({  
                baseLayers: [lyTile]  
            });  
            var map = new Map({  
                basemap: baseMap  
            });  
            var view = new MapView({  
                container: "viewDiv",  
                map: map,  
                zoom: 16,  
                center: [106.56657791438427, 29.679927608558902]  
            });  
        });  
    </script>  
</head>  
  
<body>  
    <div id="viewDiv"></div>  
</body>  
  
</html>

(2)实现结果

2.获取点要素的坐标

(1)实现代码

csharp 复制代码
//点击地图获取经纬度坐标
view.on("click", evt => {  
    let mapPoint = evt.mapPoint;  
    alert(`经度:${mapPoint.longitude},纬度${mapPoint.latitude}`);  
});

(2)实现结果

以上获取的坐标作为点要素的坐标,为(经度:106.56651354136791,纬度29.68001149992497)。

3.添加含图片样式的几何要素

(1)实现代码

csharp 复制代码
//添加含图片样式的几何要素
var graphic = new Graphic({  
    geometry: point,  
    symbol: symbol  
});  
var graphicsLayer = new GraphicsLayer();  
graphicsLayer.visible = true;  
var point = {  
    type: "point",  
    x: 106.56657791438427,  
    y: 29.679927608558902,  
    SpatialReference: 3857  
};  
var symbol = {  
    type: "picture-marker",  
    url:"http://img14.360buyimg.com/n1/jfs/t2149/268/1108858690/251183/f7d770d0/5678c41eN59e3de7f.jpg",//访问小车图片  
    width: "50px",  
    height: "50px",  
    outline: {  
        style: "solid"  
    },  
};  
var attributes = { name: '小车', content: '真是一辆漂亮的小车' };  
var popupTemplate1 = {  
    title: "标题:" + attributes.name,  
    content: "内容:" + attributes.content  
};  
var graphic = new Graphic({  
    geometry: point,  
    symbol: symbol,  
    popupTemplate: popupTemplate1,  
});  
graphicsLayer.graphics.add(graphic);  
map.add(graphicsLayer);

(2)实现结果

4.完整实现

(1)完整代码

csharp 复制代码
<!DOCTYPE html>
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Create Map</title>  
    <link rel="stylesheet" href="http://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css" />  
    <script src="http://localhost:8099/arcgis_js_api/javascript/4.28/init.js"></script>  
    <style>  
        html,  
        body,  
        #viewDiv {  
            padding: 0;  
            margin: 0;  
            height: 100%;  
            width: 100%;  
        }  
    </style>  
  
    <script type="text/javascript">  
        require(["esri/Map",  
            "esri/Basemap",  
            "esri/layers/TileLayer",  
            "esri/views/MapView",  
            "esri/layers/GraphicsLayer",  
            "esri/Graphic"  
        ], (  
            Map,  
            Basemap,  
            TileLayer,  
            MapView,  
            GraphicsLayer,  
            Graphic  
        )=>{  
            //添加底图  
            var lyTile = new TileLayer({  
                url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"  
            });  
  
            var graphic = new Graphic({  
                geometry: point,  
                symbol: symbol  
            });  
  
            //创建一个图层  
            var graphicsLayer = new GraphicsLayer();  
            //设置可见  
            graphicsLayer.visible = true;  
            //创建一个面  
            var point = {  
                type: "point",  
                x: 106.56657791438427,  
                y: 29.679927608558902,  
                SpatialReference: 3857  
            };  
            var symbol = {  
                type: "picture-marker",  
                url:"http://img14.360buyimg.com/n1/jfs/t2149/268/1108858690/251183/f7d770d0/5678c41eN59e3de7f.jpg",//访问小车图片  
                width: "50px",  
                height: "50px",  
                outline: {  
                    style: "solid"  
                },  
            };  
            var attributes = { name: '小车', content: '真是一辆漂亮的小车' };  
            var popupTemplate1 = {  
                title: "标题:" + attributes.name,  
                content: "内容:" + attributes.content  
            };  
            var graphic = new Graphic({  
                geometry: point,  
                symbol: symbol,  
                popupTemplate: popupTemplate1,  
            });  
            graphicsLayer.graphics.add(graphic);  
  
            var baseMap = new Basemap({  
                baseLayers: [lyTile]  
            });  
            var map = new Map({  
                basemap: baseMap  
            });  
            map.add(graphicsLayer)  
            var view = new MapView({  
                container: "viewDiv", // Reference to the DOM node that will contain the view  
                map: map, // References the map object created in step 3  
                zoom: 16,  
                center: [106.56657791438427, 29.679927608558902]  
            });  
  
            //点击地图获取经纬度坐标  
            //view.on("click", evt => {  
            //    let mapPoint = evt.mapPoint;  
            //    alert(`经度:${mapPoint.longitude},纬度${mapPoint.latitude}`);  
            //});  
        });  
    </script>  
</head>  
  
<body>  
    <div id="viewDiv"></div>  
</body>  
  
</html>

(2)实现结果

参考资料:

[1] 一入GIS深似海. 不一样的前端,JavaScript之arcgis api教程; 2020-11-02 [accessed 2024-02-22].

[2] 半个GIS半个前端. arcgis api(三)arcgis api for js 4.x 加载高德地图、谷歌地图、天地图; 2018-08-17 [accessed 2024-02-22].

[3] 前端三脚猫. js中的变量声明(var、let、const的区别和解析); 2021-03-08 [accessed 2024-02-22].

相关推荐
Vicky&James8 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_7482336412 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟20 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386321 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596022 分钟前
前端代理,解决跨域问题讲解
前端
quitv27 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238135 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星37 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端