在Bing地图上使用一组Lat Long Create TURF

Question

I have area wise set of Latitude and Longitude and want to create TURF territory on Bing Map like showing on below image. I don't know what are ways to create/draw TURF on map. I am not sure about any feature or function which is available in Bing MAP SDK to create TURF with event and cetroid pushpin.

I tried polygon function but didn't help to create TURF.

https://www.bing.com/api/maps/sdk/mapcontrol/isdk/wktwritetowkt#TS

    var myGeoJson = {
        "type": "Polygon",
        "coordinates": [[
                [-122.12901, 47.64178],
                [-122.12901, 47.64226],
                [-122.12771, 47.64226],
                [-122.12771, 47.64178],
                [-122.12901, 47.64178]
        ]]
    };
    //Load the GeoJson Module.
    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
        //Parse the GeoJson object into a Bing Maps shape.
        var shape = Microsoft.Maps.GeoJson.read(myGeoJson, {
            polygonOptions: {
                fillColor: 'rgba(255,0,0,0.5)',
                strokeColor: 'white',
                strokeThickness: 5
            }
        });
        //Add the shape to the map.
        map.entities.push(shape);
    });

I want to achieve something like shown in attached image.

UPDATE : SDK code added.

https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/geojsonreadobject#TS

    import { ViewContainerRef, Component, ElementRef, OnInit, ViewChild, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { MapService } from '../../services/map.service';
import { CookieService } from 'ngx-cookie';
import { Config } from '../../config/config';
import { NguiAutoCompleteModule } from '@ngui/auto-complete/dist';
import * as io from 'socket.io-client';
import { CommonUtils } from './../../shared/CommonUtils';
import { fail, throws } from 'assert';
import { Toast, ToastsManager } from 'ng2-toastr/ng2-toastr';
import { OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
import { DeviceDetectorService } from 'ngx-device-detector';

declare const Microsoft: any;
declare const Bing;
declare const GeoJson: any;
declare var jQuery: any;
declare var $: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, OnDestroy {
  connection;
  map: any;
  infobox: any;
  dataLayer: any;
  heatGradientData: any;

  @ViewChild('mapElement') someInput: ElementRef;
  myMap = document.querySelector('#myMap');
  socket: any = null;
  socketURL: string;

  constructor(private mapService: MapService,
    private router: Router, private config: Config,
    private utils: CommonUtils,
    private cookieService: CookieService,
    public toastr: ToastsManager, vRef: ViewContainerRef,
    private deviceService: DeviceDetectorService,
    private zone: NgZone) {
    this.toastr.setRootViewContainerRef(vRef);
  }

  ngOnInit() {

    if (document.readyState != 'complete') {
      document.onreadystatechange = () => {
        if (document.readyState === 'complete') {
          this.loadMapView(this.config.getConstants('mapTypeRoad'));
          this.ReadGeoJson();
        } else {
          this.ngOnInit();
        }
      }
    } else {
      if (document.readyState === 'complete') {
        this.loadMapView(this.config.getConstants('mapTypeRoad'));
        this.ReadGeoJson();
      }
    }

  }

  loadMapView(type: String) {

    var location = new Microsoft.Maps.Location(53.32, -110.29);

    this.map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
      credentials: this.config.get('BingMapKey'),
      center: location,
      mapTypeId: type == this.config.getConstants('mapTypeSatellite') ? Microsoft.Maps.MapTypeId.aerial : Microsoft.Maps.MapTypeId.road,
      zoom: 5,
      liteMode: true,
      enableClickableLogo: false,
      showLogo: false,
      showTermsLink: false,
      showMapTypeSelector: false,
      showTrafficButton: true,
      enableSearchLogo: false,
      showCopyright: false
    });

    //Load the Animation Module
    Microsoft.Maps.loadModule('AnimationModule', function () {
    });

    //Store some metadata with the pushpin
    this.infobox = new Microsoft.Maps.Infobox(this.map.getCenter(), {
      visible: false
    });

    this.infobox.setMap(this.map);

    // Load the Spatial Math module.
    Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () { });

    //Create a layer to add the GeoJSON data to.
    this.dataLayer = new Microsoft.Maps.Layer();
    this.map.layers.insert(this.dataLayer);

  }

  ReadGeoJson() {
    Microsoft.Maps.loadModule('Microsoft.Maps.GeoJson', function () {
      var featureCollection = Microsoft.Maps.GeoJson.read(this.getSouthAfricaGeoJson(), { polygonOptions: { fillColor: 'rgba(0, 255, 255, 0.3)' } });
      for (var i = 0; i < featureCollection.length; i++) {
        this.map.entities.push(featureCollection[i]);
      }
    });
  }

  getSouthAfricaGeoJson() {
    return { 'type': 'FeatureCollection', 'features': [{ 'type': 'Feature', 'id': 'ZAF', 'properties': { 'name': 'South Africa' }, 'geometry': { 'type': 'Polygon', 'coordinates': [[[31.521001, -29.257387], [31.325561, -29.401978], [30.901763, -29.909957], [30.622813, -30.423776], [30.055716, -31.140269], [28.925553, -32.172041], [28.219756, -32.771953], [27.464608, -33.226964], [26.419452, -33.61495], [25.909664, -33.66704], [25.780628, -33.944646], [25.172862, -33.796851], [24.677853, -33.987176], [23.594043, -33.794474], [22.988189, -33.916431], [22.574157, -33.864083], [21.542799, -34.258839], [20.689053, -34.417175], [20.071261, -34.795137], [19.616405, -34.819166], [19.193278, -34.462599], [18.855315, -34.444306], [18.424643, -33.997873], [18.377411, -34.136521], [18.244499, -33.867752], [18.25008, -33.281431], [17.92519, -32.611291], [18.24791, -32.429131], [18.221762, -31.661633], [17.566918, -30.725721], [17.064416, -29.878641], [17.062918, -29.875954], [16.344977, -28.576705], [16.824017, -28.082162], [17.218929, -28.355943], [17.387497, -28.783514], [17.836152, -28.856378], [18.464899, -29.045462], [19.002127, -28.972443], [19.894734, -28.461105], [19.895768, -24.76779], [20.165726, -24.917962], [20.758609, -25.868136], [20.66647, -26.477453], [20.889609, -26.828543], [21.605896, -26.726534], [22.105969, -26.280256], [22.579532, -25.979448], [22.824271, -25.500459], [23.312097, -25.26869], [23.73357, -25.390129], [24.211267, -25.670216], [25.025171, -25.71967], [25.664666, -25.486816], [25.765849, -25.174845], [25.941652, -24.696373], [26.485753, -24.616327], [26.786407, -24.240691], [27.11941, -23.574323], [28.017236, -22.827754], [29.432188, -22.091313], [29.839037, -22.102216], [30.322883, -22.271612], [30.659865, -22.151567], [31.191409, -22.25151], [31.670398, -23.658969], [31.930589, -24.369417], [31.752408, -25.484284], [31.837778, -25.843332], [31.333158, -25.660191], [31.04408, -25.731452], [30.949667, -26.022649], [30.676609, -26.398078], [30.685962, -26.743845], [31.282773, -27.285879], [31.86806, -27.177927], [32.071665, -26.73382], [32.83012, -26.742192], [32.580265, -27.470158], [32.462133, -28.301011], [32.203389, -28.752405], [31.521001, -29.257387]], [[28.978263, -28.955597], [28.5417, -28.647502], [28.074338, -28.851469], [27.532511, -29.242711], [26.999262, -29.875954], [27.749397, -30.645106], [28.107205, -30.545732], [28.291069, -30.226217], [28.8484, -30.070051], [29.018415, -29.743766], [29.325166, -29.257387], [28.978263, -28.955597]]] } }] };
  }


  stringifyJson(data) {
    return JSON.stringify(data);
  }

  parseToJson(data) {
    return JSON.parse(data);
  }

  stringifyBodyJson(data) {
    return JSON.parse(data['_body']);
  }

  ngOnDestroy() {
    if (this.connection !== undefined) {
      this.connection.unsubscribe();
    }
  }

}

Answer 1

There is a lot of different ways in which you can render data on top of the map. GeoJSON is the primary data format used, but it doesn't have to be a file, it can be a locally create GeoJSON object as well. Here are a bunch of examples of rendering data in Azure Maps: https://azuremapscodesamples.azurewebsites.net/

Update : Sorry for the confusion. I'm on the Azure Maps team at Microsoft and forgot you were asking about Bing Maps. For Bing Maps, you can use GeoJSON, or KML/GeoRSS/GPX, or create shapes locally using JavaScript. You can find some code samples on Bing Maps here: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk

All that said, I highly recommend you take a look at Azure Maps as it is Microsoft's latest enterprise mapping platform.