在前幾天拢肆，ArcGIS API for JavaScript發(fā)布了新版本，也就是4.15版本耐亏。其中有一個(gè)小功能更新徊都，我認(rèn)為還是挺有用的，可以使我們地圖的表現(xiàn)形式更加豐富广辰。這個(gè)小的功能更新就是PictureMarkerSymbol支持GIF動態(tài)圖和PNG格式的透明圖了暇矫，不過有點(diǎn)遺憾的是不支持在3D場景SceneView中使用，只能在2D MapView中使用择吊。下面我們就來試一下這個(gè)功能李根，做一個(gè)簡單的例子來看一看在地圖中加載GIF動態(tài)圖的效果。
動態(tài)圖片資源
首先几睛，我們需要一個(gè)格式GIF的動態(tài)圖片資源房轿，隨便在網(wǎng)上找一個(gè)就行，我找的是一個(gè)可愛的小烏龜所森。
創(chuàng)建地圖
const map = new Map({
basemap: 'topo-vector', // 底圖
});
const view = new MapView({
container: 'viewDiv', // 包含視圖的DOM元素
map, // 要在視圖中顯示的Map對象的實(shí)例
center: [105, 29], // 視圖的中心點(diǎn)
zoom: 6, // 表示視圖中心的詳細(xì)程度
});
創(chuàng)建點(diǎn)數(shù)據(jù)
因?yàn)?a target="_blank">PictureMarkerSymbol是用來渲染Point點(diǎn)圖形的囱持，所以我們需要?jiǎng)?chuàng)建一些點(diǎn)數(shù)據(jù)。
const points = [ // 點(diǎn)坐標(biāo)數(shù)組
[116.39, 39.92],
[104.02, 30.63],
[108.87, 34.29],
];
const graphics = points.map(point => ({
geometry: {
type: 'point',
longitude: point[0], // 經(jīng)度
latitude: point[1], // 緯度
},
}));
設(shè)置symbol
const symbol = {
type: 'picture-marker',
url: './images/gif.gif',
width: '128px',
height: '128px',
};
需要注意的是：width 和 height 屬性值不能設(shè)置超過200px焕济。
創(chuàng)建圖層以及設(shè)置圖層renderer
// 設(shè)置渲染
const renderer = {
type: 'simple',
symbol,
};
// 創(chuàng)建要素圖層
const layer = new FeatureLayer({
source: graphics,
objectIdField: 'ObjectID',
renderer,
});
// 把圖層添加到地圖中
map.add(layer);
展示效果
最后纷妆，我們就來看一下效果吧。symbol已經(jīng)動起來了晴弃！
思考1：能否在3D場景SceneView中使用
雖然文檔上已經(jīng)說了在SceneView中不支持PictureMarkerSymbol顯示GIF格式圖片掩幢，但我還是好奇決定試一下逊拍，看一看是什么效果。最終經(jīng)過實(shí)際測試粒蜈，發(fā)現(xiàn)在3D場景中其實(shí)能加載GIF圖片，能成功地顯示出來旗国，只是不能讓圖片動起來枯怖，和普通圖片一樣。如下圖所示：
思考2：該功能的實(shí)際用處有哪些
我第一想到的就是我們能通過該功能實(shí)現(xiàn)新聞聯(lián)播中天氣預(yù)報(bào)各種氣象動態(tài)效果能曾，比如下雨天度硝，如下圖所示：
以下是完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ArcGIS API中PictureMarkerSymbol使用GIF圖片</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script type="module">
require([
'esri/Map',
'esri/views/SceneView',
'esri/views/MapView',
'esri/layers/FeatureLayer',
], function (Map, SceneView, MapView, FeatureLayer) {
const map = new Map({
basemap: 'topo-vector',
});
const view = new MapView({
container: 'viewDiv',
map: map,
center: [105, 29],
zoom: 5,
});
const points = [
[116.39, 39.92],
[104.02, 30.63],
[108.87, 34.29],
];
const symbol = {
type: 'picture-marker',
url: './images/gif.gif',
width: '128px',
height: '128px',
};
const graphics = points.map((point) => ({
geometry: {
type: 'point',
longitude: point[0],
latitude: point[1],
},
}));
const renderer = {
type: 'simple',
symbol,
};
const layer = new FeatureLayer({
source: graphics,
objectIdField: 'ObjectID',
renderer,
});
map.add(layer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
