用户投稿本文说明如何在执行期间变更地图样式。
主要步骤为取得 BaseLayer，修订样式并且合併回 BaseLayer。
JavaScript
function changeFeatureStyle(map){ // 取得基础图层 BaseLayer var provider = map.getBaseLayer().getProvider(); // 从 BaseLayer 取得样式 var parkStyle = provider.getStyle(); var changeListener = (evt) => { if (parkStyle.getState() === H.map.Style.State.READY) { parkStyle.removeEventListener('change', changeListener); // 查询与配置地图样式 var parkConfig = parkStyle.extractConfig(['landuse.park', 'landuse.builtup']); // 变更颜色 parkConfig.layers.landuse.park.draw.polygons.color = '#2ba815' parkConfig.layers.landuse.builtup.draw.polygons.color = '#676d67' // 将配置合併回 BaseLayer parkStyle.mergeConfig(parkConfig); } }; parkStyle.addEventListener('change', changeListener);}/** * map 初始化相关代码: */// Step 1: 初始化 platformvar platform = new H.service.Platform({ apikey: window.apikey});var defaultLayers = platform.createDefaultLayers();//Step 2: 初始化 mapvar map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, { center: {lat:25.03746, lng:121.564558}, zoom: 13, pixelRatio: window.devicePixelRatio || 1});// 加入 resize listenerwindow.addEventListener('resize', () => map.getViewPort().resize());//Step 3: 建立地图互动性var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));// 建立预设 UI 元件var ui = H.ui.UI.createDefault(map, defaultLayers);changeFeatureStyle(map);HTML
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>在执行期间变更地图样式</title> <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" /> <link rel="stylesheet" type="text/css" href="demo.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="../template.css" /> <script type="text/javascript" src='../test-credentials.js'></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script> <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script> </head> <body id="markers-on-the-map"> <div id="map"></div> <script type="text/javascript" src='demo.js'></script> </body></html>CSS
#map { width: 95%; height: 450px; background: grey;}#panel { width: 100%; height: 400px;}执行结果
参考资料
Change map style at runtime
微信扫一扫打赏
支付宝扫一扫打赏
