arcgis js api 3.x版本实现类似于百度量测的功能

最新推荐文章于 2020-08-25 18:48:41 发布

一醉千秋

最新推荐文章于 2020-08-25 18:48:41 发布

阅读量227

点赞数

分类专栏： WebGIS

本文链接：https://blog.csdn.net/thor027/article/details/107956340

版权

WebGIS 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

详情参考上传的资源

https://download.csdn.net/download/Thor027/12707107

HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arcgis js量测工具</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.33/esri/css/esri.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script>
var dojoConfig = {
packages: [{
name: 'custom',
location: location.pathname.replace(/\/[^/]+$/, '') + '/js'//从cdn加载自己定义的模块方法
}]
};
</script>

<script src="https://js.arcgis.com/3.33/"></script>
<script src="js/main.js"></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#measureTools {
position: absolute;
top: 50px;
left: 50px;
z-index: 1000;
}
</style>
</head>
<body>
<div id="measureTools">
<button class="measure-distance" id="m_length">距离</button>
<button class="measure-area" id="m_area">面积</button>
<button class="measure-area" id="m_clear">清空</button>
</div>

main.js文件内容

require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"custom/measureTools",
"dojo/domReady!"],
function(Map,ArcGISTiledMapServiceLayer,
deMeasureTools) {
var map = new Map("map", {
center: [111.725616, 40.844056],
zoom: 10,
autoResize:true,
sliderPosition:"bottom-right",
logo:false
});

var _tileurl = "https://services.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer";
map.addLayer(new ArcGISTiledMapServiceLayer(_tileurl));

var measureTool=new deMeasureTools({
map:map
});

$("#m_length").on("click", function(){
   measureTool.measureDistance();
});

$("#m_area").on("click", function(){
   measureTool.measureArea();
});

$("#m_clear").on("click", function(){
   measureTool.measureClear();
});