<!DOCTYPE html>
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<title>Flare Cluster Layer Example</title>
|
<link rel="stylesheet" type="text/css"
|
href="http://www.jxgis.cn:8080/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/dijit/themes/tundra/tundra.css" />
|
<link rel="stylesheet" type="text/css"
|
href="http://www.jxgis.cn:8080/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />
|
|
<style>
|
html, body {
|
height: 100%;
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
font-family: Arial, Calibri;
|
}
|
|
#map {
|
width: 100%;
|
height: 100%;
|
padding: 0;
|
margin: 0;
|
position: relative;
|
}
|
|
#header {
|
position: absolute;
|
z-index: 1000;
|
top: 0px;
|
left: 0px;
|
height: 15px;
|
width: 100%;
|
font-weight: bold;
|
padding: 15px 10px;
|
}
|
|
|
#header a {
|
margin-left: 20px;
|
color: #FFF;
|
}
|
|
#header, #menu {
|
position: absolute;
|
z-index: 1000;
|
background-color: rgba(0,0,0,0.7);
|
color: #FFF;
|
font-size: 0.8em;
|
}
|
|
#menu {
|
top: 45px;
|
left: 0;
|
bottom: 0;
|
width: 165px;
|
padding: 5px 10px;
|
border-top: 1px Solid #FFF;
|
transition: left ease 0.5s;
|
}
|
|
#menu > div {
|
margin-top: 10px;
|
}
|
|
#menu select {
|
height: 25px;
|
border-radius: 5px;
|
margin-right: 20px;
|
}
|
|
#menu.closed {
|
left: -190px;
|
transition: left ease 0.5s;
|
}
|
|
.menu-hamburger {
|
position: relative;
|
display: inline-block;
|
width: 1.25em;
|
height: 0.8em;
|
margin-right: 0.3em;
|
border-top: 0.2em solid #fff;
|
border-bottom: 0.2em solid #fff;
|
cursor: pointer;
|
}
|
|
.menu-hamburger:before {
|
content: "";
|
position: absolute;
|
top: 0.3em;
|
left: 0px;
|
width: 100%;
|
border-top: 0.2em solid #fff;
|
}
|
|
#close-menu {
|
cursor: pointer;
|
position: absolute;
|
right: 5px;
|
top: 0;
|
font-size: 1.5em;
|
}
|
|
.esriSimpleSliderTL {
|
top: 60px;
|
right: 20px;
|
left: initial;
|
}
|
|
</style>
|
|
|
<script>
|
var dojoConfig = {
|
parseOnLoad: false,
|
async: true,
|
tlmSiblingOfDojo: false,
|
packages: [{
|
name: "fcl",
|
location: location.pathname.replace(/\/[^/]+$/, '') + "/fcl"
|
}]
|
};
|
</script>
|
|
<script type="text/javascript"
|
src="http://www.jxgis.cn:8080/arcgis_js_v318_api/arcgis_js_api/library/3.18/3.18/init.js"></script>
|
<script src="DataManager.js"></script>
|
|
<script type="text/javascript">
|
|
var map;
|
var graphics;
|
var clusterLayer;
|
|
//set some defaults
|
var preClustered = false;
|
var displaySingleFlaresAtCount = 10;
|
var areaDisplayMode = "";
|
|
require(["esri/map", "esri/layers/graphics", "esri/graphic", "esri/dijit/PopupTemplate", "fcl/FlareClusterLayer_v3",
|
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/ClassBreaksRenderer",
|
"dojo/ready", "dojo/json", "dojo/dom", "dojo/on", "dojo/text!./data.json","esri/layers/WebTiledLayer","esri/geometry/Point",
|
"esri/SpatialReference",],
|
function (Map, GraphicsLayer, Graphic, PopupTemplate, FlareClusterLayer, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, ClassBreaksRenderer, ready, JSON, dom, on, data,WebTiledLayer,Point,
|
SpatialReference,) {
|
|
//load up the dummy data
|
var allData = JSON.parse(data);
|
DataManager.setData(allData);
|
|
ready(function () {
|
|
document.getElementById("clustering-mode").value = preClustered ? "server" : "client";
|
document.getElementById("area-mode").value = areaDisplayMode;
|
|
map = new Map("map", {
|
center: [133, -25],
|
zoom: 4,
|
minZoom: 3,
|
});
|
var cycleMap = new WebTiledLayer("https://webmap-tile.sf-express.com/MapTileService/rt?x={col}&y={row}&z={level}", {
|
"copyright": '顺丰地图',
|
"id": "sasasa"
|
});
|
map.addLayer(cycleMap);
|
|
initLayer();
|
//map.centerAndZoom(new Point(115.806669,28.68635, new SpatialReference({ wkid: 4326 })), 14);
|
|
map.on("load", function () {
|
initLayer();
|
});
|
|
//for preclustered data, clear and re-get the data on every zoom or pan
|
map.on("pan-start", function () {
|
if (preClustered) {
|
clusterLayer.clear();
|
}
|
});
|
|
map.on("pan-end", function () {
|
if (preClustered) {
|
getPreClusteredGraphics();
|
}
|
});
|
|
map.on("zoom-end", function () {
|
if (preClustered) {
|
getPreClusteredGraphics();
|
}
|
});
|
|
});
|
|
|
function initLayer() {
|
//init the layer, more options are available and explained in the cluster layer constructor
|
clusterLayer = new FlareClusterLayer({
|
id: "flare-cluster-layer",
|
spatialReference: new esri.SpatialReference({ "wkid": 4326 }),
|
subTypeFlareProperty: "facilityType",
|
singleFlareTooltipProperty: "name",
|
displaySubTypeFlares: true,
|
displaySingleFlaresAtCount: displaySingleFlaresAtCount,
|
flareShowMode: "mouse",
|
preClustered: preClustered,
|
clusterRatio: 75,
|
clusterAreaDisplay: areaDisplayMode,
|
clusteringBegin: function () {
|
console.log("clustering begin");
|
},
|
clusteringComplete: function () {
|
console.log("clustering complete");
|
}
|
});
|
|
//set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
|
var defaultSym = new SimpleMarkerSymbol().setSize(6).setColor("#FF0000").setOutline(null)
|
var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
|
var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
|
var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
|
var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
|
var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
|
renderer.addBreak(0, 19, smSymbol);
|
renderer.addBreak(20, 150, mdSymbol);
|
renderer.addBreak(151, 1000, lgSymbol);
|
renderer.addBreak(1001, Infinity, xlSymbol);
|
|
if (areaDisplayMode) {
|
//if area display mode is set. Create a renderer to display cluster areas. Use SimpleFillSymbols as the areas are polygons
|
var defaultAreaSym = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_SOLID).setColor(new dojo.Color([0, 0, 0, 0.2])).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0, 0.3]), 1));
|
var areaRenderer = new ClassBreaksRenderer(defaultAreaSym, "clusterCount");
|
var xlAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
|
var lgAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
|
var mdAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
|
var smAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
|
|
areaRenderer.addBreak(0, 19, smAreaSymbol);
|
areaRenderer.addBreak(20, 150, mdAreaSymbol);
|
areaRenderer.addBreak(151, 1000, lgAreaSymbol);
|
areaRenderer.addBreak(1001, Infinity, xlAreaSymbol);
|
|
//use the custom overload of setRenderer to include the renderer for areas.
|
clusterLayer.setRenderer(renderer, areaRenderer);
|
}
|
else {
|
clusterLayer.setRenderer(renderer); //use standard setRenderer.
|
}
|
|
|
//set up a popup template
|
var template = new PopupTemplate({
|
title: "{name}",
|
fieldInfos: [
|
{ fieldName: "facilityType", label: "Facility Type", visible: true },
|
{ fieldName: "postcode", label: "Post Code", visible: true },
|
{ fieldName: "isOpen", label: "Opening Hours", visible: true }
|
]
|
});
|
clusterLayer.infoTemplate = template;
|
map.infoWindow.titleInBody = false;
|
|
map.addLayer(clusterLayer);
|
|
//get the first set of data
|
if (preClustered) {
|
getPreClusteredGraphics();
|
}
|
else {
|
//not preclustered - just add the raw data to be clusted within the layer.
|
var data = DataManager.getData();
|
clusterLayer.addData(data);
|
console.log(map);
|
}
|
}
|
|
function clearLayer() {
|
map.removeLayer(clusterLayer);
|
clusterLayer = null;
|
}
|
|
function getPreClusteredGraphics() {
|
|
var maxSingleFlareCount = displaySingleFlaresAtCount;
|
|
var clusterRatio = 75;
|
var clusteredData = DataManager.fakeServerSideClustering(clusterRatio, maxSingleFlareCount, areaDisplayMode, map);
|
clusterLayer.addPreClusteredData(clusteredData);
|
|
}
|
|
//setup some event handlers to handler change of options
|
on(dom.byId("clustering-mode"), "change", function (evt) {
|
clearLayer();
|
preClustered = this.value === "server" ? true : false;
|
initLayer();
|
});
|
|
on(dom.byId("area-mode"), "change", function (evt) {
|
debugger
|
clearLayer();
|
areaDisplayMode = this.value;
|
initLayer();
|
});
|
|
on(dom.byId("menu-switch"), "click", function (evt) {
|
var menu = dom.byId("menu");
|
if (menu.classList.contains("closed")) {
|
menu.classList.remove("closed");
|
}
|
else {
|
menu.classList.add("closed");
|
}
|
});
|
|
on(dom.byId("close-menu"), "click", function (evt) {
|
var menu = dom.byId("menu");
|
menu.classList.add("closed");
|
});
|
|
});
|
|
|
</script>
|
|
|
</head>
|
<body>
|
|
<div id="map">
|
|
<div id="header">
|
<span id="menu-switch" class="menu-hamburger" title="Show/hide options"></span>
|
<span>Flare cluster layer - API v3.x</span>
|
<a href="index_v4.html" >Goto v4 example</a>
|
</div>
|
|
<div id="menu" >
|
<span id="close-menu" title="Hide options">×</span>
|
<div><label for="clustering-mode">Clustering mode:</label></div>
|
<div>
|
<select id="clustering-mode">
|
<option value="server">Fake server side</option>
|
<option value="client">Client side</option>
|
</select>
|
</div>
|
|
<hr />
|
<div><label for="area-mode">Display cluster area mode:</label></div>
|
<div>
|
<select id="area-mode">
|
<option value="">None</option>
|
<option value="hover">Hover</option>
|
<option value="always">Always</option>
|
</select>
|
</div>
|
</div>
|
|
</div>
|
|
</body>
|
</html>
|
