我使用此处的技术创建了一个免费帐户，因为我需要在交通信号灯周围创建地理围栏，并检查我的任何设备是否都进入了地理围栏并触发操作。
var platform = new H.service.Platform({
'apikey': 'apikeyhere' // here i used the javascript maps api key
});
var maptypes = platform.createDefaultLayers();
var lineString = new H.geo.LineString()
lineString.pushPoint({ lat: 15.376727, lng: 73.925272 })
lineString.pushPoint({ lat: 15.376747, lng: 73.925926 })
lineString.pushPoint({ lat: 15.377875, lng: 73.926001 })
lineString.pushPoint({ lat: 15.377916, lng: 73.925357 })
lineString.pushPoint({ lat: 15.376727, lng: 73.925272 })
var map = new H.Map(
document.getElementById('map'),
maptypes.vector.normal.map,
{
zoom: 15,
center: { lng: 73.925658, lat: 15.376116 }
});
var mapEvents = new H.mapevents.MapEvents(map);
var north = new H.map.Polygon(lineString)
var northgeo = north.getGeometry()
var northWKT = northgeo.toString()
console.log(northWKT)
map.addObject(north)
var zip = new JSZip()
zip.file("data.wkt", "NAME\tWKT\n" + "NorthFence\t" + northWKT)
zip.generateAsync({ type: "blob" }).then(content => {
saveAs(content, "hello.zip");
var formdata = new FormData()
formdata.append("zipfile", content)
axios.post("https://fleet.ls.hereapi.com/2/layers/upload.json", formdata,
{
headers: {
"content-type": "multipart/form-data"
},
parms: {
"layer_id": "15537",
"apikey": "apikeyhere"//here i use the rest api key of my freemium account
}
}).then((result) => {
console.log(result)
}, (err) => {
console.log("ERROR")
console.log(err)
})
}, (err) => {
console.log(err)
})
map.addEventListener('tap', function (evt) {
console.log(evt.type, evt.currentPointer.type);
})
但我遇到错误
Error: Request failed with status code 401
at e.exports (spread.js:25)
at e.exports (spread.js:25)
at XMLHttpRequest.l.onreadystatechange (spread.js:25)
这是我尝试使用免费帐户可以实现的目标，目前尚不清楚。我正在关注的视频教程已经过时了，因为已经切换为使用API密钥而不是APP ID和API代码。要通过发布请求上传WKT zip文件，我正在使用HERE Location Services REST APIs密钥并绘制地图，正在使用HERE Maps API for JavaScript密钥
是的，您可以使用免费增值帐户创建Geofence。这是JS 3.1的代码，您可以尝试-
Index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body style="margin: 0">
<div id="map"></div>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://stuk.github.io/jszip/dist/jszip.js" type="text/javascript" charset="utf-8"></script>
<script src="heremap.js"></script>
<script>
const start = async () => {
const map = new HereMap("Your JS API KEY", document.getElementById("map"));
const lineString = new H.geo.LineString();
lineString.pushPoint({ lat: 37, lng: -121 });
lineString.pushPoint({ lat: 37.2, lng: -121.002 });
lineString.pushPoint({ lat: 37.2, lng: -121.2 });
lineString.pushPoint({ lat: 37, lng: -121 });
const polygon = new H.map.Polygon(lineString);
console.log(map.polygonToWKT(polygon));
map.draw(polygon);
const geofenceResponse = await map.uploadGeofence("1234", "Demo Layer", map.polygonToWKT(polygon));
};
start();
</script>
</body>
Heremap.js
class HereMap {
constructor(apikey, mapElement) {
//this.appId = appId;
//this.appCode = appCode;
this.apikey = apikey;
this.platform = new H.service.Platform({
'apikey': 'Your JS API Key'
});
this.map = new H.Map(
mapElement,
this.platform.createDefaultLayers().vector.normal.map,
{
zoom: 10,
center: { lat: 37, lng: -121 }
}
);
const mapEvent = new H.mapevents.MapEvents(this.map);
const behavior = new H.mapevents.Behavior(mapEvent);
this.geofencing = this.platform.getGeofencingService();
this.currentPosition = new H.map.Marker({ lat: 37.21, lng: -121.21 });
this.map.addObject(this.currentPosition);
this.map.addEventListener("tap", (ev) => {
var target = ev.target;
this.map.removeObject(this.currentPosition);
this.currentPosition = new H.map.Marker(this.map.screenToGeo(ev.currentPointer.viewportX, ev.currentPointer.viewportY));
this.map.addObject(this.currentPosition);
this.fenceRequest(["1234"], this.currentPosition.getGeometry()).then(result =>
{
if(result.geometries.length > 0) {
alert("You are in Geofence area")
} else {
console.log("you are out");
}
});
}, false);
}
draw(mapObject) {
this.map.addObject(mapObject);
}
polygonToWKT(polygon) {
const geometry = polygon.getGeometry();
return geometry.toString();
}
uploadGeofence(layerId, name, geometry) {
const zip = new JSZip();
zip.file("data.wkt", "NAME\tWKT\n" + name + "\t" + geometry);
return zip.generateAsync({ type:"blob" }).then(content => {
var formData = new FormData();
formData.append("zipfile", content);
return axios.post("https://fleet.ls.hereapi.com/2/layers/upload.json", formData, {
headers: {
"content-type": "multipart/form-data"
},
params: {
"apikey": 'Your JS API Key',
"layer_id": layerId
}
});
});
}
fenceRequest(layerIds, position) {
return new Promise((resolve, reject) => {
this.geofencing.request(
H.service.extension.geofencing.Service.EntryPoint.SEARCH_PROXIMITY,
{
"apikey": 'Your JS API KEY',
'layer_ids': layerIds,
'proximity': position.lat + "," + position.lng,
'key_attributes': ['NAME']
},
result => {
resolve(result);
}, error => {
reject(error);
}
);
});
}
}
希望这会有所帮助！