arcgis for js 4.X 添加底图、图层标注、工具(点,面,线等)

这是一个使用ArcGIS for JavaScript API 4.8实现的地图应用示例,展示了如何添加OpenStreetMap底图,并添加图层标注。用户可以进行点、线、面、圆和矩形的绘制操作。示例中,通过监听鼠标事件,动态创建和更新图形,同时提供了图形的高亮和缓冲区分析功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>缓冲区分析划线画图。。。</title>
    <link type="text/css" rel="stylesheet" href="http://localhost:65022/arcgis_js_api/library/4.8/4.8/esri/css/main.css" />
    <script src="http://localhost:65022/arcgis_js_api/library/4.8/4.8/init.js"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="viewDiv">
        <div id="line-button" class="esri-widget esri-widget--button esri-interactive" title="画线">
            <span class="esri-icon-polyline"></span>
        </div>
        <div id="area-button" class="esri-widget esri-widget--button esri-interactive" title="画面">
            <span class="esri-icon-polygon"></span>
        </div>
        <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="画点">
            <span class="esri-icon-radio-checked"></span>
        </div>
        <div id="circle-button" class="esri-widget esri-widget--button esri-interactive" title="画圆">
            <span class="esri-icon-radio-unchecked"></span>
        </div>
        <div id="rectangle-button" class="esri-widget esri-widget--button esri-interactive" title="画矩形">
            <span class="esri-icon-checkbox-unchecked"></span>
        </div>
    </div>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/views/2d/draw/Draw",
            "esri/Graphic",
            "esri/geometry/Polyline",
            "esri/geometry/Polygon",
            "esri/geometry/Point",
            "esri/geometry/Circle",
            "esri/geometry/geometryEngine",
            "dojo/domReady!"
        ], function (
            Map, MapView,
            Draw, Graphic,
            Polyline, Polygon, Point, Circle, geometryEngine
        ) {
                var map = new Map({
                    basemap: "osm"
                });

                //二维视图
                var view = new MapView({
                    map: map,
                    container: "viewDiv",
                    logo: false,
                    center: [98.01, 33.80],
                    zoom: 4,

            });

            //添加图层标注
                let image = {
                    type: 'picture-marker',
                    url: 'http://localhost:65022/images/电子地图图标/炼化(故障).png',
                    width: '32px',
                    height: '32px',
                };
                //设置点的位置
                let position = {
                    type: 'point',
                    longitude: 98.01,
                    latitude: 33.80,
                };
                //将点的样式和位置放在Graphic里面
                let Graphic1 = new Graphic({
                    geometry: position,
                    symbol: image,
                });
                //显示图标
            view.graphics.add(Graphic1);


            //添加工具(点面线等)
                var highlight;
            view.on("click", function (event) {
                if (highlight) {
                        highlight.remove();
                    }
                view.hitTest(event).then(function (response) {
                    if (response.results[0]) {
                        var graphic = response.results[0].graphic;
                        console.log(graphic);
                            view.whenLayerView(graphic.layer).then(function (lyrView) {
                                highlight = lyrView.highlight(graphic);
                            })
                        }
                    })
                });

                view.ui.add("line-button", "top-left");//添加绘制线按钮,自定义UI
             

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值