<!--********************************************************************* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.*********************************************************************--><!DOCTYPE html><html><head><meta charset="UTF-8"><title data-i18n="resources.title_popDensityRange"></title><script type="text/javascript" include="jquery,bootstrap-css" src="../js/include-web.js"></script><style type="text/css">.legendItemHeader,.legendItemValue {width: 120px;height: 18px;font-size: 14px;}</style></head><body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;"><div id="map" style="margin:0 auto;width: 100%;height: 100%"></div><script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script><script type="text/javascript">var host = window.isLocal ? window.server : "https://iserver.supermap.io";var map, themeLayer, infoView,baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图",dataUrl = host + "/iserver/services/data-jingjin/rest/data";init();function init() {// 检测是否支持 Canvasif (!document.createElement('canvas').getContext) {alert(resources.msg_supportCanvas);return;}map = L.map("map", {crs: L.CRS.EPSG4326,center: [40, 117],maxZoom: 18,zoom: 7});new L.supermap.TiledMapLayer(baseUrl).addTo(map);initThemeLayer();}function initThemeLayer() {themeLayer = new L.supermap.RangeThemeLayer("ThemeLayer", {// 开启 hover 高亮效果isHoverAble: true,opacity: 0.8,alwaysMapCRS: true}).addTo(map);themeLayer.style = new L.supermap.ThemeStyle({shadowBlur: 16,shadowColor: "#000000",fillColor: "#FFFFFF"});// hover 高亮样式themeLayer.highlightStyle = new L.supermap.ThemeStyle({stroke: true,strokeWidth: 4,strokeColor: 'blue',fillColor: "#00EEEE",fillOpacity: 0.8});// 用于单值专题图的属性字段名称themeLayer.themeField = "POP_DENSITY99";// 风格数组,设定值对应的样式themeLayer.styleGroups = [{start: 0,end: 0.02,style: {color: '#FDE2CA'}}, {start: 0.02,end: 0.04,style: {color: '#FACE9C'}}, {start: 0.04,end: 0.06,style: {color: '#F09C42'}}, {start: 0.06,end: 0.1,style: {color: '#D0770B'}}, {start: 0.1,end: 0.2,style: {color: '#945305'}}];themeLayer.on('mousemove', highLightLayer);addThemeFeatures();}function addThemeFeatures() {var getFeatureBySQLParams = new L.supermap.GetFeaturesBySQLParameters({queryParameter: new L.supermap.FilterParameter({name: "Jingjin",attributeFilter: "SMID > -1"}),toIndex: 500,datasetNames: ["Jingjin:BaseMap_R"]});new L.supermap.featureService(dataUrl).getFeaturesBySQL(getFeatureBySQLParams, L.supermap.DataFormat.ISERVER).then(processComplete);}function processComplete(serviceResult) {var result = serviceResult.result;if (result && result.features) {themeLayer.addFeatures(result.features);}initLegendView();initInfoView();}//高亮时显示图层信息框的控件function initInfoView() {infoView = L.control({position: 'bottomright'});infoView.onAdd = function () {this._div = L.DomUtil.create('div', 'panel panel-primary infoPane');$(this._div).css("width", "272px");$("<div class='panel-heading'><h5 class='panel-title text-center'>" + resources.text_attributeTable + "</h5></div>").appendTo(this._div);var content = $("<div class='panel-body content'></div>").appendTo(this._div);content.css('fontSize', '14px');handleMapEvent(this._div, this._map);return this._div;};infoView.update = function (fea) {var content = $(".content");content.text("");if (!fea) {return;}var innerHtml = "ID: " + fea.attributes.SMID + "<br/>";innerHtml += resources.text_districtName + fea.attributes.NAME + "<br/>";innerHtml += resources.text_densityOfPopulation + ":" + parseFloat(fea.attributes.POP_DENSITY99).toFixed(5) + "<br/>";content.html(innerHtml);}}//图例控件function initLegendView() {var legendView = L.control({position: 'bottomright'});legendView.onAdd = function () {this._div = L.DomUtil.create('div', 'panel panel-primary legend ');var title = "<div class='panel-heading'><h5 class='panel-title text-center'>" + resources.text_legend + "</h5></div>";$(title + "<div class='panel-body text-center' ><table>" +"<tr><td class='legendItemHeader'>" + resources.text_populationDensity + "</td><td class='legendItemValue'>" + resources.text_color + "</td></tr>" +"<tr> <td class='legendItemHeader'>0 - 0.02</td> <td class='legendItemValue' style='background: #FDE2CA'></td></tr>" +"<tr> <td class='legendItemHeader'>0.02 - 0.04</td> <td class='legendItemValue' style='background: #FACE9C'></td> </tr>" +"<tr> <td class='legendItemHeader'>0.04 - 0.06</td> <td class='legendItemValue' style='background: #F09C42'></td> </tr>" +"<tr> <td class='legendItemHeader'>0.06 - 0.1</td> <td class='legendItemValue' style='background: #D0770B'></td> </tr>" +"<tr> <td class='legendItemHeader'>0.1 - 0.2</td> <td class='legendItemValue' style='background: #945305'></td> </tr>" +"</table></div>").appendTo(this._div);handleMapEvent(this._div, this._map);return this._div;};legendView.addTo(map);}function highLightLayer(e) {if (e.target && e.target.refDataID) {var fea = themeLayer.getFeatureById(e.target.refDataID);if (fea) {infoView.addTo(map);infoView.update(fea);}} else if (infoView) {infoView.remove();}}function handleMapEvent(div, map) {if (!div || !map) {return;}div.addEventListener('mouseover', function () {map.dragging.disable();map.scrollWheelZoom.disable();map.doubleClickZoom.disable();});div.addEventListener('mouseout', function () {map.dragging.enable();map.scrollWheelZoom.enable();map.doubleClickZoom.enable();});}</script></body></html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。