• cesium 掉arcgis 服务


    var apikey = '584b2fa686f14ba283874318b3b8d6b0';

    var basemapURL = "https://api.hkmapservice.gov.hk/osm/xyz/worldimagery/WGS84";
    var mapEngLBUrl = "https://api.hkmapservice.gov.hk/osm/xyz/label-tc/WGS84";

    var groundURL = "https://api.hkmapservice.gov.hk/czm/qtmesh/hkterrain/WGS84";
    var infra3Durl = "https://api.hkmapservice.gov.hk/czm/3dtiles/3dsd/infrastructure/WGS84"
    var building3Durl = "https://api.hkmapservice.gov.hk/czm/3dtiles/3dsd/building/WGS84"

    XMLHttpRequest.prototype.openRaw = XMLHttpRequest.prototype.open
    XMLHttpRequest.prototype.open = function(method, url, asyn, usr, pwd) {
    if (url.indexOf("api.hkmapservice.gov.hk") >= 0) {
    if (url.indexOf("?") >= 0) url += "&key=" + apikey
    else url += "?key=" + apikey
    }
    this.openRaw(method, url, asyn, usr, pwd)
    }
    Cesium.Ion.defaultServer = '.';
    var projection = new Cesium.WebMercatorProjection()
    var terrainProvider = new Cesium.CesiumTerrainProvider({
    url: groundURL
    })
    viewer = new Cesium.Viewer('cesiumContainer', {
    homeButton: false,
    infoBox: true,
    fullscreenButton: false,
    geocoder: false,
    scene3DOnly: true,
    useBrowserRecommendedResolution: false,
    skyAtmosphere: false,
    terrainProvider: terrainProvider,
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url: basemapURL + "/tile/{z}/{x}/{y}.png",
    credit: '© Map from Lands Department',
    }),
    mapProjection: projection
    });
    var ellipsoid = projection.ellipsoid;

    viewer.scene.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
    url: mapEngLBUrl + "/tile/{z}/{x}/{y}.png"
    }))
    var scene = viewer.scene;
    var canvas = viewer.canvas;
    viewer.camera.setView({
    destination: {
    x: -2417742.892275954,
    y: 5386763.154599442,
    z: 2404437.2155371616
    },
    orientation: new Cesium.HeadingPitchRange(6.2534630430870095, -0.7570639856841268, 0)
    });
    var building = new Cesium.Cesium3DTileset({
    url: building3Durl + "/tileset.json",
    });
    var infra = new Cesium.Cesium3DTileset({
    url: infra3Durl + "/tileset.json",
    });
    scene.primitives.add(building);
    scene.primitives.add(infra);

    var clickId = null;
    var clickeFeature = null
    viewer.selectedEntityChanged.addEventListener(function(entity) {
    if (!entity) clickId = null;
    });
    viewer.screenSpaceEventHandler.setInputAction(function(event) {
    if (clickeFeature && clickeFeature.content.batchTable) {
    clickeFeature.color = new Cesium.Color(1, 1, 1, 1)
    clickeFeature = null;
    }
    var feature = clickeFeature = scene.pick(event.position)
    var featurePos = scene.pickPosition(event.position)
    if (feature instanceof Cesium.Cesium3DTileFeature) {
    if (feature.content.batchTable)
    feature.color = Cesium.Color.YELLOW
    clickId = feature.getProperty("name")
    console.log(clickId)
    Cesium.Resource.fetchJson({
    url: "https://api.hkmapservice.gov.hk/ags/map/layer/ib1000/buildings/building/query",
    queryParameters: {
    'f': 'json',
    'outFields': 'englishbuildingname,chinesebuildingname,buildingcsuid',
    'spatialRel': 'esriSpatialRelIntersects',
    'where': "buildingcsuid like '%" + clickId.substr(1, 10) + "%'",
    'returnGeometry': 'false',
    }
    }).then(function(jsonData) {
    if (jsonData.features.length > 0) {
    var engname = jsonData.features[0].attributes['englishbuildingname']
    var chiname = jsonData.features[0].attributes['chinesebuildingname']
    var csuid = jsonData.features[0].attributes['buildingcsuid']
    var entity = new Cesium.Entity({
    name: 'Information',
    })
    entity.description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
    '<tr><th>' + "English Building Name" + '</th><td>' + (!engname ? "N/A" : engname) + '</td></tr>' +
    '<tr><th>' + "Chinese Building Name" + '</th><td>' + (!chiname ? "N/A" : chiname) + '</td></tr>' +
    '<tr><th>' + "Building CSU ID" + '</th><td>' + csuid + '</td></tr>' +
    '<tr><th>' + "Model ID" + '</th><td>' + clickId + '</td></tr>' +
    '</tbody></table>'
    entity.position = new Cesium.ConstantPositionProperty(featurePos)
    viewer.selectedEntity = entity
    } else {
    var entity = new Cesium.Entity({
    name: 'Information',
    })
    entity.description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
    '<tr><th>' + "Model ID" + '</th><td>' + clickId + '</td></tr>' +
    '</tbody></table>'
    entity.position = new Cesium.ConstantPositionProperty(featurePos)
    viewer.selectedEntity = entity
    }
    });
    }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    building.tileVisible.addEventListener(function(tile) {
    var content = tile.content;
    var featuresLength = content.featuresLength;
    for (var i = 0; i < featuresLength; i += 2) {
    var feature = content.getFeature(i);
    if (feature.content.batchTable)
    if (clickId && feature.getProperty("name") == clickId)
    feature.color = Cesium.Color.YELLOW
    else
    feature.color = new Cesium.Color(1, 1, 1, 1)
    }
    });

  • 相关阅读:
    swiper插件的使用demo
    可能要用的东西
    VIDEO
    vue上传图片加水印
    图片 base64 file blob 之间相互的转化
    vant 上传图片加水印
    JS 随机排序算法
    ubuntu16.04 下apache 搭建站点
    Unity常用目录对应的Android && iOS平台地址
    IOS 官方实现单例模式
  • 原文地址:https://www.cnblogs.com/zany-hui/p/15102859.html
Copyright © 2020-2023  润新知