<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>test</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
<script src="https://js.arcgis.com/4.14/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Point",
"esri/symbols/TextSymbol",
"esri/renderers/support/jsonUtils",
"esri/layers/support/LabelClass",
"esri/renderers/ClassBreaksRenderer",
"esri/widgets/Legend",
"dojo/domReady!"
], function (Map, MapView,SceneView, GraphicsLayer, FeatureLayer, Graphic, Point, TextSymbol, rendererJsonUtils, LabelClass, ClassBreaksRenderer,Legend) {
var map = new Map({
basemap: "osm"
});
var view = new SceneView({
container: "viewDiv",
map: map,
zoom: 5,
center: [110, 30]
});
var point = [
{
"geometry": { "x": 117.183333333333, "y": 39.15, "spatialReference": { "wkid": 4326 } },
"attributes": {"OBJECTID":1,"PRESSURE":1007,"TIME":"18:00:00","WINDSPEED":25}
}, {
"geometry": { "x": 106.533333333333, "y": 29.5333333333333, "spatialReference": { "wkid": 4326 } },
"attributes": {"OBJECTID":2,"PRESSURE":1005,"TIME":"00:00:00","WINDSPEED":30}
}, {
"geometry": { "x": 126.683333333333, "y": 45.75, "spatialReference": { "wkid": 4326 } },
"attributes": {"OBJECTID":3,"PRESSURE":1004,"TIME":"06:00:00","WINDSPEED":35}
}, {
"geometry": { "x": 125.316666666667, "y": 43.8666666666667, "spatialReference": { "wkid": 4326 } },
"attributes": {"OBJECTID":4,"PRESSURE":1003,"TIME":"12:00:00","WINDSPEED":35}
}, {
"geometry": { "x": 123.4, "y": 41.8333333333333, "spatialReference": { "wkid": 4326 } },
"attributes": {"OBJECTID":5,"PRESSURE":1002,"TIME":"18:00:00","WINDSPEED":40}
}, {
"geometry": { "x": 111.8, "y": 40.8166666666667, "spatialReference": { "wkid": 4326 } },
"attributes": {"OBJECTID":6,"PRESSURE":101,"TIME":"00:00:00","WINDSPEED":40}
}
];
var gras = [];
for (var i = 0; i < point.length; i++) {
gras.push(new Graphic({
geometry: new Point({
longitude: point[i].geometry.x,
latitude: point[i].geometry.y
}),
attributes: point[i].attributes
}))
}
const renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [
{
type: "object", // autocasts as new ObjectSymbol3DLayer()
resource: {
primitive: "cone"
},
width: 50000 // width of the symbol in meters
}
]
},
label: "hurricane location",
visualVariables: [
{
type: "color",
field: "PRESSURE",
stops: [
{
value: 950,
color: "red"
},
{
value: 1020,
color: "blue"
}
]
},
{
type: "size",
field: "WINDSPEED",
stops: [
{
value: 20,
size: 600000
},
{
value: 150,
size: 5000000
}
],
axis: "height"
},
{
type: "size",
axis: "width-and-depth",
useSymbolValue: true // uses the width value defined in the symbol layer (50,000)
}
]
};
const fields = [
{"name":"OBJECTID","type":"oid","alias":"OBJECTID"},
{"name":"PRESSURE","type":"double","alias":"PRESSURE"},
{"name":"TIME","type":"string","alias":"TIME","length":9},
{"name":"WINDSPEED","type":"double","alias":"WINDSPEED"}
]
var layer = new FeatureLayer({
source: gras,
renderer: renderer,
displayFieldName: "TIME",
geometryType: "point",
fields: fields,
objectIdField: "ObjectID"
});
map.add(layer);
const legend = new Legend({
view: view
});
view.ui.add(legend, "bottom-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>效果图：
???????
?
