arcgis api for js 지도 기호 사용 (Draw 로 그림 그리 기)
36084 단어 WebGIS
esri/toolbars/draw 모듈 에 있 고 esri/graphic 모듈 과 점, 선, 면 스타일 과 관련 된 모듈 도 조합 해 야 합 니 다.draw 모듈 은 그림 을 그 리 는 데 사 용 됩 니 다. graphic 모듈 을 사용 해 야 하 는 이 유 는 모든 그림 이 Graphic 류 로 맵 의 graphic 그림 층 에 추가 되 기 때 문 입 니 다. 따라서 우 리 는 그 려 진 도형 을 Graphic 대상 으로 구성 해 야 합 니 다. (이 과정 에서 도형 을 그 리 는 스타일 을 설정 할 수 있 습 니 다) 지도 에 추가 할 수 있 습 니 다.순서
<html>
<head>
<meta charset="utf-8">
<title> title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
html, body, #main, #mapDiv{ /* mapDiv ， ，dijit */
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
style>
<script src="http://js.arcgis.com/3.9/">script>
<script>
var toolbar, map;
var sms, sls, sfs; // 、 、
require(["esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/toolbars/draw",
"esri/graphic",
//
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
// dojo
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"],
function(Map, TiledLayer, Draw, Graphic, MarkerSymbol, LineSymbol, FillSymbol, parser) {
parser.parse(); //
map = new Map("mapDiv");
var url = "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
var layer = new TiledLayer(url);
map.addLayer(layer);
//
map.on("load", create_toolbar);
//
activate_tool();
//
function activate_tool() {
var btns = document.getElementsByClassName('btn-info');
for(var i = 0; i < btns.length; ++ i) {
var type = btns[i].getAttribute('aria-label');
//
if(type == "clear") {
btns[i].onclick = function() {
map.graphics.clear();
}
continue;
}
//
btns[i].onclick = function() {
var tool = this.getAttribute('aria-label');
toolbar.activate(Draw[tool]);
map.hideZoomSlider();
}
}
}
//
function create_toolbar(themap) {
toolbar = new Draw(map);
// ， add_to_map
toolbar.on('draw-end', add_to_map);
}
//
function add_to_map(evt) {
toolbar.deactivate();
var symbol = null;
switch(evt.geometry.type) {
case 'multipoint':
case 'point':
symbol = new MarkerSymbol();
break;
case 'polyline':
symbol = new LineSymbol();
break;
default:
symbol = new FillSymbol();
break;
}
// Graphic
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
map.showZoomSlider(); //
}
});
script>
head>
<body class="tundra">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="top" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'" style="width: 100%; height: 40px;">
<button class="btn btn-info" type="button" aria-label="POINT"> button>
<button class="btn btn-info" type="button" aria-label="MULTI_POINT"> button>
<button class="btn btn-info" type="button" aria-label="LINE"> button>
<button class="btn btn-info" type="button" aria-label="POLYGON"> button>
<button class="btn btn-info" type="button" aria-label="RECTANGLE"> button>
<button class="btn btn-info" type="button" aria-label="CIRCLE"> button>
<button class="btn btn-info" type="button" aria-label="ELLIPSE"> button>
<button class="btn btn-info" type="button" aria-label="TRIANGLE"> button>
<button class="btn btn-info" type="button" aria-label="clear"> button>
div>
<div id="left" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 80px;">
div>
<div id="center" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
<div id="mapDiv">div>
div>
div>
body>
html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
arcgis api for js 지도 기호 사용 (Draw 로 그림 그리 기)api 에서 지도 에 도형 을 그 리 는 도 구 는 esri/toolbars/draw 모듈 에 있 고 esri/graphic 모듈 과 점, 선, 면 스타일 과 관련 된 모듈 도 조합 해 야 합 니 다.draw 모듈 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
