ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

arcgis api 格子+热力图

2021-02-23 17:02:03  阅读:18  来源: 互联网

标签:map 格子 value arcgis api var new evt esri


在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>FeatureLayer using Weighted HeatmapRenderer</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.35/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
  <style>
    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
   #info {
        top: 120px;
        color: #444;
        height: auto;
        font-family: arial;
        left: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        width: 115px;
        z-index: 40;
        border: solid 2px #666;
        border-radius: 4px;
        background-color: #fff;
      }
    .blurInfo {
      position: absolute;
      top: 10px;
      right: 5px;
      font-size: 1.25em;
      font-family: monospace;
      color: #4C4C4C;
      width: 240px;
      background-color: #FFFFFF;
      padding: 10px;
      border: 2px solid #57585A;
      border-radius: 20px;
    }

    .blurInfo p span {
      background-color: #FFFFFF;
      padding: 0 5px;
      border-radius: 5px;
    }

    .blurInfo input[type=range] {
      width: 100%;
      display: block;
    }
    </style>
    <script src="https://js.arcgis.com/3.35/"></script>

    <script>
      var map;
      require([
        "dojo/number",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "esri/map",
        "esri/renderers/HeatmapRenderer",
		"esri/toolbars/draw",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", 
        "esri/graphic", 
        "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!",
      ], function (number, InfoTemplate, FeatureLayer, Map, HeatmapRenderer, Draw,
        SimpleMarkerSymbol, SimpleLineSymbol,
        PictureFillSymbol, CartographicLineSymbol, 
        Graphic, 
        Color, dom,on){

        map = new Map("map", {
          basemap: "gray",
          zoom: 3,
          center: [-103, 18],
          minZoom: 3,
          maxZoom: 5
        });
		 map.on("load", initToolbar);

        // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));

        // lineSymbol used for freehand polyline, polyline and line. 
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10, 
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );

        // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
        // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
        var fillSymbol = new PictureFillSymbol(
         "https://www.icode9.com/img/ll/?i=20210223163127103.png",
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,0,0,0]), 
            1
          ), 
          42, 
          42
        );

        function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }

        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 
          tb.deactivate(); 
          map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          map.graphics.add(new Graphic(evt.geometry, symbol));
        }
        // --------------------------------------------------------------------
        // Format the magnitude value in the pop up to show one decimal place.
        // Uses the dojo/number module to perform formatting.
        // --------------------------------------------------------------------
        formatMagnitude = function (value, key, data){
          return number.format(value, {places: 1, locale: "en-us"});
        };

        var infoTemplate = new InfoTemplate("Attributes",
          "Name: ${Name}<br>Magnitude: ${Magnitude:formatMagnitude}");

        var serviceURL = "//services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Earthquakes_Since_1970/FeatureServer/0";
        var heatmapFeatureLayerOptions = {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["Name", "Magnitude"],
          infoTemplate: infoTemplate
        };
        var heatmapFeatureLayer = new FeatureLayer(serviceURL, heatmapFeatureLayerOptions);

        var blurCtrl = document.getElementById("blurControl");
        var maxCtrl = document.getElementById("maxControl");
        var minCtrl = document.getElementById("minControl");
        var valCtrl = document.getElementById("valueControl");

        var heatmapRenderer = new HeatmapRenderer({
          field: "Magnitude",
          blurRadius: blurCtrl.value,
          maxPixelIntensity: maxCtrl.value,
          minPixelIntensity: minCtrl.value
        });

        heatmapFeatureLayer.setRenderer(heatmapRenderer);
        map.addLayer(heatmapFeatureLayer);

        /** Add event handlers for interactivity **/

        var sliders = document.querySelectorAll(".blurInfo p~input[type=range]");
        var addLiveValue = function (ctrl){
          var val = ctrl.previousElementSibling.querySelector("span");
          ctrl.addEventListener("input", function (evt){
            val.innerHTML = evt.target.value;
          });
        };
        for (var i = 0; i < sliders.length; i++) {
          addLiveValue(sliders.item(i));
        }

        blurCtrl.addEventListener("change", function (evt){
          var r = +evt.target.value;
          if (r !== heatmapRenderer.blurRadius) {
            heatmapRenderer.blurRadius = r;
            heatmapFeatureLayer.redraw();
          }
        });
        maxCtrl.addEventListener("change", function (evt){
          var r = +evt.target.value;
          if (r !== heatmapRenderer.maxPixelIntensity) {
            heatmapRenderer.maxPixelIntensity = r;
            heatmapFeatureLayer.redraw();
          }
        });
        minCtrl.addEventListener("change", function (evt){
          var r = +evt.target.value;
          if (r !== heatmapRenderer.minPixelIntensity) {
            heatmapRenderer.minPixelIntensity = r;
            heatmapFeatureLayer.redraw();
          }
        });
        // --------------------------------------------------------------------
        // When check / uncheck the control for the HeatmapRenderer field,
        // we will leave the blurRadius and the minPixelIntensity values the
        // same. However we will adjust the maxPixelIntensity value so it
        // spreads the colors across the range of magnitude values. For your
        // own dataset, you will need to experiment to find what looks good
        // based upon the level of geography when you display the heatmap
        // and the values in your dataset.
        // --------------------------------------------------------------------
        valCtrl.addEventListener("change", function (evt){
          var chk = evt.target.checked;
          if (!chk) {
            document.getElementById("maxValue").innerHTML = 21;
            maxCtrl.value = 21;
            heatmapRenderer.maxPixelIntensity = 21;
          }
          else {
            document.getElementById("maxValue").innerHTML = 250;
            maxCtrl.value = 250;
            heatmapRenderer.maxPixelIntensity = 250;

          }
          heatmapRenderer.field = (chk) ? "Magnitude" : null;
          heatmapFeatureLayer.redraw();
        });
      });
    </script>
</head>
<body>
 <div id="info">
      <div>Select a shape then draw on map to add graphic</div>

      <button id="Polygon">Polygon</button>
    </div>
  <div id="map"></div>
  <div class="blurInfo">
    <p>
      <label for="valueControl">Weight by magnitude</label>
      <input id="valueControl" type="checkbox" checked>
    </p>
    <p>Blur Radius : <span id="blurValue">10</span></p>
    <input id="blurControl" type="range" max=30 min=0 value=10 step=1/>

    <p>Max Value : <span id="maxValue">100</span></p>
    <input id="maxControl" type="range" max=500 min=0 value=100 step=1/>

    <p>Min Value : <span id="minValue">0</span></p>
    <input id="minControl" type="range" max=500 min=0 value=0 step=1/>
  </div>
</body>
</html>

标签:map,格子,value,arcgis,api,var,new,evt,esri
来源: https://blog.csdn.net/josiecici/article/details/113995793

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有