徐州网站建设公司百家号,美食制作网站模板免费下载,上海网络推广服务公司,郑州二七区最新消息文章目录 0.引言1.加载底图2.获取点要素的坐标3.添加含图片样式的几何要素4.完整实现 0.引言
ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。本文在ArcGIS For JavaScript中使用Graphic对象来创建包含图片样式的点要素。 … 文章目录 0.引言1.加载底图2.获取点要素的坐标3.添加含图片样式的几何要素4.完整实现 0.引言
ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。本文在ArcGIS For JavaScript中使用Graphic对象来创建包含图片样式的点要素。
1.加载底图
1实现代码
!DOCTYPE html
html head meta http-equivContent-Type contenttext/html; charsetutf-8 / titleCreate Map/title link relstylesheet hrefhttp://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css / script srchttp://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 typetext/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 idviewDiv/div
/body /html2实现结果
2.获取点要素的坐标
1实现代码
//点击地图获取经纬度坐标
view.on(click, evt { let mapPoint evt.mapPoint; alert(经度${mapPoint.longitude},纬度${mapPoint.latitude});
});2实现结果
以上获取的坐标作为点要素的坐标为经度106.56651354136791,纬度29.68001149992497。
3.添加含图片样式的几何要素
1实现代码
//添加含图片样式的几何要素
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完整代码
!DOCTYPE html
html head meta http-equivContent-Type contenttext/html; charsetutf-8 / titleCreate Map/title link relstylesheet hrefhttp://localhost:8099/arcgis_js_api/javascript/4.28/esri/themes/light/main.css / script srchttp://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 typetext/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 idviewDiv/div
/body /html2实现结果
参考资料 [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].
