HERE 地图摩洛哥和西撒哈拉
HERE Maps Morocco and Western Sahara
如你所知,摩洛哥 disputes the territory of Western Sahara。
我们正在为摩洛哥使用地缘政治视图 (political_view
),它成功地移除了边界,但是它没有从视图中移除标签“西撒哈拉”。
mapStyle.setProperty('global.political_view','ma');
我们是否需要设置一些额外的 属性,或者这是对摩洛哥政治观点的改变?
是的,使用 geo-political 视图成功删除了边框,但没有删除标签。
修改样式“transform.political_view”的程序代码即可实现。
- 在 skeleton.yaml 文件中(路径:“sources.omv.transform.political_view”)- 也许您需要地图样式编辑器:https://enterprise.here.com/map-style-editor/
直接下载(已经为您修改):https://github.com/alexisad/alexisad.github.io/blob/master/vector-styles/removeSomeLabel/skeleton.yaml
- 在运行时,代码:
/**
* The function add the "change" event listener to the map's style
* and modifies colors of the map features within that listener.
* @param {H.Map} map A HERE Map instance within the application
*/
function interleave(map){
var provider = map.getBaseLayer().getProvider();
// get the style object for the base layer
var style = provider.getStyle();
var changeListener = () => {
if (style.getState() === H.map.render.webgl.Style.State.READY) {
style.removeEventListener('change', changeListener);
const filterWestSahara = `function(data, extraData) {
if (extraData && extraData.political_view && extraData.political_view == "ma" && data.places) {
const pview = extraData.political_view;
const features = data.places.features;
let featureIdx = features.length;
while (featureIdx--) {
let properties = features[featureIdx].properties;
if (properties['name:en'] && properties['name:en'].toUpperCase() == "WESTERN SAHARA") {
properties.kind = 'country:' + pview;
}
}
}
if (extraData && extraData.political_view && data.boundaries) {
const pview = extraData.political_view;
const features = data.boundaries.features;
let featureIdx = features.length;
while (featureIdx--) {
let properties = features[featureIdx].properties;
if (properties['kind:'+pview]) {
properties.kind = properties['kind:'+pview];
}
}
}
return data;
}
`;
style.setProperty("sources.omv.transform.political_view", filterWestSahara, true);
style.setProperty('global.political_view','ma');
}
}
style.addEventListener('change', changeListener);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map, {
center: {lat: 52.51477270923461, lng: 13.39846691425174},
zoom: 10,
pixelRatio: window.devicePixelRatio || 1
});
//map.getViewModel().setLookAtData({tilt: 45});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Now use the map as required...
interleave(map);
JSFiddle:https://jsfiddle.net/hnromqaL/1/
如你所知,摩洛哥 disputes the territory of Western Sahara。
我们正在为摩洛哥使用地缘政治视图 (political_view
),它成功地移除了边界,但是它没有从视图中移除标签“西撒哈拉”。
mapStyle.setProperty('global.political_view','ma');
我们是否需要设置一些额外的 属性,或者这是对摩洛哥政治观点的改变?
是的,使用 geo-political 视图成功删除了边框,但没有删除标签。
修改样式“transform.political_view”的程序代码即可实现。
- 在 skeleton.yaml 文件中(路径:“sources.omv.transform.political_view”)- 也许您需要地图样式编辑器:https://enterprise.here.com/map-style-editor/
直接下载(已经为您修改):https://github.com/alexisad/alexisad.github.io/blob/master/vector-styles/removeSomeLabel/skeleton.yaml
- 在运行时,代码:
/**
* The function add the "change" event listener to the map's style
* and modifies colors of the map features within that listener.
* @param {H.Map} map A HERE Map instance within the application
*/
function interleave(map){
var provider = map.getBaseLayer().getProvider();
// get the style object for the base layer
var style = provider.getStyle();
var changeListener = () => {
if (style.getState() === H.map.render.webgl.Style.State.READY) {
style.removeEventListener('change', changeListener);
const filterWestSahara = `function(data, extraData) {
if (extraData && extraData.political_view && extraData.political_view == "ma" && data.places) {
const pview = extraData.political_view;
const features = data.places.features;
let featureIdx = features.length;
while (featureIdx--) {
let properties = features[featureIdx].properties;
if (properties['name:en'] && properties['name:en'].toUpperCase() == "WESTERN SAHARA") {
properties.kind = 'country:' + pview;
}
}
}
if (extraData && extraData.political_view && data.boundaries) {
const pview = extraData.political_view;
const features = data.boundaries.features;
let featureIdx = features.length;
while (featureIdx--) {
let properties = features[featureIdx].properties;
if (properties['kind:'+pview]) {
properties.kind = properties['kind:'+pview];
}
}
}
return data;
}
`;
style.setProperty("sources.omv.transform.political_view", filterWestSahara, true);
style.setProperty('global.political_view','ma');
}
}
style.addEventListener('change', changeListener);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
apikey: window.apikey
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map, {
center: {lat: 52.51477270923461, lng: 13.39846691425174},
zoom: 10,
pixelRatio: window.devicePixelRatio || 1
});
//map.getViewModel().setLookAtData({tilt: 45});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Now use the map as required...
interleave(map);
JSFiddle:https://jsfiddle.net/hnromqaL/1/